Elementor でページを作るたびに、「見出しやボタンの色を1つずつ手作業で設定している…」と悩んでいませんか？
この方法だと、後からやっぱりテーマカラーを変えたいと思った時、全ページを一つずつ修正する大変な作業が待っています。これを一瞬で解決するのが、Elementor の「グローバルカラー」機能です。
今回は、制作スピードが劇的に上がる色の共通設定の基本を分かりやすく解説します！
グローバルカラーとは？
グローバルカラーとは、サイトでよく使う色を専用のパレットに登録しておく機能のことです。これを設定する最大のメリットは以下の2点です。
- 毎回色を探す手間がなくなる： 毎回カラーピッカーで色を作ったり、カラーコード（例：#333333）をコピペしたりする必要がなくなります。
- 一括で色を変更できる： 後からボタンの色を青から赤にしたいと思った時、パレットの青を赤に変更するだけで、サイト全体のボタンが一瞬で赤に切り替わります。
サイト設定から色を登録する手順
まずはパレットにサイトのテーマカラーを登録しましょう。
-
編集画面の左上にあるハンバーガーメニュー（三本線）をクリックします。
-
サイト設定を開き、「グローバルカラー」を選択します。
-
デフォルトで「プライマリー（メイン色）」「セカンダリー（サブ色）」「テキスト（文字色）」「アクセント（ボタン等の強調色）」の4つが用意されています。
-
各項目のカラーボックスをクリックし、ご自身のサイトに合わせて色を変更します。（※「カラーを追加」ボタンで新しい色を増やすことも可能です）
-
最後に下部の更新ボタンを押して保存します。
実際のウィジェットで登録した色を使う方法
パレットに登録した色を、見出しやボタンに適用する方法もとても簡単です。
- 見出しやボタンなど、色を変えたいウィジェットを選択し、[ スタイル ] タブを開きます。
-
文字色の項目の横にある、「地球儀のアイコン」をクリックします。
-
先ほど登録したグローバルカラーのパレットが表示されるので、使いたい色を選択します。
これで、ウィジェットがグローバルカラーと紐付きました！
まとめ
- サイトを作り始める前に「サイト設定」で基本の色を登録しておく。
- ウィジェットの色を設定する時は、カラーピッカーではなく「地球儀アイコン」から選ぶ。
- 色全体を変えたくなったら、グローバルカラーを修正して一括変更する。
この初期設定をクセづけるだけで、制作後の修正作業が驚くほどラクになります。Elementor初心者を抜け出す第一歩として、ぜひ今日から使ってみてください！
