如何在您的古腾堡博客文章中添加 Divi 电子邮件选项

Divi Layout Block 为许多方便的方式打开了大门，将 Divi Builder 的强大设计功能引入 WordPress 的默认块编辑器（Gutenberg）。 这允许您使用熟悉的 Gutenberg 块界面编写大部分博客文章内容，然后在需要自定义设计或功能的地方注入 Divi 布局。 Divi Layout Block 可以包含您可以在 Divi Builder 中构建的任何内容，但它也非常适合包含像 Email Optin 这样简单且必不可少的内容。

在本教程中，我们将介绍如何使用 Divi 布局块将漂亮的 Divi Email Optin 添加到 Gutenberg 博客文章中。

让我们开始吧！

抢先看

免费下载布局

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

下载文件

免费下载

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

下载

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

导入布局块 JSON

将布局上传到 Divi 库

要导入您可以在上面下载的 JSON 文件，请转到 WordPress 仪表板后端的 Divi 库，然后单击“导入和导出”。

然后，选择下载文件夹中的 JSON 文件，然后单击“导入 Divi Builder 布局”。

在 Gutenberg Post 内添加新的 Divi Block Block

导入布局后，您可以转到 Gutenberg 帖子并添加新的 Divi 布局块。

从保存的布局导入 JSON 文件

然后，单击“从库加载”，导航到“您保存的布局”并选择布局以将 Divi CTA 布局块导入您的博客文章。 就是这样！

就是这样！

让我们进入教程，好吗？

在您的古腾堡博客文章中添加 Divi 电子邮件选项

创建或编辑博客文章

首先，我们需要创建一篇新的博客文章或编辑现有的文章。 对于此示例，让我们使用一些标题和段落块向帖子标题和正文添加一些模拟内容。 然后添加特色图像并为Divi页面设置下的页面布局选择“无侧边栏”。

添加内联 Divi 布局块

一旦您创建了大部分帖子，我们需要做的就是在帖子内容区域内我们想要的任何位置添加一个新的 Divi 布局块。 我们可以将其添加到靠近帖子末尾的某个位置，以捕获明显对帖子内容感兴趣的合格潜在客户。

要添加它，请将鼠标悬停在要添加电子邮件选项的区域上，然后单击蓝色加号图标以添加新块。 在弹出的块列表中，选择 Divi 布局块。

在 Divi 布局块中构建新布局

一旦选择了 Divi 布局块，我们将可以选择“构建新布局”或“从库加载”。 由于我们需要从头开始构建电子邮件选项，因此选择选项“构建新布局”。

截面设计

在布局块编辑器中，我们可以开始设计要包含在我们帖子中的电子邮件选项。 我们在此编辑器中设计的任何内容都将显示在帖子的 Divi 布局块区域中。

首先，打开已经存在的默认部分的部分设置。

背景渐变

然后添加一个背景渐变如下：

• 背景渐变左颜色：#ff9945
• 背景渐变右颜色：#f86a4c

分隔线

接下来，转到设计选项卡和顶部和底部部分分隔线，如下所示：

• 顶部分隔线样式：见截图
• 顶部分隔线颜色：#f86a4c
• 顶部分隔线水平重复：0.8x

• 底部分隔线样式：见截图
• 底部分隔线颜色：#ff9945
• 底部分隔线水平重复：0.8x
• 底部分隔线翻转：水平和垂直

边距和边框

分隔线就位后，给该部分上下一点边距，然后用边框和动画完成，如下所示：

• 边距：顶部 20 像素，底部 20 像素
• 圆角：30px
• 边框宽度：2px
• 边框颜色：#ff9945
• 动画风格：翻转

添加列并设置行宽

现在该部分已完成，向该行添加一个单列结构。

然后按如下方式更新行设置：

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

建立电子邮件选择

添加电子邮件选择模块

接下来，将电子邮件选择模块添加到该行。

电子邮件选择内容

对于电子邮件选择内容设置，更新以下内容：

• 标题：“每周获得免费提示！”
• 正文：[保留默认模拟内容]
• Mailchimp 列表：[添加列表]
• 使用单一名称字段：是
• 使用背景颜色：否

电子邮件选择设计

字段

跳转到设计选项卡并通过更新以下内容来设计电子邮件选择字段：

• 布局：身体在右边，表格在左边
• 字段背景颜色：#f86a4c
• 字段文本颜色：#ffffff
• 字段字体：IBM Plex Sans
• 字段文本大小：18px
• 字段字母间距：2px
• 字段线高：2em

标题

更新标题文本设置如下：

• 标题字体：IBM Plex Sans Condensed
• 标题字体粗细：半粗体
• 标题文字颜色：#ffffff
• 标题文字大小：60px（桌面），30px（手机）
• 标题行高度：1.2em（桌面），1.6（手机）

按钮

对于按钮，更新以下内容：

• 为按钮使用自定义样式：是
• 按钮文字颜色：#ff9945
• 按钮背景渐变左侧颜色：#ff9945
• 按钮背景渐变右颜色：#ffffff
• 梯度方向：90度
• 结束位置：34%
• 按钮边框宽度：0px
• 按钮字母间距：2px
• 按钮字体：IBM Plex Sans
• 按钮字体粗细：粗体
• 按钮字体样式：TT
• 按钮填充：顶部 15px，底部 15px

填充

最后一次触摸，添加以下填充：

• 填充：左 5%，右 5%

最后结果

一旦我们在 Divi 布局编辑器中完成布局设计，请确保并保存布局。 然后保存帖子，以便您可以在实时页面上查看电子邮件选择的预览。 这是它的样子。

当您向下滚动帖子时，这是电子邮件选择的轻微动画。

最后的想法

使用 Divi Layout Block 在您的 Gutenberg 帖子中添加电子邮件选项变得非常简单。 您不仅可以在几秒钟内添加功能齐全（且易于使用）的电子邮件选项，还可以使用 Divi Builder 添加自定义设计、悬停效果和动画。 所有这一切都无需使用插件！

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

干杯!