Diviギャラリーをトグルに埋め込んでカスタムレストランメニューを作成する方法

公開: 2019-03-06

Webページでトグルを使用することは、コンテンツをクリーンで簡潔な方法で整理するための優れた方法です。これは、スクロールを減らし、ユーザーがページに表示したいものをより細かく制御できるようにすることで、ユーザーエクスペリエンスを向上させるのに役立ちます。オンラインレストランメニューは、トグルがうまく機能する良い例です。ユーザーは好きなメニュー項目を簡単に見つけて、その項目をクリックして詳細を確認できます。

このチュートリアルでは、Diviトグルを使用して、レストランメニューの直感的でモバイルフレンドリーなトグルを作成する方法を紹介します。モバイル向けにトグルを最適化し、トグルコンテンツ内にDiviイメージギャラリーを埋め込んで、特定の料理の見事な写真を紹介する方法も紹介します。

始めましょう。

前後

これは、私たちが構築するレストランのメニューデザインの前後のスニークピークです。

前

diviレストランメニュー

後

diviレストランメニュー

入門

WordPressギャラリーディスプレイをDiviギャラリーディスプレイに置き換える

Diviを使用すると、デフォルトのWordPressギャラリー表示をDiviギャラリー表示に置き換えることができます。そのため、WordPressギャラリーを作成してページに埋め込むと、Divi GalleryModuleを使用してギャラリーがギャラリーのように表示されます。これにより、DiviイメージギャラリーをDivi Builderの任意のモジュールに追加できます（これについては後で詳しく説明します）。この変更を実装するには、[Divi]> [テーマオプション]に移動します。 [全般]タブで、[Diviギャラリー]オプションをクリックして有効にします。

diviレストランメニュー

テーマのアクセントカラーの設定（オプション）

Diviギャラリーをトグルモジュールに挿入するため、ギャラリー内の画像にカーソルを合わせると表示されるアイコンの色は、Diviテーマに設定したアクセントカラーを自動的に継承します。 [Divi]> [テーマカスタマイザー]> [一般設定]> [レイアウト設定]に移動して、WordPressダッシュボードからテーマのアクセントカラーを設定できます。 [レイアウト設定]で、テーマのアクセス色を次のように更新します。

テーマアクセントカラー：＃a06d51

これは、このチュートリアルで使用するベーカリーメニューのレイアウトと一致する色です。

diviレストランメニュー

モジュールカスタマイザでのデフォルトのトグルアイコンサイズの更新（オプション）

このデザインでは、DiviToggleモジュールを使用するときに大きなトグルアイコンを表示すると便利だと思いました。 [Divi]> [Module Customizer]に移動して、ToggleModuleのデフォルトサイズを変更できます。次に、リストからトグルモジュールを選択し、次のようにアイコンサイズを更新します。

トグルアイコンサイズ：32

diviレストランメニュー

ベーカリーメニューのページレイアウトを使用した新しいページの設定

手始めに、新しいページを作成し、ページにタイトルを付けて、DiviBuilderをデプロイする必要があります。「既成のレイアウトを選択」オプションを選択します。

diviレストランメニュー

ライブラリからの読み込みポップアップから、ベーカリーレイアウトパックを選択し、クリックしてベーカリーメニューページレイアウトを使用します。

diviレストランメニュー

レイアウトがページに読み込まれたら、ページを公開します。次に、「フロントエンドでビルド」ボタンをクリックします。次に、ページを公開します。次に、クリックしてフロントエンドでビルドします。

diviレストランメニュー

完了したら、メニューのデザインを開始する準備が整いました。

Diviトグルと画像ギャラリーを使用したカスタムレストランメニューデザインの実装

メニュー項目のトグルの設計

フロントエンドでDiviBuilderをアクティブにして、テキストモジュールの下に「SweetTooth」という小見出しのあるToggleモジュールを追加します。

diviレストランメニュー

今のところ、タイトルと本文のコンテンツに使用されるデフォルトのモックコンテンツをそのままにしておくことができます。ただし、タブの本文コンテンツ内にメニュー項目の価格を追加する必要があります。（ビジュアルではなく）[テキスト]タブをクリックし、現在のデフォルトのテキストの下に次のhtmlを追加します。

<h5>$8.00</h5>

diviレストランメニュー

次に、次のようにトグル設定の更新を開始します。

アイコンの色：＃a06d51
トグルテキストの色を開く：＃333333
閉じたトグルテキストの色：＃333333
閉じたトグルの背景色：#ffffff

