【Elementor グローバル設定】

Elementor

Elementor のグローバル設定はご存じでしょうか?

グローバル設定を使用することで、サイト制作効率を大幅UPできます

Elementorで作成したサイトの「複数のウィジェットのフォントや色を修正したい…」と思った時、1つ1つ修正していくのはとても面倒ですよね。グローバル設定を行うことで、一括で修正が可能になり、修正作業が格段に楽になります!

グローバル設定とは

Elementorのグローバル設定とは、何度も使用するフォント設定やカラー設定を登録しておくことができる機能です。グローバル設定を使うことで、フォントやカラーを簡単に使いまわすことができ、修正作業も一括で行うことができるようになります。

イメージできるように、具体例見ていきましょう。例えば、同じボタンを何個も使用しており、サイト作成後に、ボタンのカラーを全て変更することになったとします。

複数のボタン

グローバル設定をしていない場合は1つ1つボタンのスタイルを修正していく必要があります。ここで、グローバル設定をしておくと、グローバル設定のカラーのみを修正することで、全てのボタンを一括で修正することができます。

複数のボタン-グローバル設定

では、設定方法を説明していきます!

グローバル設定

Elementorの編集画面を開き、「サイト設定」を選択します。

グローバル設定①

サイト設定からグローバルカラーとグローバルフォントのそれぞれの設定を行うことができます。

グローバルカラー

サイト設定から「グローバルカラー」を選択します。

グローバルカラー

「色を追加」ボタンを選択し、追加した色の名前とカラーを設定します。
設定完了後に「更新」ボタンを選択したら、編集画面に戻ります。

色を追加

編集画面に戻ると、グローバルカラーが追加されているので、追加したカラーを選択します。

カラー設定

このように、よく使う色をグローバルカラーとして設定することができます。

次に、グローバルフォントの設定方法を説明していきます。

グローバルフォント

サイト設定から「グローバルフォント」を選択します。

グローバルフォント

「スタイルを追加」ボタンを選択し、追加したフォントの名前と色を設定します。
設定完了後に「更新」ボタンを選択したら、編集画面に戻ります。

スタイルを追加
編集画面に戻ると、グローバルフォントが追加されているので、追加したフォントを選択します。

スタイル設定

このように、よく使うフォントのスタイルをグローバルフォントとして設定することができます。

修正方法

設定したグローバルカラーやグローバルフォントを修正することで、グローバル設定を適用したスタイルを一括で変更することができます。

先ほどのグローバル設定と同様の流れでグローバルカラーを開き、先ほど設定したグローバル設定を変更します。これにより、グローバルカラーが適用されているスタイルが全て変更されます。

グローバルカラー-変更

このように、スタイルを簡単に変更することが出来るようになります!

 

タイトルとURLをコピーしました