Diviを使用してページのさまざまな配色モックアップを作成する方法

クライアント用の配色モックアップを作成することは、Webデザインプロセスの重要なステップです。 場合によっては、クライアントは、サイトで使用できる会社のブランドのカラーパレットをすでに配置していることがあります。 しかし、多くの場合、会社のブランドに適合し、Webサイトで見栄えがよいと思われるいくつかの提案された配色を提供する必要があります。

Diviを使用すると、ビジュアルビルダー内の検索と置換や色の提案などのデザイン機能を使用して、特定のページレイアウトの配色を簡単に変更できます。 また、クライアント用に複数のバージョンのページ（異なる配色）を作成することもできます。

このチュートリアルでは、Diviを使用してホームページの新しい配色モックアップを作成するプロセスについて説明します。 うまくいけば、あなたは途中でいくつかのトリックを学ぶでしょう。

始めましょう！

新しいページを設定する

このチュートリアルでは、ビジネスコーチのホームページレイアウトを使用します。 したがって、まだ作成していない場合は、新しいページを作成し、ビジュアルビルダーを展開します。 次に、「既成のレイアウトを選択」を選択します。 [ライブラリから追加]ポップアップから、BusinessCoachホームページのレイアウトを選択します。

レイアウトがページにロードされたら、それを公開することを忘れないでください。

このホームページレイアウトを使用して、さまざまな配色のモックアップを作成します。 しかし今のところ、新しい配色を選択する必要があります。

あなたの配色を選ぶ

すでに配色を考えているかもしれませんが、そうでない場合は、Diviの配色提案またはサードパーティの配色ジェネレーターを使用できます。 より多くのインスピレーションを得るために、あなたはあなたの業界にうまく機能する配色をウェブで閲覧することができます。

サードパーティの配色ジェネレータを使用して配色を作成する

Webには、サイトに最適な配色を選択するのに役立つ、すばらしいサードパーティの（無料の）配色ジェネレーターがいくつかあります。 私のお気に入りのカラーパレットジェネレーターのいくつかは、Coolers.co、Canva、およびAdobeからのものです。

これらの配色ジェネレーターのほとんどは、少なくとも5つの色を生成します。 新しい配色を構成するために必要なすべての色を必ず保存してください。

Diviの組み込みの色の提案を使用して配色を作成する

Diviの新しいカラーマネージャーと魔法の色の提案の発売以来、Diviは、Divi Builderで色オプションを変更するときにアクセスできる、保存された最近使用された色を自動的に追跡します。 「保存済み」または「最近」タブをクリックすると、各パレットを表示できます。

Diviには、ビジュアルビルダーに組み込まれたシンプルでスマートな色提案ツールもあります。 使用されているアルゴリズムのすべての詳細に立ち入るつもりはありませんが（とにかくできるかどうかはわかりません）、一般的に、Diviは現在の基本色（色）に基づいて補完的な（および類似の）色のパレットを生成しますオプションで選択）。 これは、デザインに調和のとれた色の組み合わせを選ぶのに役立ちます。

色の提案（またはカラースケープ）を表示するには、選択したカラーオプションのすぐ下にあるカラースケープアイコン（3つのドットがあるアイコン）をクリックするだけです。 保存した色と最近使用した色の補完的で類似した色から生成されたパレットがあります。各行には、最近または保存したカラーパレットの各色の新しい拡張配色があります。

この色提案ツールは、セクション、行、およびモジュールレベルでの色の選択に役立つように設計されていますが、提案されたカラーパレットを各ページの新しい配色として簡単に使用できます。

ビジネスコーチのホームページレイアウトの配色を作成する

それでは、前に新しいページに追加したBusinessCoachホームページレイアウトの新しい配色モックアップの作成を始めましょう。 この既成のレイアウトには現在、基本的な配色があります。 メインカラーは明らかに全体に使用されているダークブルーです。 また、アクセントカラーとしていくつかの異なるグレーの色合いがあります。 また、コンテンツの背景には標準の白色で、テキストには黒色が使用されています。 したがって、その1つのプライマリダークブルーカラーのすべてのインスタンスを別のカラーに置き換えると、まったく新しい配色になることが想像できます。

