次のプロジェクトに新しいDiviレイアウトパックを使用するための10のステップ

エレガントテーマのDiviデザインイニシアチブの一環として、Kennyとデザインチームは毎週新しい無料のDiviレイアウトパックで私たちを甘やかしてきました。 レイアウトパックは、毎週月曜日にレイアウトパックを特集したブログ投稿からダウンロードできます。 あなたの多くは、レイアウトパックを使用して、通常かかる時間のごくわずかな時間で新しいWebサイトを構築しました。

今日の投稿では、次のプロジェクトで新しいDivi Layout Packを使用する際に従うべき10の重要な手順を提供することにより、これらのレイアウトを最大限に活用する方法を紹介します。 また、プロのようにこれらのレイアウトを処理するためのあまり知られていないヒントもいくつか含めました。

楽しみ！

注：すべての手順と同様に、これらはリストされている順序で実行することを目的としています。 たとえば、最初にデフォルトのカラーパレットを設定しないと、デフォルトのアクセントカラーを変更するときに使用できなくなります。

次のプロジェクトに新しいDiviレイアウトパックを使用するための10のステップ

私たちのYoutubeチャンネルを購読する

＃1最初にレイアウトをDiviライブラリにインポートします

Diviテーマに新しいレイアウトを追加する最良の方法は、最初にそれらをDiviライブラリにインポートすることです。 次に、新しいページを作成するときに、ライブラリから新しいレイアウトを追加できます。

Webサイトにレイアウトを追加する前に、ブログ投稿からレイアウトパックを確認してダウンロードし、ファイルを解凍する必要があります。

WordPressダッシュボードから、Divi> Divi Libraryに移動し、ページの左上にある[インポートとエクスポート]ボタンをクリックします。 ポップアップ表示される移植性モーダルで、[インポート]タブを選択し、[ファイルの選択]をクリックします。 解凍したレイアウトパックフォルダーを見つけて、ファイル名に「All」が含まれるjsonファイルを選択します。 これにより、各レイアウトを個別に実行するのではなく、すべてのレイアウトを一度にライブラリにアップロードします。 たとえば、ファッションレイアウトパックをアップロードする場合は、レイアウトフォルダーからFashion_All.jsonという名前のファイルを選択します。 次に、[DiviBuilderレイアウトのインポート]をクリックします。

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

このプロセスは非常に簡単です。 WordPressダッシュボードから、[ページ]> [新規追加]に移動します。 作成する必要のあるページのタイトルを入力します。 クリックしてDiviBuilderを使用し、VisualBuilderを展開します。 ページ下部の設定メニューを開き、左側の「ライブラリからロード」プラスアイコンをクリックします。 ポップアップ表示される[ライブラリからロード]モーダルで、[ライブラリから追加]タブをクリックし、リストから新しいレイアウトを選択して、新しいレイアウトをロードします。

新しいページごとにこのプロセスを繰り返し、各ページに新しいレイアウトを追加します。

＃3プライマリメニューを作成する

これが新規インストールの場合、上部ヘッダーのプライマリメニューバーにこれらの新しいページが表示されるようになります。 これは、プライマリメニューがまだ作成されていないため、デフォルトでは、サイトに追加したすべてのページと投稿がメニューに入力されるためです。

プライマリメニューを作成するには、WordPressダッシュボードに移動して次の手順を実行します。

1. [外観]> [メニュー]に移動します。
2.ページ上部の[新しいメニューの作成]リンクを選択します。
3.メニュー名を入力します。
4. [ページ]の下の左側のトグルでメニュー項目を選択します。
5. [メニューに追加]をクリックします
6.メニュー項目を所定の位置にドラッグして整理します。
7.ページ下部のメニュー設定で、表示場所として「プライマリメニュー」を選択します。
8.メニューを保存します

＃4デフォルトのカラーパレットを設定する

私はしばしばこのステップをするのを忘れて、毎回それを後悔します。 デフォルトのカラーパレットを設定すると、Diviビルダーを使用して色を編集するのが非常に便利になります。 カラーコードを見つけるために別のモジュールに戻ったり、開発者ツールを使用してアイテムを検査したり、スポイトブラウザ拡張機能を使用して、以前使用していたのと同じ色を見つけたりする必要がある回数がわかりません。もう一度。 自分でこれをしないでください！

WordPressダッシュボードに移動し、[Divi]> [テーマオプション]に移動すると、デフォルトのカラーパレットを設定できます。 そして、[一般]タブのすぐそこに、リストされているオプションがあります。 そこに必要な色を追加します。 背景やテキストのスタイリングに簡単に使用できるように、白（#ffffff）といくつかの暗い色（＃333333などの暗いフォントの色に設定したもの）を維持することをお勧めします。

