Editor V4ベータ格上げに伴って使うべきか?
Editor v4はElementorを根底から進化させる
Elementor Editor V4はElementorの仕組みを根本から作り直した、超高速・高機能な次世代エディタでAtomicというコンセプトがベースになっています。
これまでのElementorは「初心者でも直感的に使えること」を優先してきましたが、V4ではそれに加えてプロのような効率的な管理圧倒的な表示スピードを両立させようとしています。
1. 「CSSファースト」への転換(一番の目玉)
これまでは、ボタン一つひとつの色やサイズを個別に設定するのが基本でしたがV4ではクラス(Class)という概念が導入される。
今まで: 10個のボタンの色を変えるなら、10回設定が必要。
V4: 「メインボタン」というクラスを作り、それを10個のボタンに適用。クラスの設定を一箇所変えるだけで、10個すべてが同時に変わります。
メリット: サイト全体のデザイン修正が数秒で終わり、一貫性が保てます。
2. 「Atomic(アトミック)構造」でサイトが軽くなる
これまでのElementorは1つの部品を表示するために裏側で大量のコード(DIVタグ)を生成されサイトが重くなっていた。
V4の仕組み: 部品を最小単位(Atomic = 原子)まで分解し、必要なコードだけを読み込むようになります。
メリット: ページ読み込み速度が向上し、SEO(検索エンジン対策)にも有利になります。
3. 操作画面(UI)の刷新
編集画面のデザインもよりモダンでスッキリしたものに進化する。
プロパティパネル: 設定項目が整理され、どこに何があるか探しやすくなります。
変数の活用: 色や余白を「変数(Variables)」として登録し、パズルを組み合わせるようにデザインできるようになります。
と、されています。
Editor V4は以前からアルファ機能として実装されていた
正確にいうと、使いたいということを宣言するとEditor v4が解放されるような仕組みでした。
ベータステータスの現在でもそれは同じでWordpressの管理画面>Elementorメニュー>設定>バージョン4タブからEditor v4をオンにすることによって利用することが可能です。
Edior v4はまだベータである
筆者が運営する個人的なブログサイト Daily LEGO でEditor v4をオンにしてみました。
ベータステータスということもあり、ウィジェットによっては まだアトミックなウィジェットになっていないようです。
アトミックでないとEditor v4のコンセプトであるclassで見た目を制御するということができません。
原子元素と表示されているウィジェット群がアトミック要素でアトミック要素には各ウィジェットの右肩にアトミックのアイコンの表記がされています。
この中でもDivブロックは早めに慣れておくと進化のキャッチアップに重要な要素に思えます。
と、いうのもElementorはレイアウトの領域の指定をセクションからコンテナという概念に大きく変化させました。
根底には両者ともCSSのdiv要素の利用があったものの、Editor v4からはそのものズバリdivで領域を考えるというコンセプトが導入されたわけです。
どうでもいいですけど、原子元素ではなくてアトミックという翻訳でよい気がします。
アトミックなウィジェットではclassで見た目を制御することが可能になって、画像のようにClass Manager機能を使って、クラスの設定ないようを俯瞰で管理できるようになります。
クラスマネージャーを通してクラスの設定内容を変更することで、そのクラスが適用されている部分を一挙に修正することが可能になるということです。
Editor v4をオンにすると既存サイトは壊れる?
筆者が運営する二つのサイトでEditor v4をオンにしてみました。
既存Elementorのセクションやコンテナが破棄されたわけではないので、いまのところ表示が壊れるようなことにはなっていません。
想像ですが、独自にcssを追記している場合などは何か不具合がおきるかもしれません。
いずれにしろ、徐々にEditor v4化していけそうなところは一安心といった感じです。
Editor v4入れちゃう?
筆者はまだライブサイトには使いません。
とはいうものの新たなdivブロックは慣れておく必要もありそうだし、classで見た目を管理していく考え方もElementorを利用したサイト制作自体のワークフローにも大きな変化をもたらしそうです。
なのでテストサイトを立ち上げて早めにEditor v4環境に慣れておくのは非常に重要だと思います。