如何使用 Divi Theme Builder 创建食谱卡模板

美食博主和食谱创作者知道对他们发布的食谱保持一致的看法是多么重要。 一个常见的解决方案是使用配方卡插件，但这有设计限制。 现在，使用 Divi Theme Builder，您可以创建自己的食谱卡模板，以在整个网站和博客中使用。 在高级自定义字段 (ACF) 插件的帮助下，设计独特且可重复使用的食谱卡比以往任何时候都容易。

在这篇文章中，我们将向您展示如何创建具有动态内容的食谱卡模板。 通过使用 Divi Theme Builder 设置，可以通过选择特定类别将设计应用于包含食谱的博客文章。 我们希望本教程能激发您使用自己的自定义字段创建自己风格的食谱卡。

让我们来看看设计在不同屏幕尺寸下的外观。

食谱卡模板预览

让我们来看看设计在不同屏幕尺寸下的外观。

桌面

药片

移动的

1. 下载并安装高级自定义字段插件

搜索和安装

通过在插件搜索栏中搜索“高级自定义字段”来找到 ACF 插件，安装并激活它。

添加新字段组

单击 ACF 选项卡并选择“添加新的”。 将组命名为“食谱卡”。 通过“添加字段”按钮一一添加自定义字段。

添加自定义字段

对于每个自定义字段，单击“添加字段”按钮。 每个都可以针对不同类型的内容进行定制。 下面的列表指定了每个字段的标签和类型。 在每个字段标签的开头添加“配方”一词，以便在构建模块时很容易找到。 添加标签后，字段名称将自动填充。

食谱标题

从食谱标题开始。

• 字段标签：配方标题
• 字段类型：文本
• 需要吗？：是
• 占位符文本：食谱标题
• 字符限制：30

食谱作者

然后，为作者创建一个字段。

• 字段标签：配方作者
• 字段类型：文本
• 需要吗？：是
• 占位符文本：作者

食谱准备时间

跟着准备时间。

• 字段标签：配方准备时间
• 字段类型：数字
• 需要吗？：是
• 占位符文本：##
• 准备： 准备时间：
• 附加：分钟。

食谱份量

然后，上菜。

• 字段标签：食谱份量
• 字段类型：数字
• 需要吗？：是
• 占位符文本：##
• 准备： 服务：

食谱风味小贴士

添加风味提示字段。

• 字段标签：配方风味提示
• 字段类型：文本
• 需要吗？：是
• 前置：风味提示：
• 字符限制：40

食谱图片

现在，添加图像字段。

• 字段标签：食谱图片
• 字段类型：图像
• 需要吗？：是

配方成分标题

然后，成分标题。

• 字段标签：配方成分标题
• 字段类型：文本
• 说明：只需编写与占位符文本相同的内容即可。
• 需要吗？：是
• 占位符文本：成分

配方成分表

按照成分表进行操作。

• 字段标签：配方成分列表
• 字段类型：文本区域
• 说明：在每个项目后添加一个空格
• 需要吗？：是
• 行数：8
• 新行：自动添加 <br>

配方准备标题

紧随其后的是准备标题。

• 字段标签：配方准备标题
• 字段类型：文本
• 说明：只需编写与占位符文本相同的内容即可。
• 需要吗？：是
• 占位符文本：准备

配方准备清单

最后，准备清单。

• 字段标签：配方准备清单
• 字段类型：文本区域
• 说明：在每个项目后添加一个空格
• 需要吗？：是
• 行数：10
• 新行：自动添加 <br>

发布字段组

发布字段组。 您的字段组窗口应如下面的屏幕截图所示。

如何在 Divi Builder 中访问食谱卡模板的 ACF 插件内容

通过单击动态内容图标，可以将高级自定义字段添加到 Divi 模块。 此图标位于内容框的右上角。 这是它的样子：

2. 使用 Divi Builder 创建新的食谱卡模板

Divi 主题生成器步骤

1. 创建食谱类别

您需要一个名为“食谱”的类别，以便您可以为其分配模板。 通过仪表板将其添加到类别选项卡中。

2.打开Divi Theme Builder并添加新模板

打开 Divi 主题构建器并添加一个新模板。

3. 添加全局主体

单击“添加全局主体”并将模板分配给特定类别 > 食谱中的帖子。 然后，单击“创建模板”按钮。

4. 建立自定义身体

