如何將 Divi Gallery 嵌入 Toggles 以創建自定義餐廳菜單

在網頁上使用切換是一種以簡潔明了的方式組織內容的好方法。 這可以通過減少滾動並讓用戶更好地控制他們想要在您的頁面上看到的內容來幫助提升用戶體驗。 在線餐廳菜單是一個很好的例子，其中切換可以很好地工作。 用戶可以輕鬆找到他們喜歡的菜單項，然後單擊該項目以獲取更多信息。

在本教程中，我將向您展示如何使用 Divi 切換為您的餐廳菜單創建一些直觀且適合移動設備的切換。 我什至會向您展示如何優化您的移動切換，並將 Divi 圖像庫嵌入您的切換內容中，以展示特定菜餚的精美照片。

讓我們開始吧。

之前和之後

這是我們將要構建的餐廳菜單設計前後的先睹為快。

前

後

入門

用 Divi Gallery Display 替換 WordPress Gallery Display

Divi 允許您用 Divi Gallery 顯示替換默認的 WordPress Gallery 顯示。 因此，每當您創建一個 WordPress 畫廊並將其嵌入到您的頁面時，該畫廊就會像使用 Divi Gallery Module 的畫廊一樣顯示。 這允許您將 Divi 圖像庫添加到 Divi Builder 中的任何模塊（稍後會詳細介紹）。 要實現此更改，請導航到 Divi > 主題選項。 在“常規”選項卡下，單擊以啟用“Divi Gallery”選項。

設置您的主題強調色（可選）

由於我們將在切換模塊中插入一個 Divi 畫廊，當您將鼠標懸停在畫廊中的圖像上時顯示的圖標顏色將自動繼承您為 Divi 主題設置的強調色。 您可以通過導航到 Divi > Theme Customizer > General Settings > Layout Settings 從 WordPress 儀表板設置主題強調色。 在佈局設置下，將主題訪問顏色更新為以下內容：

主題強調色：#a06d51

這是與我們將在本教程中使用的麵包店菜單佈局相匹配的顏色。

更新模塊定制器中的默認切換圖標大小（可選）

對於這個設計，我認為在使用 Divi Toggle 模塊時顯示一個更大的切換圖標會很有幫助。 您可以通過導航到 Divi > Module Customizer 來更改切換模塊的默認大小。 然後從列表中選擇 Toggle Module 並更新圖標大小，如下所示：

切換圖標大小：32

使用麵包店菜單頁面佈局設置新頁面

首先，您需要創建一個新頁面，為頁面指定標題，然後部署 Divi Builder。 選擇“選擇預製佈局”選項。

從庫加載彈出窗口中，選擇 Bakery Layout Pack，然後單擊以使用 Bakery Menu Page Layout。

將佈局加載到頁面後，發布您的頁面。 然後單擊“在前端構建”按鈕。 然後發布您的頁面。 然後在前端點擊構建。

完成後，您就可以開始設計菜單了！

使用 Divi Toggles 和 Image Gallery 實現自定義餐廳菜單設計

設計菜單項切換

在前端激活 Divi Builder 的情況下，在文本模塊下添加一個 Toggle 模塊，其副標題為“Sweet Tooth”。

現在，您可以保留用於標題和正文內容的默認模擬內容。 但是，您需要在選項卡的正文內容中為菜單項添加價格。 單擊 Text 選項卡（而不是 Visual）並在當前默認文本下添加以下 html。

<h5>$8.00</h5>

然後開始更新切換設置，如下所示：

• 圖標顏色：#a06d51
• 打開切換文本顏色：#333333
• 關閉切換文本顏色：#333333
• 關閉切換背景顏色：#ffffff

• 標題字體：Patua One
• 標題字體粗細：粗體
• 標題字體樣式：TT
• 標題字母間距：1px
• 標題行高度：4em
• 自定義填充：0px 頂部，0px 底部

為了增加切換標題的可點擊區域，增加了標題行高度並去掉了上下內邊距。

現在讓我們為我們的切換添加一個左邊框。

• 左邊框寬度：5px
• 左邊框顏色：#a06d51

將圖片庫添加到切換模塊

如前所述，當您在 Divi 主題選項中啟用 Divi Gallery 選項時，嵌入的 WordPress Gallery 將採用 Divi Gallery 的風格。 這允許您將 Divi 風格的圖片庫嵌入到任何模塊中。 對於此示例，我們希望在切換模塊內添加一些圖像以顯示特定餐廳菜單項的一些圖像。 為此，請打開切換設置並單擊內容框上方的添加媒體按鈕。

在 Media Library 彈出窗口中，選擇左側的 Create Gallery 選項卡。 然後選擇要用於圖庫的圖像，然後單擊“創建新圖庫”。

在彈出窗口的 Edit Gallery 部分，忽略畫廊設置，因為 Divi Gallery 樣式將覆蓋這些 WordPress Gallery 設置。 然後單擊插入圖庫按鈕。

這會在切換模塊內容中放置一個圖庫短代碼。 如果您希望圖庫顯示在當前正文之後，請確保將短代碼放在內容之後。

調整智能手機的行填充

內容會隨著預製佈局的當前間距變得非常緊湊。 我們需要更新行設置以在智能手機上創建更多空間。 為此，請打開包含餐廳菜單開關的行的設置並更新以下內容：

• 自定義填充（電話）：左 0px，右 0px

根據需要復制切換

要添加更多菜單項，只需複制 Toggle 模塊並根據需要使用新的文本和圖像庫更新內容。 之後，您可以刪除預製佈局附帶的原始菜單項。

最後結果

現在讓我們看看設計的最終結果。

更改圖庫中的列數

默認情況下，圖庫的佈局在所有瀏覽器寬度和設備上保持三列。 但是，借助燈箱效果，用戶在單擊圖庫項目時將能夠看到更大的版本。 因此，較小的圖像仍然可以工作。 但是，如果您想更改列數，您始終可以添加一小段 CSS。 對於此示例，我將更改圖庫以將圖像顯示為兩列。 為此，首先打開切換設置並添加一個自定義 CSS 類，如下所示：

CSS 類：兩col-gal

然後打開頁面設置並添加以下自定義 CSS：

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

在模塊定制器中更改圖庫覆蓋顏色

如果您想在不使用自定義 CSS 的情況下更改圖庫項目懸停覆蓋的顏色，您可以在模塊定制器中更改圖庫模塊的默認設置。 為此，請導航到 Divi > Module Customizer。 然後單擊圖庫模塊並將懸停覆蓋顏色更改為您想要的任何顏色。

最後的想法

希望本教程能為如何使用 Divi Toggle Module 創建一些很棒的餐廳菜單提供一些靈感。 作為獎勵，您可能已經學會了將一些 Divi 畫廊嵌入到您想要的任何模塊中的新技巧（不僅僅是切換）。 唯一的限制是自定義您想要在畫廊嵌入中顯示的列數。 但是，您可以添加一小段自定義 CSS，讓您走上正軌。

我期待在評論中收到您的來信。

乾杯!