Diviの効率機能を使用して5つのステップで暗いレイアウトに切り替える方法

ウェブサイトをデザインするとき、あなたが意識的または無意識に行う最初の決定の1つは、あなたがあなたのウェブサイトに与えるつもりの色のスタイルです。 私たちの中で勇敢な人たちは、完全に鮮やかなカラーパレットをあえて探しますが、正直に言うと、それを実現するのは非常に困難です。 そのため、通常、明るいレイアウトまたは暗いレイアウトのどちらを使用する方が安全です。 Divi LibraryのPremadeLayoutsセクションには、あらゆるタイプのWebサイトを構築するときに自由に使用できる明るいレイアウトと暗いレイアウトがたくさんあります。 しかし、レイアウトが好きで、カラーパレットを暗くしたい場合、またはその逆の場合はどうでしょうか。

Diviの効率機能により、明るいレイアウトパックから暗いレイアウトパックへの移行、およびその逆の移行がこれまでになく簡単になります。 この投稿では、わずか5ステップで明るいレイアウトを暗いレイアウトに変える方法を紹介します。 適切な手法を使用している場合、この移行を行うために必要な時間は非常に短くなります。 実行する必要のある手順の数は、作業しているレイアウトによって常に異なりますが、全体的なアプローチを取得すると、処理しているどのレイアウトでも機能するようになります。

それを手に入れよう！

プレビュー

5つのステップだけで、Web Freelancer LayoutPackの明るいランディングページを暗いページに変更します。

Webフリーランサーのランディングページをアップロードする

新しいページを追加してVisualBuilderを有効にする

まず、新しいページを追加し、ページにタイトルを付けて、VisualBuilderに切り替えます。

Webフリーランサーレイアウトパックをアップロードする

画面に表示される3つのオプションから、事前に作成されたレイアウトをアップロードすることを選択します。

無料のレイアウトパックのリストでWebFreelancer Layout Packのランディングページを見つけ、[このレイアウトを使用]という緑色のボタンをクリックしてアップロードします。

ステップ1：全体的な背景色を変更する

最初のセクションのセクションの背景色を変更する

始めましょう！ 実行することをお勧めする最初のステップは、ページのすべてのセクションの背景色を変更することです。 そうすると、暗い背景色に合わせてどのデザイン要素を変更する必要があるかがすぐにわかります。 ページの最初のセクションを開き、セクションの背景色として「＃0c0c0c」を選択します。

スタイルをすべてのセクションに拡張

背景色を追加したらすぐにそれを右クリックし、[背景色の拡張]オプションをクリックします。

完了したら、背景色をページのすべてのセクションに拡張することを選択します。

ステップ2：テキストの色を変更する

全幅ヘッダーモジュールを開き、テキストの色を変更します

次のステップは、使用されているテキストの色を変更することです。 ご存知かもしれませんが、Diviには、ページ上のテキストに明るいまたは暗いカラーパレットを選択できるデフォルトのオプションがあります。 ただし、カスタムカラーを選択すると、このオプションは選択したカスタムカラーに置き換えられます。 要素のそれぞれをチェックしてカスタムカラーがあるかどうかを確認する代わりに、先に進んで、全幅ヘッダーモジュールのテキストカラーとして「ライト」を選択します。

スタイルをすべてのモジュールに拡張

次に、右クリックして[テキストの色を拡張]オプションを選択し、この明るいテキストの色を拡張します。

この新しい色をページ全体のすべてのモジュールに拡張します。

マルチセレクト機能を使用してカスタムカラーを変更する

前述のように、前の手順は、事前に選択された色には適用されません。 たとえば、トグルモジュールには、カスタムのタイトルテキストの色があります。 トグルのそれぞれを個別に変更する代わりに、キーボードのコントロール/コマンドキーを使用して一度にすべてを選択し、モジュールのそれぞれを個別にクリックします。 それらをすべて選択したら、設定アイコンをクリックします。

これで、選択した各モジュールに同時に変更を適用できます。 この場合、タイトルテキストの色を「＃848484」に変更します。

ステップ3：ボタンを変更する

全幅ヘッダーのボタン1の設定を開く

ページ上のアクションの呼び出しがレイアウトのカラーパレットと一致し続けることを確認することが重要です。 この場合、明るいレイアウトと暗いレイアウトの両方で見栄えのするボタンモジュールがあります。 そのため、ページ上の他のボタンにも拡張します。 先に進み、全幅ヘッダーモジュールを開いて、ボタン1の設定に移動します。

ボタンのスタイルをページ上のすべてのボタンに拡張

次に、Button Oneの設定を右クリックし、[ButtonOneスタイルの拡張]オプションを選択します。

ボタンスタイルをページ全体のすべてのボタンに拡張します。

ヒーローセクションのボタン2のテキストの色を変更する

拡張機能はスタンドアロンモジュールではないため、全幅ヘッダーモジュールの2番目のボタンには到達しません。 そのため、ボタン2の設定を開き、テキストの色を「#ffffff」に変更します。

ページ上のすべての全幅ヘッダーにスタイルを拡張する

このテキストの色がページ上のすべての全幅ヘッダーモジュールに確実に適用されるように、これも拡張します。

テキストの色を右クリックして[ボタンの2つのテキストの色を拡張]オプションを選択したら、先に進んで、ページ全体のすべての全幅ヘッダーに適用します。

ステップ4：カスタムマージンを削除してカスタムパディングに置き換える

カスタムマージンを削除する

暗いレイアウトに切り替えるときは、ページに空白をもたらすすべてのカスタムマージン値を削除することも重要です。

代わりにカスタムパディングを使用する

ただし、代わりにカスタムパディングとしてカスタムマージンを追加することで、以前の距離を維持できます。

ステップ5：特別なデザイン設定を検索して変更する

特別な設計設定を決定する

実行する必要のある最後のステップは、各レイアウトに非常に固有です。 レイアウトに固有のデザイン要素も変更する必要があります。 これには、以下の設定の一部が含まれますが、これらに限定されません。

• ボックスシャドウ
• 列の背景
• アイコンの色
• 仕切りの色
• …

行ボックスの影の色で検索と置換を使用する

この特定のレイアウトでは、変更する必要があるものの1つは、使用されている行ボックスの影の色です。 行の設定を開き、ボックスの影を変更せずに右クリックします。 次に、[検索と置換]オプションを選択します。

ページ全体の特定のカラーコードを変更する場合は、検索と置換機能を使用するのが最善の方法です。 別のカラーコード（この場合は「＃33302f」）に簡単に置き換えることができます。 これにより、色が使用されている場所を正確に確認するために、すべてのデザイン要素を調べる必要がなくなります。

1回限りの設定を手動で変更する

ただし、レイアウト内にも1回限りの繰り返しの設計設定があります。 これらを変更するには、手動で行う必要があります。 たとえば、下の印刷画面の行には、ページの他の場所では使用されていないボックスの影の色があります。 そのため、手動で「＃33302f」に変更しています。

プレビュー

5つのステップを経た後、最終結果を最後に見てみましょう。

最終的な考え

この投稿では、明るいレイアウトパックを暗いレイアウトパックに変える手順をわずか5ステップで説明しました。 実行する必要のある手順の数は、作業しているレイアウトによって常に異なりますが、全体として、アプローチは同じです。 ご質問やご提案がございましたら、下のコメントセクションでお知らせください！