WordPress divi主题

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

by | May 9, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

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

让我们开始吧。

抢先看

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

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

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

订阅我们的 Youtube 频道

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

WordPress divi主题

请记住,您必须按照本教程中的说明进行产品设置才能看到相同的结果。

让我们来看看教程好吗?

入门

要开始,您需要执行以下操作:

  • 如果您还没有,请安装并激活已安装的 Divi 主题(如果不使用 Divi 主题,则安装并激活 Divi Builder 插件)。
  • 安装并激活 WooCommerce 插件。 如果这是第一次设置 WooCommerce,您将需要运行基本设置向导以准备好您的商店。 完成后,您就可以添加新产品了。
  • 按照以下指示创建新产品。 有关如何添加新产品的更多信息,请查看本教程。
  • 设置示例产品

    要为本教程设置示例产品,请导航至 Products > Add New。 将产品命名为“Massage (single session)”,然后单击以使用 Divi Builder。

    divi 产品信息 手风琴

    接下来,更新以下产品页面设置和产品信息:

    1. 在 Divi 页面设置下,选择无侧边栏页面布局。

    2. 添加/选择产品类别

    3. 添加产品图片

    4. 添加以下产品长描述内容:

    fiverr建站WordPress程序员
    <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. 添加一个名为“类型”的属性,其值如下:瑞典语 | 热石 | 芳香疗法 | 深层组织。 确保选择“用于变体”。

    divi 产品信息 手风琴

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

    divi 产品信息 手风琴

    独立站选品工具

    divi 产品信息 手风琴

    8. 从下拉列表中选择“设置常规价格”以设置所有三个变量的常规价格。

    divi 产品信息 手风琴

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

    divi 产品信息 手风琴

    高质量外链购买

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

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

    在 Divi 中创建具有动态内容的产品信息手风琴

    默认产品布局始终使用各种 Woo 模块显示产品信息。 对于这个例子,我们想使用折叠显示三个主要的产品信息:产品描述、产品附加信息和产品评论。 所有这三个内容目前都显示在 woo 选项卡模块中。 我们需要做的就是删除 woo tabs 模块并将其替换为具有通过动态内容提取的相同信息的手风琴模块。

    这是如何做到的。

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

    JasperAI 10000字免费额度试用

    divi 产品信息 手风琴

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

    divi 产品信息 手风琴

    在 Accordion Settings 弹出窗口中,单击第一个手风琴上的齿轮图标打开各个手风琴设置。

    divi 产品信息 手风琴

    WordPress备份工具updrafplus

    输入标题“关于产品”。

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

    divi 产品信息 手风琴

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

    divi 产品信息 手风琴

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

    divi 产品信息 手风琴

    准备好第一个手风琴内容后,打开第二个手风琴的设置并更新以下内容:

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

    divi 产品信息 手风琴

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

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

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

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

    既然我们的产品信息手风琴具有显示产品信息所需的动态内容,我们就可以使用内置的手风琴模块设置来设置手风琴的样式了。

    打开 Accordion Module 设置,并更新以下内容:

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

    divi 产品信息 手风琴

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

    divi 产品信息 手风琴

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

    divi 产品信息 手风琴

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

    divi 产品信息 手风琴

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

    divi 产品信息 手风琴

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

    divi 产品信息 手风琴

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

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

    margin-bottom: 0px;
    

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

    divi 产品信息 手风琴

    布局的最终​​调整

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

    完成后,这是最终结果。

    divi 产品信息 手风琴

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

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

    最后的想法

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

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

    干杯!