＃5グローバルアクセントカラーを設定する

新しいサイトをカスタマイズするプロセスのかなり早い段階で、テーマカスタマイザーへの道を見つけるでしょう。 その場合、最初にグローバルアクセントカラーを変更する必要があります。

グローバルアクセントカラーを変更するには、テーマカスタマイザーに移動し、[一般設定]> [レイアウト設定]に移動して、下部にある[テーマアクセントカラー]オプションを見つけます。

テーマオプションでデフォルトのカラーパレットを更新したため、カラーパレットで使用できる新しい色に注目してください。

次に、変更したら、設定を保存して公開し、ページを更新します。

更新されたテーマアクセントカラーは、他の約20の要素に自動的に適用されるため、最初にこれを更新することが重要です。

自動的に更新される要素には、次のものがあります。

ボディリンクカラー
ウィジェットのヘッダーの色
ウィジェットの箇条書きの色
フッターソーシャルアイコンホバーカラー
アイコンのデフォルトの色
フッターメニューアクティブリンクカラー
二次メニューの背景色
スライドインとフルスクリーンヘッダースタイルの背景色
モバイルメニューの色のハンバーガーメニューアイコン
プライマリメニューアクティブリンクの色
ドロップダウンメニューの線の色
二次メニューの背景色
二次ドロップダウンメニューの背景色
二次メニューの背景色
アクティブなプライマリメニューのリンクの色
フッターメニューアクティブリンクカラー

変更がこれらの要素にすぐに反映されない場合は、カスタマイザーを保存して終了し、ページを更新してから、カスタマイザーに戻る必要があります。

＃6ヘッダーのスタイルを設定する

テーマカスタマイザーからヘッダーのスタイルを設定できます。 WordPressダッシュボードに移動し、[Divi]> [Theme Customizer]> [Header＆Navigation]に移動するだけです。

新しいレイアウトに一致するようにヘッダーのスタイルを設定する必要があります。 最初に、最初に必要なヘッダースタイル（デフォルト、全幅、中央揃えなど）を決定しますが、選択するものは何でも、ヘッダーのスタイルを新しいレイアウトと一致させるようにしてください。 また、メニューの項目が読みやすく、ナビゲートしやすいことを確認してください。

プライマリ、セカンダリ、および固定ナビゲーションメニューのオプションがあります。 時間をかけて、サイトに当てはまるすべてのスタイルを設定してください。

グローバルアクセントカラーを設定すると、ヘッダーカラー設定の一部が自動的に変更されます。 そのため、最初にその色を設定することが重要です。

＃7ボトムバーのスタイルを設定する

テーマカスタマイザーからもボトムバーのスタイルを設定できます。 WordPressダッシュボードに移動し、Divi>テーマカスタマイザー>フッター>ボトムバーに移動します。

一番下のバーは無視してはいけません。 ページ上部のナビゲーションバーと組み合わせると、ページ全体を構成する必要なブックエンドになります。 確かに、デフォルトの黒い背景はどのサイトでもほとんど「機能」しますが、もう少し実験します。 時々、下のバーに背景色を付けたいことがあります。これは、フッターセクションの背景色の少し暗い色合いで、その上に直接配置されています。

＃8ショートカットを使用してページレイアウトのデザインを変更する

レイアウトにはモジュールに組み込まれたデザイン設定が付属しているため、グローバルスケール（サイト全体）でデザイン設定を変更するのは少し面倒です。 しかし、プロセスをスピードアップするためのいくつかのトリックがあります。 手始めに、最初に1つのページレイアウトに変更を加えます。 そうすれば、編集したページの要素を保存して、デザインの変更が必要な他のページに追加できます。 特定のレイアウトにデザイン変更を加えるプロセスをスピードアップするためのいくつかの秘訣は次のとおりです。

右クリックオプションの使用

同じモジュールタイプである限り、右クリックオプションを使用して、モジュールスタイルをあるモジュールから次のモジュールにコピーして貼り付けることができることを忘れないでください。

テーマカスタマイザを使用して制御できるように、デフォルトに戻します

現在、テーマカスタマイザーでカスタマイズできないモジュールで使用できる特定の設定があります（たとえば、ボックスシャドウなど）。 原則として、テーマカスタマイザーは、その設定がカスタマイザーで使用可能な場合、モジュール内のデフォルト設定に残されているものをすべて変更します。 ただし、一部のモジュールでは、テーマカスタマイザーからスタイルを制御できるように、特定のデザイン設定をデフォルトに復元することが理にかなっている場合があります。