单击“添加全局主体”并选择“添加自定义主体”。

3. 使用动态内容重新创建食谱卡设计

添加新部分

现在，我们可以开始设计食谱卡模板。 当 Divi 构建器打开时，选择“从头开始构建”。 首先添加一个新部分。

背景

在部分设置中，添加背景颜色。

• 背景颜色：浅灰色#ededed

浆纱

此外，在设计选项卡中调整大小。

• 宽度：100%
• 最大宽度：100%

添加第一行

列结构

添加一个包含一列的新行。

浆纱

在添加模块之前，调整行的大小设置。

• 最大宽度：90%

列设置

背景

自定义行内的列设置。 首先，添加背景颜色。

• 背景颜色：白色#ffffff

边界

然后，修改边框样式。

• 圆角：1vw 所有四个角
• 边框样式：所有四个边
• 宽度：5px
• 颜色：深灰色#333333

添加具有动态内容的文本模块

内容

完成行和列设置后，就可以添加模块了。 首先添加一个文本模块。 在内容窗口中，为配方标题选择动态内容。 选择后，单击齿轮图标并输入 H1 片段。

• 正文：食谱标题
• 机身设置：
  • 之前：<H1>
  • 之后：</H1>

标题文字

然后，相应地设置 H1 文本设置的样式：

• 标题级别：H1
• 字体：东方
• 重量：粗体
• 对齐方式：居中
• 颜色：深灰色#3d3d3d
• 尺寸：
  • 台式机：3vw
  • 平板电脑：4vw
  • 电话：5vw
• 字母间距：3px
• 线高：1.5em

间距

也修改间距值。

• 底部边距：
  • 桌面：-1vw
  • 平板电脑：-2vw
  • 电话：-5vw
• 顶部填充：
  • 台式机 + 平板电脑：1vw
  • 电话：2vw
• 底部填充：0vw
• 左 + 右填充：
  • 台式机 + 平板电脑：3vw
  • 电话：4vw

添加具有动态内容的第二个文本模块

内容

添加第二个文本模块并为配方作者选择动态内容。

• 正文：食谱作者

文本

然后，设置文本样式。

• 字体：编码 Sans
• 颜色：深灰色#3d3d3d
• 尺寸：
  • 台式机：1.4vw
  • 平板电脑：2.4vw
  • 电话：3vw
• 对齐方式：居中

间距

然后，调整间距。

• 最高利润率：1.5vw
• 顶部填充：
  • 台式机 + 平板电脑：0vw
  • 电话：2vw
• 底部填充：2vw
• 左 + 右填充：
  • 台式机：2vw
  • 平板+手机：3vw

添加第二行

列结构

现在，使用以下列结构添加第二行：

浆纱

打开行设置并相应地调整大小设置：

• 天沟宽度：2
• 宽度：90%
• 最大宽度：100%
• 行对齐方式：左

间距

然后，间距。

• 顶部 + 底部填充：0.5vw
• 左填充：10vw

能见度

最后，在高级选项卡中，调整可见性。

• 水平溢出：可见
• 垂直溢出：可见

列 1 + 2 + 3 设置

边界

以相同的方式设置所有三列的样式。 首先，转到边框设置并进行一些更改。 对所有三列重复。

• 圆角：1vw 所有四个角
• 边框样式：所有四个边
• 宽度：5px
• 颜色：深灰色#333333

转变

要使设计具有悬停效果，请按如下方式调整变换设置。 对所有三列重复。

• 悬停时变换比例：105% x 105%

将文本模块添加到第 1 列

内容

添加一个文本模块并暂时将内容窗口留空。 我们稍后会添加。

背景

为模块添加背景颜色。

• 背景颜色：柠檬绿#b1e88d

标题文字

接下来设置 H5 文本设置的样式。

• 标题级别：H5
• H5 字体：东方
• H5 颜色：深灰色 #3d3d3d
• H5尺寸：
  • 台式机：1vw
  • 平板电脑：2.3vw
  • 电话：3.3vw
• 对齐方式：居中

间距

最后，按如下方式调整间距值。

• 顶部填充：
  • 台式机：1vw
  • 平板电脑：1.5vw
  • 电话：3.5vw
• 底部填充：
  • 台式机：0.5vw
  • 平板+手机：1.5vw
• 左 + 右填充：
  • 台式机：2vw
  • 平板+手机：3vw

