如何使用 Divi 的动态内容功能设计动态帖子布局

Divi 的新动态内容功能使我们能够为博客文章（以及更多内容）构建动态布局。 您有充分的理由可以考虑这样做。 原因之一是设计。 您可以使用可视化构建器使用 Divi 设计一些令人惊叹的后期布局，尤其是当您使用可用的预制布局作为起点时。 另一个原因是方便。 一旦设计了所有动态内容元素（如类别、特色图像、帖子标签、自定义字段等）的帖子布局，创建和更新博客帖子的过程就会大大简化。 除了实际的帖子内容之外，所有其他帖子数据都可以更新，而无需部署可视化构建器。

在本教程中，我将向您展示如何在 Divi 中构建动态帖子布局。 通过从预制布局开始，我将引导您完成在整个布局中添加动态内容，然后设计匹配的内容的过程。 我什至会介绍一种将自定义字段用作动态内容的简单方法。

让我们开始吧。

抢先看

你需要什么开始

对于本教程，您将需要以下内容：

• 迪维主题
• 私人教练布局包。 可从 Divi Builder 访问此布局包。 我们将使用私人教练服务页面布局来启动我们帖子布局的设计。

我还将向您展示如何利用自定义字段使用自定义帖子类型功能构建特色锻炼部分。 自定义字段内置于 WordPress，不需要额外的插件或任何东西。 所以你已经有了你需要的东西。

第 1 部分：将预制布局添加到帖子

要开始，请继续创建一个新帖子（不是页面），为您的帖子命名，然后单击“使用 Divi Builder”按钮。 暂时不要部署可视化构建器，因为我们首先需要从默认的 WordPress 编辑器屏幕自定义我们的帖子设置。

因为我们确实想添加我们的预制布局以便从布局中提取我们的图像（我们需要它作为我们的特色图像）。 单击位于 Divi Builder 菜单中的加载布局按钮。

从从库加载弹出窗口中，选择 Personal Trainer Service 页面布局并通过单击“使用此布局”按钮将其部署到您的帖子。

然后发布您的帖子以保存您的设置。

第 2 部分：更新 Divi 页面设置、发布元数据和特色图片

分区页面设置

重要的是我们更新 Divi 页面设置，以便我们的新布局适合设计。 我们还需要隐藏默认的帖子标题显示，因为我们将使用帖子标题模块。

在页面右上角，找到 Divi 页面设置框并更新以下内容：

页面布局：全角
显示帖子标题：隐藏

如果您没有看到 Divi 页面设置，则您可能没有激活 Divi Builder，因此请确保先执行此操作。

添加类别

在类别框下，添加一个名为“力量训练”的新类别，并确保它是唯一选择的类别。

添加标签

在标签框中，添加以下三个标签：速度、训练和锻炼。

特色图片

接下来，添加与布局标题中使用的背景图像匹配的特色图像，如下面的屏幕截图所示。

第 3 部分：为动态锻炼内容添加自定义字段

自定义字段内置于 WordPress。 除了默认的元数据（如类别、帖子作者、发布日期等）之外，它们允许帖子作者向帖子添加额外信息（称为元数据）。在基本级别，自定义字段可用于显示天气或者作者写文章时的心情。 但是有许多不同的方法可以使用自定义字段为您的网站创建动态内容。 请随时阅读有关如何向您的网站添加自定义字段的更多信息。 但是对于这个用例，我认为您可以通过为自己构建一些自定义字段来掌握自定义字段的基本概念。

对于此示例，我将向您展示如何添加一些可用于向帖子添加动态内容的自定义字段。 此示例的动态内容是特色锻炼。 一旦自定义字段就位，帖子作者需要做的就是填写自定义字段值，内容将（动态）更新到帖子，而无需加载 Visual Builder。

为此，向下滚动到帖子底部并找到自定义字段框。 如果由于某种原因它没有显示，请确保从页面顶部的屏幕选项中选择它。

然后单击自定义字段框下拉列表（如果已折叠）以添加新的自定义字段并输入以下内容：

名称：训练标题
价值：特色锻炼

然后单击添加自定义字段按钮。

名称是您在 Divi 中识别自定义字段的方式。 Value 是将使用 Divi 的动态内容功能动态添加到页面的内容（稍后会详细介绍）。

继续此过程以将以下自定义字段添加到您的网站。

名称：热身
价值：800m跑

名称：持续时间
价值：30分钟

名称：举重
价值：

<ul>
<li>Squats: 10 reps at 60% max (4 sets)</li>
<li>Bench: 6 reps at 70% max (3 sets)</li>
</ul>

名称：降温
价值：400m跑

注意：这些自定义字段将添加到 Divi 主题中，并将在您将来创建的任何新帖子中可用。 换句话说，它不仅限于此单个帖子。

