elementor ver4.x リリース!

Atomicエディターで新時代に突入
elementor logo 2026

elementor ver4.x リリース!

ついにEditor v4が正式リリース!

WordPressをデザイナーが理解できるウェブパブリッシュプラットホームにしてくれるプラグインelementorがver3.xから4.xへと進化しました!

ver2.xからver3.xではページの領域をセレクションからコンテナというCSSライクなコンセプトへと大幅にアップデートしましたが、今回のver3.xからver4.xへの進化はさらにCSS寄りになり、その名もAtomic Editorというコンセプトが導入されました。

Atomic Editorとは?

長い間アルファステータス、ベータステータスであったEditor v4と呼ばれていたもので、よりCSSのルールに沿って表示内容を実現したコンセプトです。

専用のAtomicウィジェットはすべて共通のプロパティが用意されていて、登録された設定内容はどのウィジェットからも呼び出すことが可能になります。

ウィジェットベースのページビルダーからの脱却

elementorでのページ作成では様々なウィジェットをパズルのように配置して組み立てていくといったイメージです。

elementorを使い込んでいくと、実装されている様々なウィジェットをそこまで使い分けないことに気づきます。

つまり配置の領域を決定するコンテナや画像、テキストといった基本的なウィジェットだけで十分ウェブサイトを構築できることに気づくのです。

今回のメジャーアップデートではそういった事実を踏まえた上でウィジェットベースのページビルダーから、よりモダンなデザインシステムになろうとしている感じです。

elementor v4から採用されたAtomicエディターではAtomicエディター専用のAtomicウィジェット(エレメント)が採用されています。

Atomicウィジェットは画像のようにAtomicアイコンがついています。

Atomicウィジェット

elementor 3.xのウィジェットには基本的な設定、スタイル、 高度な設定とタブが分かれていましたが、Atomicウィジェットではウィジェットの内容、スタイル、インタラクションと分かれていてスタイルタブの内容が完全に統一されています。

スタイルの内容が完全に統一されているため、一回その内容を理解できればどのウィジェットを使っていても設定に迷うことはありません。

さらにスタイルにはバリアブル(変数) というコンセプトが導入され、登録した設定した内容をどのウィジェットからも呼び出すことが可能です。

スタイルの中の個別の設定を登録して呼び出す、それがバリアブル(変数) です。

さらにスタイルタブの内容全体を登録して呼び出すことができるものがクラス です。

elementor 4.xにはもうひとつコンポーネント という重要なアップデートがあります。

コンポーネントはDivブロックで作成したデザインと内容をelementor3.xのグローバルウィジェットのように登録できる機能ですが、指定した内容を後から設定しなおせる専用ウィジェットのようなものです。

このようにelementor 4.xでは、バリアブル、クラス、コンポーネントと大きく3つの新たなコンセプトが導入され、コーディングができないデザイナーにより柔軟なウェブ開発環境を提供するものに劇的に変化しました。

いままでは既定のウィジェットを使い分けて構築していたスタイルからウィジェット自体も自分でカスタマイズしていけるようなさらにモダンなデザインシステムへ変化したわけです。

Picture of Minoru Nitta
Minoru Nitta
グラフィックデザイナー・フォトグラファー
このエントリーをはてなブックマークに追加
mx4 mouse
今デザイナーが一番欲しいマウス
勝手マニュアル進捗 39%