从第 1 列复制文本模块两次并移至第 2 和第 3 列

在线框视图中，复制第一列中的文本模块。 然后，将重复项移至第 2 列和第 3 列。

将动态内容添加到第 1 列中的文本模块

添加准备时间的动态内容并调整设置。

• 身体：食谱准备时间
• 机身设置：
  • 之前：<H5>准备时间：
  • 之后：分钟</H5>

将动态内容添加到第 2 列中的文本模块

添加食谱服务的动态内容并调整设置。

• 身体：食谱服务
• 机身设置：
  • 之前：<H5>份量：
  • 之后：</H5>

将动态内容添加到第 3 列中的文本模块

添加风味提示的动态内容并调整设置。

• 正文：配方风味提示
• 机身设置：
  • 之前：<H5>风味提示：
  • 之后：</H5>

添加第三行

列结构

现在使用以下列结构添加第三行：

浆纱

在添加任何模块之前，调整行的大小。

• 自定义天沟宽度：2
• 宽度：80%
• 最大宽度：100%

间距

另外，擦除默认的上边距。

• 最高利润率：0vw

能见度

最后，在高级选项卡中调整可见性。

• 水平溢出：可见
• 垂直溢出：可见

列 1 + 2 + 3 设置

边界

从边框设置开始，以相同的方式设置所有三列的样式。 重复第 2 列和第 3 列。

• 圆角：1vw 所有四个角
• 边框样式：所有四个边
• 宽度：5px
• 颜色：深灰色#333333

转变

继续在设计选项卡中添加悬停变换。 重复第 2 列和第 3 列。

• 悬停时变换比例：105% x 105%

将具有动态内容的图像模块添加到第 1 列

内容

为配方图像添加具有动态内容的图像模块。

• 图片：食谱图片

将具有动态内容的文本模块添加到第 2 列

内容

现在，为成分标题添加一个具有动态内容的文本模块。 单击齿轮图标并输入 H3 片段，如下所示。

• 正文：配方成分标题
• 机身设置：
  • 之前：<H3>
  • 之后：</H3>

标题文字

然后，设置标题文本的样式。

• 标题级别：H3
• H3Font：东方
• H3 颜色：深灰色 #3d3d3d
• H3尺寸：
  • 台式机：1.6vw
  • 平板电脑：2vw
  • 电话：5.5vw
• 对齐方式：居中

间距

通过调整间距完成模块。

• 底部边距：0vw
• 顶部填充：
  • 台式机：2vw
  • 平板电脑：3vw
  • 电话：4vw
• 左 + 右填充：
  • 台式机：2vw
  • 平板+手机：3vw

将分隔模块添加到第 2 列

线

添加一个分隔模块并按如下方式设置样式。

• 颜色：柠檬绿#b1e88d

浆纱

然后调整大小值。

• 重量：5px
• 宽度：40%
• 对齐方式：左

间距

最后，调整间距。

• 最高利润率：0vw

将具有动态内容的文本模块添加到第 2 列

内容

为成分列表添加具有动态内容的文本模块。 单击动态内容选项卡中的齿轮图标并启用原始 HTML。

• 正文：配方成分列表
• 正文设置：启用原始 HTML

文本

然后，按如下方式设置文本样式。

• 字体：编码 Sans
• 颜色：深灰色#333333
• 尺寸：
  • 台式机：0.9vw
  • 平板电脑：2vw
  • 电话：3vw

间距

另外，调整间距。

• 最高保证金：
  • 桌面：-1vw
  • 平板电脑：-3vw
  • 电话：-5vw
• 顶部填充：
  • 台式机 + 平板电脑：0vw
• 底部填充：
  • 台式机：3vw
  • 平板电脑 + 手机：4vw
• 左 + 右填充：
  • 台式机：3vw
  • 平板电脑：4vw
  • 电话：5vw

复制第 2 列上的所有模块并移至第 3 列

在线框视图中，复制第二列中的所有模块。 以相同的顺序将复制的模块移动到第三列。

在第 3 列的第一个文本模块中添加动态内容

为准备标题添加动态内容。

• 正文：配方准备标题

在第 3 列的第二个文本模块中添加动态内容

此外，将准备列表的动态内容添加到该列的最后一个文本模块。

• 正文：配方准备清单

添加第 4 行

列结构

