在Divi中創建產品頁面時，我們可以使用手風琴模塊通過動態內容顯示產品信息。 這將為您提供產品頁面的獨特設計，同時保留頁面上的寶貴空間。
在本教程中，我們將向您展示如何使用Divi的動態內容功能來創建產品信息手風琴，以及如何使用Divi Visual Builder設計手風琴（及其內容）。
讓我們開始。
調查
這是我們將在本教程中構建的設計的預覽。
請記住，您必須具有本教程中描述的產品配置才能獲得相同的結果。
COMMENCER
首先，您需要執行以下操作：
- 如果您還沒有，請安裝並激活 Divi主題 已安裝（或 Divi Builder 插件，如果您不使用 Divi主題).
- 安裝並激活插件 WooCommerce. 如果你配置 WooCommerce 第一次，您需要運行基本設置嚮導來準備您的商店。 完成後，您就可以添加新產品了。
- 如下所示創建一個新產品。
設置樣品產品
要為本教程配置示例產品，請轉到產品>添加新產品。 為產品命名為“按摩（單個會話）”，然後單擊以使用Divi Builder。
然後更新以下產品頁面設置和產品信息：
1. 在Divi Page Settings下，選擇No Sidebar佈局。
2. 添加/選擇產品類別
3. 添加產品圖片
4. 添加描述內容。
5. 下 數據 產品，將產品類型更改為可變產品。
6. 添加具有以下值的名為“類型”的屬性：瑞典語| 熱石| 香薰| 深層組織。 確保選擇“用於變體”。
7. 然後在 Variations 選項卡下切換 最近搜索 的產品，使用下拉條目創建所有屬性的變體。
8. 從下拉菜單中選擇“設置常規價格”以設置三個變量的常規價格。
9. 在對話框中，輸入值“ 50”，然後選擇“確定”。
10。 一 完成後，保存或發布產品。
現在，您可以開始使用自定義產品手風琴來設計佈局了。
在Divi中創建具有動態內容的Product Info手風琴
默認產品佈局使用各種Woo模塊顯示產品信息。 對於此示例，我們想使用手風琴顯示有關產品的三個主要信息：產品描述，其他產品信息和產品評論。 這三個內容當前顯示在woo選項卡模塊中。 我們要做的就是刪除woo tabs模塊，並用具有通過動態內容引入的相同信息的手風琴模塊代替它。
這是怎麼做的。
首先，單擊以在前端系統上使用Divi部署可視生成器。 然後刪除Woo Tabs模塊。
然後添加一個新的手風琴模塊以替換選項卡。
在“手風琴設置”彈出窗口中，單擊第一個手風琴上的齒輪圖標以打開各個手風琴設置。
輸入標題“關於產品”。
然後將鼠標懸停在正文內容輸入框上，然後單擊動態內容圖標。
從動態內容列表中選擇“產品描述”。
這將顯示我們在後端為產品定義的產品的詳細描述。
一旦第一個手風琴內容就位，打開第二個手風琴設置並更新以下內容：
- 標題：規格
然後，將動態內容“其他產品信息”添加到正文中。
準備好第二個手風琴內容後，添加一個新的手風琴元素並按如下所示更新手風琴設置：
- 標題：其他信息
然後將動態內容“產品評論”添加到正文，以嵌入產品評論的項目/內容。
注意：確保您至少添加了一項產品評論，才能在實時頁面上查看內容。
與Divi設計產品和內容協議
現在我們的產品信息手風琴具有顯示產品信息的動態內容，我們可以使用內置手風琴模塊的設置對其進行自定義。
打開“手風琴”模塊設置並更新以下內容：
- 圖標顏色：＃ff9375
- 使用圖標字體大小：是
- 圖標字體大小：26px
- 切換背景顏色：#ffffff
- 打開文字標題顏色：#ff9375
- 文字標題：#222222
- 標題字體：Lato
- 標題字體：粗體
- 標題字體樣式：TT
- 文字標題大小：20px
- 標題字母的空格：0.2em
- 標題行的高度：2em
- Body字體：Lato
- 正文文本大小：16px
- 身高：1.8em
- 鏈接文字顏色：#ff9375
這將針對每個手風琴在動態內容中具有的所有鏈接，例如星級。
- 無序列表的文本顏色：＃ff9375
- 無序列表樣式類型：圓
- 無序列表縮進：5％
- 邊框的寬度：0px
- 頂部邊框的寬度：1px
- 頂部邊框的顏色：#222222
最後一步，我們添加一個小的css提取以提取手風琴音階之間的默認邊距。
在“高級”選項卡上，將以下CSS添加到Toggle元素：
margin-bottom: 0px;
現在讓我們看一下產品信息手風琴的最終設計。
佈局的最終調整
可以對佈局進行一些調整以匹配手風琴的設計。 例如，我們可以將每個模塊的字體調整為Lato，在變量下拉列表周圍添加自定義邊框和邊框半徑，並使用純背景色更新“添加到購物車”按鈕，適合他。
完成後，這就是最終結果。
我已經將此設計免費包含在上面。 請隨時自行檢查。 請注意，您必須具有本教程中描述的產品配置才能獲得相同的結果。
注意：大多數項目的預設顏色 WooCommerce Divi中產品的顏色繼承自主題自訂設定的輔助顏色值。 一旦 woo 的顏色模組更新了這個輔助顏色可能會更容易。
最後的想法
據了解，Woo Mods不是唯一可用於提取動態產品信息的東西。 產品信息手風琴就是一個很好的例子，說明如何使用任何Divi模塊以獨特而簡潔的方式顯示產品信息。 隨時為您的產品頁面探索令人興奮的新手風琴設計。 而且，當然，您可以使用多個Rocker模塊而不是手風琴來獲得相似的結果。
