WordPress divi主题

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

| 5月 7, 2022 | Divi主题使用教程 | 0 条评论

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

Divi 布局块为将 Divi Builder 的强大设计功能引入 WordPress 的默认块编辑器 (Gutenberg) 的许多便捷方式打开了大门。 这使您可以使用熟悉的 Gutenberg 块界面编写大部分博客文章内容,然后在需要自定义设计或功能的地方注入 Divi 布局。 Divi 布局块可以包含您可以在 Divi Builder 中构建的任何内容,但它也非常适合包含像电子邮件选项这样简单而重要的内容。

google广告开户

在本教程中,我们将介绍如何使用 Divi 布局块将漂亮的 Divi 电子邮件选项添加到古腾堡博客文章。

让我们开始吧!

抢先看

古腾堡 Divi 电子邮件选项

古腾堡 Divi 电子邮件选项

免费下载布局

要掌握本教程中的设计,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

导入布局块 JSON

将布局上传到 Divi 库

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

古腾堡 Divi 电子邮件选项

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

古腾堡 Divi 电子邮件选项

WordPress divi主题

在 Gutenberg Post 内添加新的 Divi Block Block

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

古腾堡 Divi 电子邮件选项

从保存的布局导入 JSON 文件

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

古腾堡 Divi 电子邮件选项

古腾堡 Divi 电子邮件选项

就是这样!

古腾堡 Divi 电子邮件选项

让我们进入教程,好吗?

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

创建或编辑博客文章

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

古腾堡 Divi 电子邮件选项

fiverr建站WordPress程序员

添加内联 Divi 布局块

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

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

古腾堡 Divi 电子邮件选项

在 Divi 布局块中构建新布局

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

古腾堡 Divi 电子邮件选项

独立站选品工具

剖面设计

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

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

古腾堡 Divi 电子邮件选项

背景渐变

然后添加背景渐变如下:

  • 背景渐变左颜色:#ff9945
  • 背景渐变正确颜色:#f86a4c

古腾堡 Divi 电子邮件选项

高质量外链购买
分隔线

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

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

古腾堡 Divi 电子邮件选项

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

古腾堡 Divi 电子邮件选项

边距和边框

分隔线就位后,在上面和下面给部分留出一点边距,然后用边框和动画完成,如下所示:

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

古腾堡 Divi 电子邮件选项

JasperAI 10000字免费额度试用

添加列并设置行宽

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

古腾堡 Divi 电子邮件选项

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

  • 宽度:100%
  • 最大宽度:100%

古腾堡 Divi 电子邮件选项

构建电子邮件选项

添加电子邮件选项模块

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

WordPress备份工具updrafplus

古腾堡 Divi 电子邮件选项

电子邮件选择内容

对于电子邮件选择内容设置,请更新以下内容:

  • 标题:“每周获得免费提示!”
  • 身体: [keep default mock content]
  • Mailchimp 列表: [add a list]
  • 使用单一名称字段:是
  • 使用背景颜色:否

古腾堡 Divi 电子邮件选项

电子邮件优化设计

字段

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

  • 布局:右侧正文,左侧表格
  • 字段背景颜色:#f86a4c
  • 字段文本颜色:#ffffff
  • 字段字体:IBM Plex Sans
  • 字段文本大小:18px
  • 字段字母间距:2px
  • 字段行高:2em

古腾堡 Divi 电子邮件选项

标题

更新标题文本设置如下:

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

古腾堡 Divi 电子邮件选项

按钮

对于按钮,更新以下内容:

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

古腾堡 Divi 电子邮件选项

填充

最后一次触摸,添加以下填充:

  • 填充:左侧 5%,右侧 5%

古腾堡 Divi 电子邮件选项

最后结果

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

古腾堡 Divi 电子邮件选项

古腾堡 Divi 电子邮件选项

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

古腾堡 Divi 电子邮件选项

最后的想法

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

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

干杯!

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