WordPress divi主题

如何使用内联动态内容自定义 Divi 产品页面

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

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

在 Divi 中使用动态内容对于在整个产品页面中注入动态产品数据非常有帮助。 这使您可以轻松创建动态产品页面布局。 Divi 的动态内容功能还允许我们通过在动态内容元素之前和之后添加内容块来添加内联动态内容。 例如,我们可以在产品价格动态内容元素之前添加标签“价格:”,甚至可以自定义联系表单标题以包含产品标题,以实现更有针对性的号召性用语。

google广告开户

在本教程中,我们将向您展示如何以一些创造性的方式将内联动态内容添加到您的 Divi 产品页面。

让我们开始吧。

订阅我们的 Youtube 频道

如何为动态内容使用之前和之后的输入

动态内容可以添加到 Divi 模块中的任何内容。 要将动态内容添加到 Divi 模块,请打开模块设置,将鼠标悬停在内容输入字段上,然后选择出现的动态内容图标。

然后从下拉列表中选择动态内容元素。 对于此插图,产品标题被添加到产品页面上文本模块的正文内容中。

现在产品标题将动态显示为文本模块内容。 要访问之前和之后的输入选项,请单击动态内容产品标题元素上的齿轮图标。

WordPress divi主题

我们可以选择在动态内容之前和/或之后添加内容(在这种情况下是产品标题)。 对于此插图,在产品标题前后添加文本以创建句子。

该句子现在包含一段内联动态内容,只要后端的产品(或产品标题)发生变化,该内容就会发生变化。 如果您使用这种技术创建一个产品页面布局以用于其他产品,该模块将无缝工作以将新产品标题合并到句子中。

现在您已经了解了基本概念,让我们看一些具体示例,说明如何使用内联动态内容自定义产品页面。

使用产品标题作为内联动态内容创建切换标题

对于第一个示例,我们将为标题创建一个带有内联动态内容的自定义切换模块。 我们会将其添加到产品页面,以便将产品描述作为切换内容。

这是如何做到的。

在 WooCommerce 产品页面的前端为您创建的产品部署 Divi Builder。 然后在默认的 Woo Description 模块下添加一个 Toggle 模块。

在切换设置弹出窗口中,将产品标题添加为标题的动态内容。 并将产品描述添加为 Body 的动态内容。

fiverr建站WordPress程序员

然后点击编辑产品标题动态内容。

然后更新前后内容如下:

之前:“你会喜欢的”
后: ”!”

独立站选品工具

确保在之前输入的内容末尾添加一个空格,以便在内联产品标题之前有一个空格。

不要忘记! 您可以使用内置的 Divi 设计选项设置整个标题的样式。 对于这个例子,让我们给它一个深色背景并稍微自定义文本。 更新切换模块的以下设置:

背景颜色:#333333
标题文字颜色:#ff9375
标题字体粗细:半粗体
正文文本颜色:#ffffff

高质量外链购买

然后删除刚刚创建的 Toggle 上方的默认 Woo Description 模块,因为描述现在位于 Toggle 中。

现在,您有一个带有自定义标题的切换按钮,其中包含拉入产品标题的内联动态内容。

第 2 部分:具有内联动态内容的联系表

对于下一个示例,我们可以使用完全相同的过程来自定义联系表单的标题,以将产品标题作为内联动态内容包含在内,以实现诱人的号召性用语。

将联系表添加到产品页面。 然后将产品标题添加为联系表单标题的动态内容。

JasperAI 10000字免费额度试用

点击齿轮图标编辑产品标题动态内容并更新前后内容如下:

之前:“有一个关于”的问题
后: ”? 给我们呐喊!”

然后我们可以自定义联系表格和标题文本如下:

WordPress备份工具updrafplus

背景颜色:#333333
标题字体粗细:半粗体
标题文字颜色:#ffffff
标题行高:1.3em
填充:顶部 3%,底部 3%,左侧 3%,右侧 3%

现在,您有一个带有自定义标题的联系表单,其中包含内联动态内容,可通过在标题中添加产品标题来改进号召性用语。

使用内联动态内容自定义产品价格

在最后一个示例中,我们将向产品页面的产品价格元素添加一些内联动态内容。

在默认产品价格模块下,添加一个以产品价格作为正文内容的动态内容的文本模块。

然后更新前后内容如下:

之前:“价格:”
之后:“(加上免费送货)”

现在您有了一个带有内联动态内容的自定义产品价格。

为内联动态内容启用原始 HTML

一些动态元素(如新产品价格和旧产品价格)将可以选择启用原始 html。 这将使您在输入之前和之后添加 HTML 代码。

例如,我们可以将 New Product Price 动态内容元素添加到文本模块。 然后我们可以在前面的元素中添加标签“Price:”并将其包装在一个 带有内联样式的标签,使标签的颜色与价格不同。

最后的想法

如果您不熟悉 Divi 内置的动态内容功能,希望本文能启发您探索添加一些独特的内联动态内容来改进您的产品页面。

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

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题