不要忘记更新您的帖子！

第 4 部分：使用 Visual Builder 将动态内容添加到帖子布局

现在我们已经有了我们的帖子设置和元数据，是时候开始向我们的帖子添加动态内容了。 为此，请部署 Visual Builder。

为了让这个高级布局设计更容易定位和编辑，打开设置菜单并将构建器默认交互模式设置为单击模式。

在标题部分，删除按钮模块（我们不需要它）。

用特色图片动态内容替换背景图片

对于我们的第一条动态内容，我们将使用帖子中使用的特色图片替换顶部标题部分行的第 1 列中使用的背景图片。 为此，请打开行设置并找到第 1 列的背景设置，然后单击背景图像选项卡。 然后删除当前存在的图像，然后将鼠标悬停在背景图像预览框上。 您将在框的右上角看到动态内容图标。 单击它以打开动态内容选项。 然后从列表中选择特色图像动态内容选项。

由于我们使用相同的图像，因此您的布局看起来完全相同。 现在唯一的区别是背景图片是从设置为帖子特色图片的任何图片中提取的。 这就是动态内容之美！

让我们继续。

使用帖子标题模块添加帖子标题

在当前包含页面标题的文本模块下，添加一个 Post Title 模块。 还有一个选项是使用动态内容将帖子标题添加到模块中，但由于帖子标题模块已经像动态内容一样工作并为 SEO 保留了 h1 标题标签，因此将其用于您的自定义帖子布局是完美的.

然后更新帖子标题模块设置如下：

显示元：否
显示特色图片：否

现在转到上面的文本模块并通过右键单击 h2 选项卡并从此列表中选择选项来复制 h2 标题样式。

然后通过右键单击模块并从列表中选择选项，将 h2 标题样式粘贴到帖子标题模块。

之后，再次回到上面的文本模块，复制间距样式并粘贴到帖子标题模块。 然后将帖子标题文本颜色更改为浅色以获得白色。

现在您的帖子标题应该与原始布局标题的设计相匹配。

现在您可以删除包含原始标题的文本模块。

使用动态内容创建一行元数据

移至布局的第二部分。 然后通过在视觉构建器中将其拖走或在部分设置中将其设置为 0px 来取出该部分的顶部填充。

在布局的第二部分的第一行中，您会注意到一个文本模块（其中包含“关于个人训练”的内容），其下方有一个分隔线。 这是我们将使用动态内容构建自定义元数据行的地方。

我们希望这一行的大小与顶部的行的大小相匹配。 为此，请在顶部打开行的行设置并复制大小调整样式。 然后将它们粘贴到第二部分的第一行。 然后将行装订线更新为 2。新的大小应类似于以下屏幕截图。

您还需要添加自定义间距，如下所示：

自定义填充：左 1%，右 1%

然后保存行设置。

现在将行列结构更新为四列布局。

现在我们准备添加我们的动态内容。 为此，现在在最左侧的列中打开文本模块的设置并将鼠标悬停在内容框上。 您将在框的右上角看到动态内容图标。 单击它以打开动态内容选项。

然后选择选项：发布发布日期。

然后相应地更改日期格式。

这会将帖子的发布日期添加为动态内容。

要使用动态日期内容设置文本模块的样式，请在正下方行的左列中复制文本模块的模块样式。

然后将模块样式粘贴到具有动态日期内容的文本模块，并将文本文本颜色更改为白色。

接下来，复制文本模块和它下面的分隔符并将其粘贴到第 2 列中。然后将动态内容更改为 Post Categories。

您需要将链接文本颜色更新为白色以匹配布局设计。

现在将带有分隔符的帖子类别文本模块复制到第 3 列。然后将动态内容更改为 Post Comment Count。 在 Post Comment Count 弹出窗口中，在 Before 输入框中输入以下内容：

之前： 评论：

动态内容弹出窗口中可用的前后输入框是在动态内容之前和/或之后添加文本的便捷选项。 这有助于在需要时添加标签、价格符号和其他元素。

现在让我们继续添加我们的动态内容。 复制第 3 列中的文本模块和分隔符并将其粘贴到第 4 列。最后一列将保存我们的帖子作者缩略图和作者姓名。 因此，将文本模块的动态内容更改为 Post Author。 在 Post Author 弹出窗口中，更新以下内容：

之前： 通过：
姓名格式：名字和姓氏

在带有博文作者内容的文本模块上方，添加一个新的图像模块。 打开图像模块设置并删除默认图像。 就像我们一直在做的那样，单击图像预览框中的动态内容图标，并将发布者个人资料图片添加为动态内容。

然后调整设计设置将图像拉起来并给它一个自定义宽度，如下所示：