ビジュアルビルダーから、レイアウトの上部にある全幅ヘッダー設定を開き、Button One TextColorを見つけます。 これは、このレイアウトが使用している主要な青色です。 次に、カラースケープアイコンをクリックして、現在の青色の色の提案を表示します。 それらは一番上の行のカラーパレットにあります。

この時点で、パレットから任意の色を選択して新しい配色を表示できますが、この例では、最初に生成された配色を使用します。

配色をデフォルトのカラーパレットに保存する

今後、物事をより便利にするために、新しいカラーパレットの色を更新して、テーマオプションのカラーピッカーのデフォルトパレットを置き換えることをお勧めします。 そうすれば、残りの色の変更の間、VisualBuilder内の保存されたカラーパレットの下で色を使用できるようになります。

新しいタブで、[Divi]> [テーマオプション]に移動します。 [全般]タブの下にデフォルトのカラーパレットオプションが表示されます。 青い色の提案から生成されたカラーパレットをコピーする簡単な方法はありません。 あるウィンドウでビジュアルビルダーをアクティブにし、別のウィンドウでDiviテーマオプションを使用してページを開くことをお勧めします。 次に、各カラーコードをデフォルトのカラーパレットにコピーします。

設定を保存する。

ヒント：後でテキストと背景を編集するために、最初の2つのデフォルトの色（黒と白）を置き換えたくない場合がありますが、すべてのカラースロットが必要な場合は、それらを自由に使用してください。

デフォルトのカラーパレットは、以前のデフォルトのカラーパレットをすでに継承しているため、現在のページでは更新されません。 設定で新しく保存されたカラーパレットを表示するには、レイアウトを使用して新しいページを再度作成する必要があります。

これがあまりにも不便な場合は、現在のページのみのデフォルトのカラーパレットを更新することを選択できます。 これを行うには、設定メニューを開き、[ページ設定]アイコンをクリックします。 次に、[デザイン]タブの下のパレットを更新します。

これにより、別のページを作成しなくても、ページ全体のカラーパレットが更新されます。

（ページだけでなく）テーマのデフォルトのカラーパレットを更新することを選択した理由は、作成する新しいページのモックアップごとに新しいカラーパレットを追加する必要がないようにするためです。

検索と置換を使用してページの色を更新する

次に、ビジュアルビルダーをアクティブにしてホームページのレイアウトに戻り、全幅ヘッダー設定（以前と同じ場所）の下にある[ボタン1テキストの色]オプションに移動します。 保存したレイアウトはまだ表示されていませんが、問題ありません。 元の濃い青色が選択されていることを確認してから、カラースケープアイコンをクリックして色の提案をファンアウトします。 これにより、一番上の行に同じ配色が表示されます。

ダークブラウン色（＃54381c）を選択します。

次に、カラーピッカーを開いてカラーコードを表示し、クリップボードを強調表示してctrl + C（またはCmd + C）を押して、クリップボードにカラーコードをコピーします。

実際にはまだ変更を加えたくないので、設定モーダルの下部にある紫色の元に戻すボタンをクリックして、置き換える必要のある元の青色に戻します。

次に、元の青色を右クリックして、[検索と置換]オプションをクリックします。

[検索と置換]ポップアップで、[置換]の下に茶色で貼り付けます。 ページ全体の色を置き換えたいので、「Within」オプションは「ThisPage」のままにしておくことができます。 色の変更の範囲がボタン1のテキストの色だけに限定されないように、必ず[すべて置換]オプションを選択してください。 次に、[置換]をクリックします。

設定を保存することを忘れないでください。

次に、新しい配色を確認してください。

次に、設定メニューを開き、[ライブラリに保存]アイコンをクリックして、レイアウトをDiviライブラリに保存します。 レイアウトに「ブラウン」のような名前を付けて、[ライブラリに保存]をクリックします。

これにより、そのバージョンのレイアウトを新しいページに展開できます。

新しい配色レイアウトを新しいページに追加する

保存したレイアウトを新しい茶色の配色で新しいページに追加するには、最初に新しいページを作成する必要があります。 次に、ページにタイトル（「ブラウン」など）を付けて、ビジュアルビルダーを展開します。 次に、[既成のレイアウトを選択]を選択します。 [ライブラリからロード]ポップアップで、[保存したレイアウト]タブをクリックし、ライブラリに保存したばかりの新しいレイアウトを選択します。