为了完成模板，我们需要一个帖子内容模块。 使用以下列结构添加新行：

浆纱

在添加模块之前，调整行的大小。

• 自定义天沟宽度：2
• 宽度：100%
• 最大宽度：80%

间距

• 左 + 右填充：0vw

第 1 列设置

背景

为列设置样式以匹配上面的食谱卡。 首先，添加背景。

• 背景颜色：白色#ffffff

间距

另外，调整间距。

• 左填充：0vw

边界

最后但并非最不重要的是，修改边框设置。

• 圆角：1vw 所有四个角
• 边框样式：所有四个边
• 宽度：5px
• 颜色：深灰色#333333

将第 2 列留空。

将帖子内容模块添加到第 1 列

文本

将帖子内容模块添加到第一列并设置文本样式以匹配食谱卡模板。

• 字体：编码 Sans
• 颜色：深灰色#333333
• 尺寸：
  • 台式机：0.9vw
  • 平板电脑：2vw
  • 电话：3vw
• 线高：2em

标题 1 文本

• 字体：东方
• 颜色：深灰色#333333
• 尺寸：
  • 台式机：2vw
  • 平板电脑：5vw
  • 电话：6vw

标题 2 文字

• 字体：东方
• 颜色：深灰色#333333
• 尺寸：
  • 台式机：1.8vw
  • 平板电脑：4.5vw
  • 电话：5.5vw

标题 3 文本

• 字体：东方
• 颜色：深灰色#333333
• 尺寸：
  • 台式机：1.6vw
  • 平板电脑：4.5vw
  • 电话：5vw

间距

要匹配食谱卡的样式，请调整间距值。

• 顶部 + 底部填充：2vw
• 左 + 右填充：
  • 台式机：4vw
  • 平板+手机：6vw

如果要更改块引用行的颜色或链接颜色，可以在主题定制器中的强调色下进行。

4. 使用 ACF 插件设置和食谱卡模板编辑/创建帖子

输入自定义字段

打开或添加帖子。 在内容区域下方，您将找到配方卡模板的所有自定义字段。 为了重新创建此鳄梨吐司设计，请按如下方式填写字段。

食谱标题：

• 超绿纯素鳄梨吐司

食谱作者：

• Magdalena Swifter – www.veganchef.com

食谱准备时间：

• 15

食谱份量：

• 3

食谱风味提示：

• 使用海盐片和特级初榨油

食谱图片：

• 鳄梨吐司图片

配方成分标题：

• 原料

配方成分表：

• 3 片全麦面包片
• 1 成熟鳄梨
• 100克。 煮熟的蚕豆
• 10克。 绿豆芽
• 1 葱花
• 30克。 碎羊乳酪
• 1个柠檬切成两半
• 少许橄榄油
• 撒上海盐

配方准备标题：

• 准备

配方准备清单：

• 1. 根据自己的喜好烤面包片。
• 2. 将牛油果打开，取出果肉，用叉子捣碎。
• 3. 将柠檬汁挤在鳄梨上，加盐调味。
• 4. 将鳄梨泥涂抹在吐司上。
• 5. 撒上蚕豆、豆芽和葱花。
• 6. 加盐调味。
• 7. 加入碎菲达奶酪。
• 8. 最后涂上橄榄油。

给帖子一个标题

标题

不要忘记为您的帖子添加标题。

• 鳄梨吐司食谱

添加内容、选择类别并添加特色图片

将博客文章的内容写入或插入到常规编辑器中。 选择食谱类别并添加特色图片。

食谱卡模板预览

再一次，让我们再看看带有食谱卡模板的完成后的帖子在不同屏幕上的样子。

桌面

药片

移动的

这是一个包裹！

让我们快速回顾一下我们为实现此食谱卡模板设计而采取的步骤。

1. 安装 ACF 插件。
2. 设置配方卡字段组。
3. 添加自定义字段。
4. 创建一个新模板并将其分配给“食谱”类别下的博客文章。
5. 使用模块中 ACF 字段的动态内容。
6. 通过填写字段创建或编辑博客文章。
7. 添加博客文章内容。

由于此设计是作为具有动态内容的模板创建的，因此它将在所有使用 ACF 插件自定义字段的食谱博客文章中保持一致。 我们希望此食谱卡模板设计能够为您的与食品相关的博客提供各种新颖和创新的食谱模板。 在评论中让我们知道您的想法。