如何使用動態內容在 Divi 中創建 WooCommerce 產品信息手風琴

已發表: 2019-10-11

在 Divi 中構建產品頁面時，我們可以利用手風琴模塊使用動態內容顯示產品信息。這將為您的產品頁面提供獨特的設計，並在頁面上保留寶貴的空間。

在本教程中，我們將向您展示如何使用 Divi 的動態內容功能來創建產品信息手風琴，以及如何使用 Divi Visual Builder 設計手風琴（及其內容）。

讓我們開始吧。

搶先看

這是我們將在本教程中構建的設計的快速瀏覽。

免費下載產品信息手風琴佈局

要了解本教程中的佈局設計，您首先需要使用下面的按鈕下載它。要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

您已成功訂閱。請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

訂閱我們的 YouTube 頻道

要將佈局導入您的頁面，只需提取 zip 文件並將 json 文件拖到 Divi Builder 中。

請記住，您必須具有本教程中所述的產品設置才能看到相同的結果。

讓我們進入教程好嗎？

入門

首先，您需要執行以下操作：

如果您還沒有，請安裝並激活已安裝的 Divi 主題（如果不使用 Divi 主題，請安裝並激活 Divi Builder 插件）。

安裝並激活 WooCommerce 插件。如果這是第一次設置 WooCommerce，您將需要運行基本設置嚮導以準備好您的商店。完成後，您就可以添加新產品了。

按照以下指示創建新產品。有關如何添加新產品的更多信息，請查看本教程。

設置示例產品

要為本教程設置示例產品，請導航至 Products > Add New。為產品命名為“按摩（單次）”，然後單擊以使用 Divi Builder。

divi 產品信息手風琴

接下來，更新以下產品頁面設置和產品信息：

1.在 Divi 頁面設置下，選擇無側邊欄頁面佈局。

2.添加/選擇產品類別

3.添加產品圖片

4.增加以下產品長描述內容：

<h3>Quality Massage</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis orci ac odio dictum tincidunt. Donec ut metus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

<ul>
 	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 	<li>Vestibulum sagittis orci ac odio dictum tincidunt.</li>
 	<li>Donec ut metus leo.</li>
</ul>

<h3>Our Gaurantee</h3>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis orci ac odio dictum tincidunt. Donec ut metus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

5.在產品數據下，將產品類型更改為可變產品。

6.使用以下值添加名為“Type”的屬性：Swedish | 熱石 | 香薰 | 深層組織。確保選擇“用於變體”。

divi 產品信息手風琴