DiviWebサイトにカラーパレットを適用する方法
公開: 2021-09-05当たり障りのないウェブサイトよりもインターネット上で悪いことはほとんどありません。 確かに、一部のWebサイトは、意図的にブルータリストまたはミニマリストの外観を求めていますが（Craigslistを見て）、それらでさえ当たり障りのないものではありません。 ソリッドカラーパレットを持つことは、デプレス以上イムプレス超えることを、これらの平凡な単色eshopsあなたのウェブサイトはベージュ大衆から目立つようにする確実な方法です。 ありがたいことに、Diviは、MagicColorシステムとGlobalColors機能の組み合わせでカバーしてくれました。 あなたは簡単にあなたのDiviウェブサイトにカラーパレットを適用することができます。 結果はあなたの訪問者を感動させるに違いありません。
カラーパレットに関する一般的なヒント
Divi Webサイトにカラーパレットを追加するのがいかに簡単であるかにかかわらず、業界とブランドに適した種類のパレットを使用することが不可欠です。 すでにブランドカラーをお持ちの場合は、ぜひお立ち寄りください。カラー理論を深く理解する以外に（ちなみに、これは非常に興味深いことです）、どこから始めればよいかを理解するのに役立つヒントがいくつかあります。新しいカラーパレット。
1.暗い色または明るい色のWebサイトを決定します
使用するカラーパレットには、間違いなく明るい色と暗い色があります。 書かれた内容が失われないように、カラーパレットではコントラストが必須です。
さて、それはあなたがあなたのウェブサイトにカラーパレットを適用したいときにあなたがあなた自身に尋ねなければならない最初の質問にすぐに私たちを導きます。 暗い色のウェブサイトを作成しますか、それとも明るい色のウェブサイトを作成しますか？ 選択したからといって、それらを組み合わせることができないわけではありませんが、選択することで、カラーパレットをより簡単に選択できます。
2.色の選択
理論的には、カラーパレットに必要な色の数を自分で決定できます。 カラーパレットを適用または決定する標準的な方法はありません。 ただし、Diviで色のバランスをうまくとるために、5色を使用することをお勧めします。
5色のカラーパレットをWebサイトに適用できるように、さまざまなカラーパレットを紹介するときに、同じレイアウトに一貫して適用する1種類の方法を選択しました。 しかし、それに飛び込む前に、私たちの方法に従いたい場合は、カラーパレットに必要なさまざまなタイプの色を見てみましょう。
背景色
選択した背景色が互いに一致していることを確認してください。 これらの背景色を互いに近くで使用し、美しい結果を得ることができます。 彼らは特定の調和を持っている必要があります。
フォントの色
次に選択する必要があるのは、フォントの色です。 論理的には、フォントの色は選択した背景色によって異なります。 明るい色の背景色を選択した場合は、フォントの色が暗い色であることを確認してください。その逆も同様です。
ハイパーリンクとCTAカラー
選択したハイパーリンクの色は、Webサイトに命を吹き込む色の1つです。 この色は、Webサイトに含めるアクションの呼び出しに使用するため、パレット内の他の色よりも目立つようにしてください。
最後の仕上げの色
大事なことを言い忘れましたが、あなたはあなたのウェブサイトに色をもたらす別のすぐに使える色を選ぶことができます。 この色はハイパーリンクの色ほど重要ではありませんが、Webサイトのカラーバランスを完成させるのに役立ちます。
3.十分なコントラストがあることを確認します
前に述べたように、カラーパレットのいくつかの色の間にコントラストを提供することが不可欠です。 Webサイトにカラーパレットを使用している場合、このコントラストは主に、共有する書かれたコンテンツを読みやすくするのに役立ちます。 なぜなら、あなたのコンテンツが読みにくいのなら、結局のところ、その目的は何ですか？
4.適切な色の使用バランスを見つける
カラーパレットで特定の色を使用する頻度を決定するには、さまざまな方法があります。 ウェブサイトで使用している色に圧倒されたくない場合は、適切なカラーバランスを作成する必要があります。
ほとんどの場合、カラーパレットでより中間色を使用し、他の色を使用して提供するコンテンツを強調するようにしてください。
DiviWebサイトにカラーパレットを追加する方法
そのすべてを念頭に置いて、Diviを掘り下げて、サイトの新しいカラーパレットを適用する時が来ました！
デフォルトのDiviパレット
まず、WordPressダッシュボードに移動し、 Divi –テーマオプションに移動します。 [全般]タブの下に、[カラーピッカーのデフォルトパレット]というタイトルのエントリが表示されます。 これにより、DiviBuilderでカラーオプションを開いたときにいつでもすばやくアクセスできる8色を選択できます。 デフォルトでは、これらは多くの人が使用する鮮やかな色ですが、単一のWebサイトで使用する必要がある完全なパレットではありません。
これはあなたのサイト自体に色を適用しないことに注意してください。 ビルダーのクイックオプションとしてのみ表示されます。
DiviBuilderに入る
Divi設定でパレットを設定するかどうかに関係なく、サイトの要素にさまざまな色を適用するオプションがあります。 これを行うには、Divi Builderに移動し、調整するモジュールの設定を新しいパレットに入力します。
要素に対して現在選択されている色の下に、省略記号アイコン（3つのドット）が表示されます。 それをクリックすると、DiviのMagicColorツールが表示されます。 ビルダーは、最近使用した色とページ自体の色を考慮して、補色で構成された一連の複数のパレットを提供します。これらは非常にうまく機能するはずです。
色をグローバルに設定
使用する色を決定したら、それらをグローバルとして設定します。 モジュールや要素に関係なく、グローバルカラーをページ全体で変更するように設定できます。 つまり、5つの異なる色を交換する場合は、その色のインスタンスに対して個別に100回以上交換する必要はありません。 あなたはそれを5回します。
開始するには、カラーピッカーを使用して任意のモジュールに移動します。 その下に、 Globalというリンクが表示されます。 それをクリックすると、パレット全体が消えます。 ここから、プラス+アイコンをクリックして、グローバルに使用できる色を設定します。
新しいピッカーが表示されたら、緑色のチェックマークをクリックして、現在の色をグローバルオプションとして追加します。
白い円がどこにあるかは関係ありません。 16進値は、グローバルカラーに追加される値です。 プラスアイコンの横に追加されたデフォルトの色が表示されます。 また、通常の円ではなく、色の液滴形状アイコンにより、サイトに色が適用されていることがわかります。
さらに、選択した色を右クリックし、[グローバルに変換]を選択して、リストに追加することができます。
選択したパレットの色ごとにこのプロセスを繰り返し、最終的にパレット全体がグローバルリンクの下に保存されるようにします。 これは、ページ上のすべての要素に新しいパレットを適用する際に非常に重要です。
グローバルカラーを適用する
次に、ページ上の同じ色のすべてのインスタンスを置き換える必要があります。グローバルに調整できます。 変更したい色の要素に移動して右クリックします。 次に、コンテキストメニューから[検索と置換]を選択します。 ここでは、この色をグローバルに変換しないでください。 それは次のステップの一部です。
次の画面では、その色をグローバルな色に置き換えることを選択します。 [置換]で[グローバル]をクリックし、ページ全体に拡張するグローバルカラーを選択していることを確認してください。 「[現在の要素タイプを挿入]に限らず、すべてのオプションタイプ内で見つかったすべての値を置き換える」というチェックボックスを必ずオンにしてください。 これにより、何があってもその色が置き換えられます。
これで、その特定のグローバルカラーを編集できます。編集すると、その各インスタンスが変更されます。 パレットから新しい色を選択しないことに注意してください。 それは現在の色を交換するだけです。 その単一の色のすべてのインスタンスをグローバルとしてマークしたため、色を編集してすべての場所で変更します。
カラーチューザーを使用して、集合として編集できます。 ドロップレットをクリックするだけで、新しいドロップレットを選択できます。
その後、新しいパレットの各色に対してそのプロセスを繰り返すだけです。 パレットの各色を1回変更するだけです。 特定の色の特定の各要素の交換ではありません。
まとめ
グローバルカラーパレットを選択してDiviWebサイトに適用することがこれまでになく簡単になりました。 マジックカラー機能を使用してパレットを選択し、それらをサイトのグローバルカラーとして設定できます。 それが完了したら、交換する色を選択し、Diviの組み込みの検索および置換機能を使用して、ページ全体でそれらの色を置換します。 このワークフローを使用すると、さまざまなWebサイトを再設計し、無料のレイアウトパックの一部を変更するときに、時間を大幅に節約できます。
楽しみ！
ART.ICON / shutterstock.comによる記事特集画像