あなたのページを公開することを忘れないでください。

ここで、新しいページを作成し、保存したレイアウトをページに追加する同じプロセスを繰り返します。 今回はページに「紫」という名前を付けます。

レイアウトがページに追加されたら、必ず公開してください。 次に、ビジュアルビルダーを開き、[全幅ヘッダー]設定を開いて、[ボタン1のテキストの色]を見つけます（前と同じように）。 これで、保存したテーマのカラーパレットが新しい色で更新されたことがわかります。 これは重宝します。 カラーオプション（現在はダークブラウン）を右クリックし、[検索して置換]をクリックします。 「置換」の下のカラーピッカーを開き、保存されたカラーパレットから新しい色を選択します。 今回は紫色（＃5a5ae2）を選択します。 次に、[すべて置換]オプションを選択します。 そして、設定を保存することを忘れないでください。

そして魔法のように、あなたはあなたのページのために紫色の配色を持っています！

高度な配色ページのモックアップの作成

新しい配色が利用できるようになったら、ページで複数の色を試してみることをお勧めします。 たとえば、ページのセクションごとに異なる色を選択できます。 これは、「検索と置換」機能でも簡単に実行できます。

この次のモックアップでは、新しいページを作成し、ページに「マルチカラー」のような名前を付けます。 次に、ビジュアルビルダーを展開し、[事前に作成されたレイアウトを選択]を選択して、同じ（茶色の）保存されたレイアウトをページにインポートします（以前と同じように）。 ビジュアルビルダーで、[全幅ヘッダー]設定を開き、[ボタン1のテキストの色]を見つけます（以前と同じように）。 Button One Text Colorを右クリックし、「検索と置換」を選択します。 次に、以下を更新します。

内：このセクション
置換：＃0f1f2e
[すべて置換]を選択します

次に、[置換]ボタンをクリックします。

設定を保存することを忘れないでください。

これは、上部のヘッダーセクションでダークブルーの配色で更新されます。

次に、2番目のセクションをスキップして（茶色の配色を維持できます）、3番目のセクションに進みます。 セクションの下部にある「まだわからない？」というタイトルのボタンを見つけます。 連絡する"。 ボタンの設定を開き、ボタンの背景色を右クリックして、[検索と置換]を選択します。

次に、検索と置換を次のように更新します。

内：このセクション
置換：＃366ba2
[すべて置換]を選択します

次に、置換ボタンをクリックします。 そして、設定を保存することを忘れないでください。

5番目のセクションをスキップします。 次に、同じプロセスを繰り返して、6つのセクションの茶色（「一緒に仕事をした会社と人」の色）を最初のセクションの同じ濃い青色に置き換えます。 これを行うには、[テキストテキストの色]オプションの下にある大きな引用テキストでテキストモジュールを開きます。

最後のセクションで、右側の列にあるテキストモジュールを見つけて、テキストモジュールの設定を開きます。 背景色を右クリックして、[検索と置換]オプションを選択します。 以下を更新します。

内：このセクション
置換：＃5a5ae2（紫色）
[すべて置換]を選択します

次に、[置換]ボタンをクリックして、設定を保存します。

これで、各セクション全体に複数の色が付いたホームページのモックアップができました。

各配色モックアップをプレビューするためのメニューの作成

最後のステップは、クライアントが各配色のモックアップを簡単にプレビューできるように、新しいプライマリメニューを作成することです。 WordPressダッシュボードから、[外観]> [メニュー]に移動します。 次に、メニューにタイトルを付け、[メニューの作成]をクリックして、作成したページを新しいメニューに追加します。 次に、表示場所として[プライマリメニュー]を選択していることを確認してください。 そして、[メニューの保存]をクリックします。

これで、配色のモックアップを紹介する準備ができたサイトができました。

最終的な考え

Diviのデザインオプションを使用すると、組み込みの色の提案とVisual Builderの「検索と置換」オプションを使用して、ページレイアウトにまったく新しい配色を簡単に展開できます。 これにより、クライアントにさまざまな配色のモックアップを紹介するのに便利になります。 このチュートリアルが、次のプロジェクトに最適な配色を見つけるのに役立つことを願っています。 コメントでお返事をお待ちしております。

乾杯！