Divi 布局块为将 Divi Builder 的强大设计功能引入 WordPress 的默认块编辑器 (Gutenberg) 的许多便捷方式打开了大门。 这使您可以使用熟悉的 Gutenberg 块界面编写大部分博客文章内容，然后在需要自定义设计或功能的地方注入 Divi 布局。 Divi 布局块可以包含您可以在 Divi Builder 中构建的任何内容，但它也非常适合包含像电子邮件选项这样简单而重要的内容。
在本教程中，我们将介绍如何使用 Divi 布局块将漂亮的 Divi 电子邮件选项添加到古腾堡博客文章。
让我们开始吧！
抢先看
免费下载布局
要掌握本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
导入布局块 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
- 底部分隔线翻转：水平和垂直
边距和边框
分隔线就位后，在上面和下面给部分留出一点边距，然后用边框和动画完成，如下所示：
- 边距：顶部 20px，底部 20px
- 圆角：30px
- 边框宽度：2px
- 边框颜色：#ff9945
- 动画风格：翻转
添加列并设置行宽
现在该部分已完成，向该行添加一列结构。
然后按如下方式更新行设置：
- 宽度：100%
- 最大宽度：100%
构建电子邮件选项
添加电子邮件选项模块
接下来，将电子邮件选择模块添加到该行。
电子邮件选择内容
对于电子邮件选择内容设置，请更新以下内容：
- 标题：“每周获得免费提示！”
- 身体： [keep default mock content]
- Mailchimp 列表： [add a list]
- 使用单一名称字段：是
- 使用背景颜色：否
电子邮件优化设计
字段
跳转到设计选项卡并通过更新以下内容来设计电子邮件选项字段：
- 布局：右侧正文，左侧表格
- 字段背景颜色：#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 添加自定义设计、悬停效果和动画。 这一切都无需使用插件！
我期待在评论中收到您的来信。
干杯!
