ElementorV4のAtomicエレメントにだけ使える新機能として「変数」ができました。
WEBサイト制作に精通している人であれば、「待ってました！」の機能ですが、これまでノーコード中心の制作しかしたことがない人にとってみれば、「なんのこっちゃ」というところだと思いますので、基本的なところから解説していきたいと思います。
Elementor V4の「変数」とは？
ElementorV4の変数とは、色、フォントの種類、フォントサイズ、間隔、枠線などのデザインの値をまとめて管理して同じものは使い回すことができる便利な機能です。
たとえば、クライアントから当初「ボタンはピンクで」と言われたとして、適当に色を設定しておきます。
あとから「もっと紫っぽいピンクで」と言われたら、一つ一つ修正するのは面倒ですよね？
しかし、変数で設定しておけば、まとめて変更することができます。
このような設定をElementorならではのノーコードでできるので更に便利な機能です。
Elementor V4の「変数」の設定方法
では、詳しく設定方法を解説していきたいと思います。
まず、ElementorV4の変数が使えるのはAtomicエレメントだけです。
今のところ下の画像にある11個プラスAtomicフォームです。
Atomicフォームについては、こちらの記事で解説していますので、まだの方はご覧ください。
続いて、設定方法です。
設定する箇所は複数ありますが、よく使うシーンから解説していきます。
変数が設定できる箇所には下の図のように「品」のようなマークのある箇所です。
まずは、マウスをあわせてプルダウンから変数の設定画面を表示させます。
この画面ではすでに選択できるフォントが表示されていますが、今回は新規に作成することを想定してプラス（＋）ボタンを押して設定します。
見出しは「変数を作成」になっています（下図）ので、ここで名前とバリューを設定して「生成」ボタンを押して設定完了です。
次からはこの変数を呼び出せば同じ設定になるという訳です。
ElementorV4の変数の編集方法
先ほど解説したとおり、変数の特徴はあとから編集してまとめて変更できる点を挙げました。
では、どのように編集するか解説していきます。
編集画面の左上にアイコンが並んでいますが、一番右の雫アイコンから編集できます。
次の画面で変数とクラスの設定が可能です。
下図では変数が選択されています。
この画面のプラス（＋）ボタンから新規設定可能です。
仕様が事前に決まっている場合は、この画面から最初に設定するのが良いでしょう。
しかし、先ほどの要領でひとつひとつ設定していくと並び順が作成した順で探すのに時間がかかってしまいます。
そこでこの編集画面で並べ替えや名前の統一など行うことができますので、便利です。
たとえば、カラーでもフォント用、ボタン用、枠線用・・・といったグループ分けすることで探す時間が短縮できます。
変数とグローバルカラーを同期させる
上の図にある「グローバルカラーと同期」について解説します。
グローバルカラー／フォントは、これまでのElementorにあった機能です（下図参照）。
サイト設定のメニューの中にグローバルカラー／フォントがあります。
変数からこれまでのグローバルカラー／フォントと同期することができます（逆はできないです）。
「あ、じゃあ、これまでの機能と一緒なの？」という疑問を持つ人も多いでしょう。
機能的にはほぼ一緒ですが、変数の方が設定できる範囲が広がっています。
特にサイズについてはこれまでのサイト設定でできることより増えています。
変数の考え方・アイディア
これまで変数を使ったことがある方は読み飛ばして結構です。
はじめて、という方は是非参考にしてください。
【注意点その１】同じ色でも分ける
たとえば、同じ白（#ffffff）という変数をボタンやテキストなどで使いまわしたとします。
あとからボタンの白だけ少し暗めの白にしたい・・・となった場合、変更が効かなくなります。
変更はできますが、テキストも一緒に変わってしまいます。
ですので、同じ白（#ffffff）でも「ボタンの白」「テキストの白」と2つ作ると良いと思います。
【注意点その２】分かりやすい名前にする
たとえば、ひとりでサイト制作するなら構わないかも知れませんが、複数人で制作する場合、名前を見ただけで分かるようにルールを決めると良いと思います。
たとえば、「どこで使うかーどういう値か」といった具合です。
「ボタンー背景ーホバーー白」という名前であれば、名前をつけた人でなくてもひと目でその使い場所が分かります。
変数を沢山作ったときは検索に役立つ名前も重要な要素です。
【注意点その３】作りすぎない
たとえば、フッターでしか使わないというものであれば、わざわざ変数にする必要はありません。
作りすぎることで混乱を招いてしまいますので、ご注意ください。
まとめ
ElementorV4の新機能としてAtomicエレメントにだけ使える「変数」が追加されました。
変数はこれまでのサイト設定のグローバルカラー／フォントに類似した機能ですが、これまでになかったサイズなどの設定が加わり、さらに「変数」で作ったカラーやフォントをこれまでのサイト設定の機能と同期することでこれまでのエレメント（ウィジェット）とでも使うことができます。
特に注意したいのは変数の使い回しをしないことと名前の付け方です。
いずれにしても便利な機能ですので、試しに使ってください。