これの良い使用例は、本文テキストとヘッダーテキストの設定です。 したがって、たとえば、カスタムフォント、テキストの色、およびテキストサイズを持つテキストモジュールがレイアウトにある場合、それらの要素をデフォルトのステータスに復元するまで、テーマカスタマイザからそれらの要素を変更することはできません。

検索ボックスを使用して、変更する設定を見つけます

デフォルトに設定されているものを簡単に識別

変更するオプションを検索すると、一部のオプションの横に「デフォルトに戻す」アイコンが表示されます。 これは、デフォルトから変更されたことを意味します。

ワンクリックですべてのデザイン設定をデフォルトに戻す

私と同じくらいビジュアルビルダーを愛している人にとっては、おそらくこの役立つトリックをまだ発見していないでしょう。 バックエンドビルダーを使用している場合は、クリックしてモジュールの設定を編集し、[デザイン]タブを選択します。 何か気づきましたか？ これは、タブ内にある小さな「デフォルトに戻す」アイコン/ボタンです。

それをクリックすると、それらの設定を失うことを確認するように求められます。 [はい]を選択すると、すべてのデザインタブ設定がデフォルトの状態に戻ります。 もちろん、これは将来的にビジュアルビルダーに追加される予定です。

＃9新しいページや投稿を作成するための重要な要素を保存する

別のレイアウトを必要とする追加のページまたは投稿を作成する必要がある場合があります。 ヘッダー、コンテンツセクション、フッターセクションを含むより一般的なページレイアウトが必要な場合があります。 または、より手の込んだランディングページを作成したい場合もあります。 ブログ投稿のカスタム投稿レイアウトを作成することもできます。 これを実現する最も簡単な方法は、新しいレイアウトを作成するためにすでに必要なレイアウトの要素を使用することです。 また、サイト全体でデザインの一貫性を保つための最も効率的な方法です。 追加のページレイアウトを構築するために使用することを検討する必要があるいくつかの基本的な要素を見ていきましょう。

ページヘッダー

これは簡単です。 すべてのページにヘッダーが必要です。 私は間違いなくあなたのライブラリのヘッダーセクションを保存します。 どのページタイプにも合うように、ヘッダーのより一般的なバージョンを見つけることをお勧めします。 通常、連絡先ページのレイアウトは、基本的な中央揃えのタイトル、サブタイトル、および背景色を持っているため、これに適しています。

セクションヘッダー

セクションヘッダーのバージョンを保存することもお勧めします。 そうすれば、新しいページにコンテンツを追加するときに、新しいヘッダーのスタイルが設定され、すぐに使用できるようになります。

コンテンツセクション

多くの場合、これに必要なのは背景が白のシンプルなテキストモジュールだけですが、新しいレイアウトに固有のコンテンツセクションがある場合もあります。 これは、ボックスシャドウを備えたテキストモジュール、または独自の方法でスタイル設定された複数の宣伝文モジュールの場合があります。 一貫性を保つために、将来の使用のために必要なものをライブラリに保存してください。

ボタン（明るい色と暗い色の両方）

新しいページを作成するときに、おそらくボタンを追加する必要があります。 暗いバージョンと明るいバージョンのボタンをライブラリで利用できるようにしておくと、非常に便利です。 ダークバージョンとライトバージョンの両方のボタンモジュールを保存することをお勧めします。

フッターセクション

各レイアウトには通常、ページの下部バーの真上にある素敵なフッターセクションが付属しています。 一部のレイアウトには、このフッターセクションの異なるバージョンがあります。 これらのセクションには通常、連絡先情報、電子メールオプトイン、およびその他の重要な情報が含まれます。 使用したいものを見つけて、将来使用するためにライブラリに保存します。

これで、新しいページを作成するときはいつでも、これらのセクション、行、およびモジュールから選択できます。

＃10グローバルアイテムの設定

グローバルは、サイトを将来編集するときに時間を大幅に節約できますが、少し先見の明があります。 レイアウトのどの要素がサイト全体で頻繁に使用され、より均一な更新が必要になるかを特定する必要があります。 グローバルアイテムの適切な候補は、フッターセクション、アクションコールモジュール、ボタンモジュール、および電子メールオプチンです。これらはサイト全体に分散させる必要がありますが、同じ統一されたスタイルとコンテンツが必要です。 このように1つを更新すると、すべてが更新されます。

最終的な考え

これらの手順がお役に立てば幸いです。 この投稿の私の目標は、新しいWebサイトを作成する目的で、新しいインストールでこれらのレイアウトをインポートするときに、いくつかの一般的なガイドラインまたはベストプラクティスを提供することでした。 これらの手順を順番に実行することで、時間を無駄にすることを防ぎ、基盤を構築するための優れた基盤を構築できます。