もくじ
ToggleGlobal Colors はElementor 3.0の新機能!
Global Colors はElementor3.0以降に登場した新機能の1つです。一体何が出来るのか、今日は皆さんと一緒に見て行きたいと思います!
まぁまぁ・・・(汗)一緒に見て行けば大丈夫ですよー。覚えちゃえば結構便利ですよ。
グローバルカラーズ = カラーピッカーの進化版
この画面覚えてますか?
ええええっ?!まだバージョンアップしてないんですね!
あ、なんか・・・ごめんなさい・・・お願いします・・・。
気を取り直して・・・このカラーピッカー機能がグローバルカラーズとなって、パワーアップしたと思って頂ければと思います。良く使う色をただ保存するのではなく、名前をつけて設定カラーとして保存出来る様になったんです!
ですよね?言葉だけだと分かりづらいと思いますので、これから一緒に見てきましょう!
デザインシステムにあるGlobal Colors
さっそく、グローバルカラーをいじってみたいと思います!って、どこにあるんだ?!と思う方もいると思いますので、まずは設定画面の行き方を見てみます。
①エディター画面(編集画面)を開きます。
②設定の「サイト設定」をクリック
③ Global Colorsをクリック
↓↓↓↓
すると、ついに!!! グローバルカラーズの設定に到着!!!
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
いやいや、これよりももっと簡単にアクセス出来る方法があるんですよー。
し、失礼しました・・・(汗)
簡単なGlobal Colorsへのアクセス方法
編集画面で文字(テキスト)扱うウィジェットを選択します。ここでは「見出しウィジェット」で説明しますね。選択し、右の設定エリアのスタイルを選びます。タイトルの文字色の部分をご覧下さい。地球のアイコンがあるの分かりますでしょうか?
こ、これでどうですか・・・?
なんか、あ・・・荒れてますね・・・(汗)
この地球アイコンをクリックすると、この様にプルダウン?ポップアップ表示され、色のメニューの様なものが表示されます。そしてこの右上にあるギアーのアイコンをクリックすると、先ほどのグローバルカラーズにたどり着けます。
良かった!そーですね、編集中にダイレクトに移動出来るのは便利ですよね。
お任せ下さい!いよいよGlobal Colourの使い方に行きます!
グローバルカラーズの使い方
お待たせ致しました。グローバルカラーズの使い方について見て行きます!まずはこちらをご覧下さい。
あらら、賛否ありますね(笑)
今まで、一つ一つのウィジェットで色を設定していた文字色が、同じ色設定を選択した文字色が、大元(=グローバルウィジェット設定)を変えると、同じ設定の文字色が変更できちゃうんです!!!
活用イメージ
確かに、これだけではなかなか良さがわからないですよね。例えば、ホームページの各ページの見出しに、同じグローバールカラーズを設定して置く事で、「やっぱりこの色にしたい!」と思った時、一斉に各ページの見出しを変更出来るんです!
でしょ?!これは慣れると便利なんですよー。
ですね!実はそれも可能なんです!
一部だけ個別設定する方法
実は簡単で、単純に今までの様に、個別にウィジェットを選択して色を設定してあげるだけです。
オリジナルカラーを設定する方法
この様に、同じグローバルカラーを設定することで、文字色の一元管理が可能となります。「○○の色」などの名前で登録することで、よりいっそうどこの色が変わるのか、イメージしやすく管理しやすくなります。
今度は、オリジナルの色の登録方法を見て見ましょう!
①まずは色を決めよう!
②「+」のアイコンをクリック
③すると?登録画面が出るので、
④名前を決めて、登録!
⑤グローバルカラーが設定されたことに!
⑥次回からはこの設定を選ぶだけ!
これは1度登録してしまえばOKです。何度もやるとたくさん登録されちゃうので、注意!
おおおっ!わかってもらえましたか?この感動を(笑)
し、失礼しました・・・
実は文字色以外にも・・・
既にお気づきかもしれませんが、同じ仕組みで、フォントも設定することが出来ます!
もちろん、グローバルカラーズ同様に、1度登録してしまえば、次回以降は簡単に設定が出来、一括で変更・管理が可能になります!
ですよね!この機能は本当に便利です!特にサイト制作をお仕事でされる場合、お客様のご意向で変更になっても、瞬時に変更することが出来るのです!
まとめ
いかがでしたでしょうか? グローバルカラーズに グローバルフォント !Elementor3.0になって益々便利になったと思いませんか?この様に、どんどん進化して行くElementorから目が離せません
グローバルカラーズの機能
・色の設定が名前を付けて登録出来る。
・同じグローバルカラーズを設定したテキストはまとめて文字色を変更可能!
・もちろん今までどおり、一部だけの色設定も可能!
・文字色だけではなく、フォントも同様に一元管理!
・フォントの種類だけではなく、サイズや太さも設定、登録可能!
個人的には結構、慣れるまでに時間がかかりました。ですが、慣れてしまえば非常に便利で分かりやすいサイト制作が可能です!ので、是非みなさんも使いこなして見て下さい!
【お知らせ】
・わからないことは、Q&A で探してみよう!!
【YouTubeチャンネル】
・チャンネル登録宜しくお願い致します!