如何使用动态内容在 Divi 中创建 WooCommerce 产品信息手风琴

在 Divi 中构建产品页面时，我们可以利用手风琴模块使用动态内容显示产品信息。 这将为您的产品页面提供独特的设计，并在页面上保留宝贵的空间。

在本教程中，我们将向您展示如何使用 Divi 的动态内容功能来创建产品信息手风琴，以及如何使用 Divi Visual Builder 设计手风琴（及其内容）。

让我们开始吧。

抢先看

这是我们将在本教程中构建的设计的快速浏览。

免费下载产品信息手风琴布局

要了解本教程中的布局设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

订阅我们的 YouTube 频道

要将布局导入您的页面，只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。

请记住，您必须具有本教程中所述的产品设置才能看到相同的结果。

让我们进入教程好吗？

入门

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

设置示例产品

要为本教程设置示例产品，请导航至 Products > Add New。 为产品命名为“按摩（单次）”，然后单击以使用 Divi Builder。

接下来，更新以下产品页面设置和产品信息：

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 | 热石 | 香薰 | 深层组织。 确保选择“用于变体”。

7.然后在产品数据切换下的变体选项卡中，使用下拉输入从所有属性创建变体。

8.从下拉菜单中选择“设置常规价格”为所有三个变量设置常规价格。

9.在弹出框中，输入值“50”并选择“确定”。

10.完成后，保存或发布产品。

现在您已准备好开始使用自定义产品信息手风琴设计您的布局。

在 Divi 中使用动态内容创建产品信息手风琴

默认产品布局使用各种 Woo 模块显示产品信息。 在这个例子中，我们想使用手风琴来显示产品信息的三个主要部分：产品描述、产品附加信息和产品评论。 所有这三个内容目前都显示在 woo 标签模块中。 我们需要做的就是删除 woo tabs 模块并将其替换为具有通过动态内容获取的相同信息的手风琴模块。

这是如何做到的。

首先在前端点击使用Divi部署可视化构建器。 然后删除 Woo Tabs 模块。

然后添加一个新的手风琴模块来替换选项卡。

在“手风琴设置”弹出窗口中，单击第一个手风琴上的齿轮图标打开单个手风琴设置。

输入标题“关于产品”。

然后将鼠标悬停在正文内容输入框上并单击动态内容图标。

从动态内容列表中选择“产品描述”。

这将引入我们在后端为产品设置的产品详细描述。

在您准备好第一个手风琴内容后，打开第二个手风琴的设置并更新以下内容：

• 标题：规格

然后将“产品附加信息”动态内容添加到正文中。

在第二个手风琴内容准备好后，添加一个新的手风琴项目并更新该手风琴的设置，如下所示：

• 标题：评论

然后将“产品评论”动态内容添加到正文中以拉入产品评论元素/内容。

注意：请确保您至少为产品添加了一条评论，以便查看实时页面上的内容。

使用 Divi 设计产品信息手风琴和内容

现在我们的产品信息手风琴具有显示产品信息所需的动态内容，我们准备使用内置的手风琴模块设置来设置手风琴的样式。

打开手风琴模块设置，并更新以下内容：

• 图标颜色：#ff9375
• 使用图标字体大小：是
• 图标字体大小：26px

• 关闭切换背景颜色：#ffffff
• 打开标题文本颜色：#ff9375
• 标题文字颜色：#222222
• 标题字体：Lato
• 标题字体粗细：粗体
• 标题字体样式：TT
• 标题文字大小：20px
• 标题字母间距：0.2em
• 标题行高度：2em

• 正文字体：Lato
• 正文文字大小：16px
• 车身线高：1.8em

• 链接文字颜色：#ff9375

这将针对您在每个手风琴的动态内容中拥有的任何链接，包括评论星级。

• 无序列表文本颜色：#ff9375
• 无序列表样式类型：圆形
• 无序列表项缩进：5%

• 边框宽度：0px
• 顶部边框宽度：1px
• 顶部边框颜色：#222222

最后一步，让我们添加一小段 css 以去除手风琴切换之间的默认边距。

在高级选项卡下，将以下 CSS 添加到 Toggle 元素：

margin-bottom: 0px;

现在让我们看看产品信息手风琴的最终设计。

布局的最终​​调整

我们可以对布局进行一些调整以匹配手风琴的设计。 例如，我们可以将每个模块的字体调整为 Lato，在变量下拉列表周围添加自定义边框和边框半径，并使用纯色背景更新添加到购物车按钮以匹配。

完成后，这是最终结果。

我在上面提供了这个布局设计作为免费下载。 随意检查一下。 请记住，您必须按照本教程中的说明进行产品设置才能看到相同的结果。

注意：Divi 中产品的许多 WooCommerce 元素的默认颜色是从主题定制器设置的辅助颜色值继承的。 更新此辅助颜色一次可能更容易，而不是更新每个 woo 模块的颜色。

最后的想法

正如我们所了解的，Woo 模块并不是唯一可用于获取动态产品信息的元素。 产品信息手风琴是一个很好的例子，说明如何使用任何 Divi 模块以独特而简洁的方式显示产品信息。 随意为您的产品页面探索新的和令人兴奋的手风琴设计。 而且，当然，您可以使用多个切换模块而不是手风琴来实现类似的结果。

我期待在评论中收到您的来信。

干杯!