宽度：80px
自定义边距（桌面）：-82px 顶部
自定义边距（平板电脑）：0px 顶部

注意：帖子作者姓名将显示已分配给当前帖子的作者。 帖子作者个人资料图片是在 WordPress 仪表板中用户 > 您的个人资料下为用户个人资料设置的任何内容。

第 5 部分：将自定义字段添加为动态内容以向帖子添加特色锻炼

还记得我们在教程前面是如何添加这些自定义字段的吗？ 现在，我们将使用这些自定义字段作为我们帖子中特色锻炼的内容。

要添加我们的特色锻炼动态内容，首先复制四列行正下方的两列行，其中包含我们所有的动态元数据。 然后删除两列中的模块并在左列中添加一个模糊模块。

我们将使用模糊模块为锻炼部分添加动态内容。 首先，向左列添加一个新的模糊模块。

对于标题，添加名为“锻炼标题”的自定义字段作为动态内容。 然后对于简介内容，添加名为“Duration”的自定义字段作为动态内容。

为了让事情顺利进行，我不会详细讨论这些模块的样式。 但是，您需要在标题左侧添加一个模糊图标并更新设计以匹配布局。

接下来，在下面添加第二个模糊模块。 输入文本“Warmup”作为标题。 然后添加名为“Warmup”的自定义字段作为动态内容。

在该模块下方添加第三个简介模块，标题为“举重”，自定义字段“举重”作为动态内容。 由于我们将 html 用于此自定义字段值，因此您需要在举重弹出窗口中启用原始 html。

添加以“Cool Down”为标题、自定义字段“Cool Down”为动态内容的最终简介模块。

现在您有一个动态版块，可以将锻炼添加到您的帖子中！

您需要做的就是从 WordPress 的默认页面编辑器更新自定义字段值，该内容将自动添加到您的帖子布局中，而无需进入 Divi 构建器。

第 6 部分：使用帖子标签动态内容设计“相关主题”部分

您可以使用动态内容来显示帖子标签并为您的帖子创建一个看起来很酷的“相关主题”部分。 为此，请创建一个新的一列行并向该行添加一个文本模块。

然后对于内容框，添加 Post Tags 作为动态内容。 然后更新以下帖子标签选项：

之前： 相关主题：
标签分隔符：//

注意：您几乎可以使用任何您想要的字符集作为标签分隔符，因此您可以随意尝试不同的字符进行创意设计。

要设置内容样式，请更新以下设计设置：

文字字体：Oswald
文字字体粗细：半粗体
文字文字颜色：#ff4c00
文字文字大小：30px
链接字体：Oswald
链接字体粗细：半粗体
链接文字颜色：#262d3f
链接文字大小：50px
链接字母间距：2px
链接线高：1.6em

这是最终的设计。

第 7 部分：添加作者简介和评论部分

在这一点上，您已经准备好添加动态内容并轻松调整帖子布局的设计，因此我不会详细介绍最后两个元素。

使用动态内容添加作者简介部分

要在帖子内容的底部添加作者简介部分，您可以使用帖子作者、帖子作者简介图片和作者简介动态内容。 正如您在下面的屏幕截图中看到的，我创建了一个 1/4 3/4 列的行。 然后我将帖子作者个人资料图片添加到左栏中。 在右栏中，我添加了帖子作者，下方是作者简介。 我还添加了特色图像动态内容作为该部分的背景图像（和渐变叠加）。 下面是一个示例。

使用评论模块添加评论部分

由于我们使用的是自定义帖子布局，因此需要使用评论模块，以便我们可以将评论部分的设计与布局相匹配。 只需将评论模块添加到新的部分行，使按钮样式和字体与当前布局相匹配。 下面是一个示例。

最终设计

这是所有设计都调整后的整个帖子的最终设计。

更新帖子内容并保存未来帖子的布局

由于我们使用 Divi Builder 创建帖子布局，因此您仍然需要使用 Divi 模块更新帖子的实际帖子内容。 但是现在其他一切都是动态的，这使得这个过程变得更加容易。 您需要将帖子布局保存到您的库中，以便在创建新帖子时，您所需要做的就是将保存的布局添加到您的帖子并更新帖子内容。

最后的想法

Divi 的动态内容是一项强大的功能，可以让添加和更新帖子数据变得更加容易。 因此，如果您希望使用 Divi Builder 为您的博客文章（或其他自定义文章类型，如项目）设计自定义布局，那么动态内容是不二之选。 当然，动态内容不限于帖子。 您可以在整个网站中利用动态内容和自定义字段。 我希望这篇文章可以帮助您了解一些可能性，并激发您以令人敬畏的新方式使用动态内容。

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

干杯!