サイト全体の要素に簡単に割り当てることができるグローバルカラーとテキストスタイルを使用して、独自のデザインシステムを作成します。
グローバルカラー
定義済みのグローバルカラー(プライマリカラー、セカンダリカラー、テキストカラー、アクセントカラー)、インラインカスタムカラー、またはElementorのサイト設定から新しいグローバルカラーを設定します。Elementorのページや投稿エディタから、ウィジェットパネルの左上隅にあるハンバーガーメニューをクリックし、サイト設定 > デザインシステム > グローバルカラーに移動します。
グローバル
定義済みのグローバルカラー
デフォルトでは、事前に定義された色(プライマリ、セカンダリ、テキスト、アクセント)は、テーマのCSSから事前に設定されています。 ここで変更して、テーマの設定を上書きしてください。
新しいグローバルカラー
定義済みの4つのグローバルカラー(プライマリ、セカンダリ、テキスト、アクセント)に加えて、選択した色をグローバルパレットに追加して、Elementorのカラーオプションで使用することができます。
インラインカスタムカラー
また、グローバルカラーパレットに追加することなく、任意のカスタムカラーを選択してインラインで使用することもできます。
Elementorのページや投稿から、ウィジェットパネルの左上隅にあるハンバーガーメニューをクリックして、グローバルスタイル > サイト設定 > カラーとタイポグラフィに移動します。
- 色の編集:色見本をクリックして、既存の任意の色の新しい色を選択します。名前を変更することもできます。色の名前をクリックすると、名前を変更できます。例えば、プライマリをメインに、アクセントをハイライトに、などのように変更できます。
- 色の追加:色の追加ボタンをクリックして、新しいグローバルカラーまたはインラインカスタムカラーを追加します。
- 色の削除:色見本にカーソルを合わせ、表示されるゴミ箱アイコンをクリックします。
注: グローバルカラーを削除すると、そのすべてのインスタンスは、未知のソース、おそらくテーマやブラウザなどから値を継承します。
注:グローバルスタイルはコンテンツテンプレート自体の一部ではありません。これは、デザイン システムの背後にあるロジックです。テンプレートを別のサイトにインポートすると、新しいサイトからグローバルスタイルを取得することができます。