diviレストランメニュー

タイトルフォント：Patua One
タイトルフォントの太さ：太字
タイトルフォントスタイル：TT
タイトル文字の間隔：1px
タイトルラインの高さ：4em
カスタムパディング：0px上、0px下

diviレストランメニュー

トグルタイトルのクリック可能領域を増やすために、タイトル行の高さを増やし、上下のパディングを取り除きます。

次に、トグルに左の境界線を追加しましょう。

左ボーダー幅：5px
左ボーダーの色：＃a06d51

diviレストランメニュー

トグルモジュールへの画像ギャラリーの追加

前述のように、DiviテーマオプションでDiviギャラリーオプションを有効にすると、WordPressギャラリーの埋め込みはDiviギャラリーのスタイルになります。これにより、Diviスタイルの画像ギャラリーを任意のモジュールに埋め込むことができます。この例では、トグルモジュール内にいくつかの画像を追加して、特定のレストランのメニュー項目のいくつかの画像を表示します。これを行うには、トグル設定を開き、コンテンツボックスの上にある[メディアの追加]ボタンをクリックします。

diviレストランメニュー

[メディアライブラリ]ポップアップで、左側の[ギャラリーの作成]タブを選択します。次に、ギャラリーに使用する画像を選択し、[新しいギャラリーを作成]をクリックします。

diviレストランメニュー

ポップアップの[ギャラリーの編集]セクションで、ギャラリーの設定を無視します。これは、DiviギャラリーのスタイルがこれらのWordPressギャラリーの設定を上書きするためです。次に、[ギャラリーの挿入]ボタンをクリックします。

diviレストランメニュー

これにより、トグルモジュールのコンテンツ内にギャラリーのショートコードが配置されます。現在の本文の後にギャラリーを表示する場合は、コンテンツの後にショートコードを配置してください。

diviレストランメニュー

スマートフォンの行パディングの調整

コンテンツは、事前に作成されたレイアウトの現在の間隔でかなりタイトになります。スマートフォンのスペースを増やすには、行の設定を更新する必要があります。これを行うには、レストランメニューの切り替えを含む行の設定を開き、以下を更新します。

カスタムパディング（電話）：左0px、右0px

diviレストランメニュー

必要に応じてトグルを複製します

メニュー項目をさらに追加するには、Toggleモジュールを複製し、必要に応じて新しいテキストギャラリーと画像ギャラリーでコンテンツを更新します。その後、既成のレイアウトに付属していた元のメニュー項目を削除できます。

最終結果

それでは、デザインの最終結果を確認しましょう。

diviレストランメニュー

ギャラリーの列数の変更

デフォルトでは、ギャラリーのレイアウトは、すべてのブラウザーの幅とデバイスで3列のままです。ただし、ライトボックス効果を使用すると、ユーザーはギャラリーアイテムをクリックしたときに大きなバージョンを表示できます。したがって、小さい画像でも機能します。ただし、列の数を変更する場合は、いつでもCSSの小さなスニペットを追加できます。この例では、画像を2列に表示するようにギャラリーを変更します。これを行うには、最初にトグル設定を開き、次のようにカスタムCSSクラスを追加します。

CSSクラス：two-col-gal

次に、ページ設定を開き、次のカスタムCSSを追加します。

.two-col-gal .et_gallery_item {
width: 50%;
padding: 2%;
margin: 0;
clear: none !important;
}

モジュールカスタマイザーでの画像ギャラリーオーバーレイの色の変更

カスタムCSSを使用せずにギャラリーアイテムのホバーオーバーレイの色を変更する場合は、モジュールカスタマイザーでギャラリーモジュールのデフォルト設定を変更できます。これを行うには、Divi> ModuleCustomizerに移動します。次に、ギャラリーモジュールをクリックし、ホバーオーバーレイの色を任意の色に変更します。

diviレストランメニュー

最終的な考え

うまくいけば、このチュートリアルは、Divi ToggleModuleを使用して素晴らしいレストランメニューを作成する方法についてのインスピレーションを刺激します。ボーナスとして、いくつかのDiviギャラリーを（トグルだけでなく）必要なモジュールに埋め込むための新しいトリックを学んだかもしれません。唯一の制限は、ギャラリーの埋め込みに表示する列の数をカスタマイズすることです。ただし、カスタムCSSの小さなスニペットを追加して、正しい方向に進むことができます。

コメントでお返事をお待ちしております。

乾杯！