如何在 Divi 中创建一个吸引注意力的粘性电子邮件选项
已发表: 2020-09-30Divi 的粘性位置选项允许您使页面上的任何元素具有粘性。 这允许您在用户向下滚动页面时以特定间隔固定页面上的元素，以便它们保持可见时间更长。 对于你的博主来说，在你的帖子模板中添加一个粘性电子邮件选择加入是很有意义的，以便巧妙而有效地将这个重要的表格放在最前面。
在本教程中，我们将向您展示如何向您的 Divi 博客帖子模板添加粘性电子邮件选择加入，以吸引更多关注，并希望吸引更多潜在客户。 我们甚至会向您展示如何为粘性电子邮件选择添加弹出悬停效果！
让我们开始吧！
抢先看
这是我们将在本教程中构建的设计的快速浏览。
免费下载粘性电子邮件 Optin 帖子模板
要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
免费下载
加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。
您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！
如何将带有粘性电子邮件选项的帖子模板上传到您的网站
要上传模板，请导航到 WordPress 网站后端的 Divi Theme Builder。
然后，在右上角，您会看到一个带有两个箭头的图标。 单击该图标。
导航到导入选项卡，上传您可以在本文中下载的 JSON 文件，然后单击“导入 Divi 主题生成器模板”。
上传文件后，您会注意到一个新模板，其中包含已分配给所有帖子的新正文区域。 一旦您希望激活模板，请立即保存 Divi Theme Builder 更改。
让我们进入教程，好吗？
第 1 部分：导入预制博客帖子模板
在本教程中，我们将使用 Divi 商业顾问布局包的博客文章模板，您可以从此博客文章下载。
下载 zip 文件后，您需要解压缩它并将文件导入 Divi Theme Builder。
这是如何做到的……
- 导航到 Divi > Theme Builder。
- 单击右上角的便携性图标。
- 在可移植性弹出窗口中选择导入选项卡。
- 从您下载的文件中选择 json 文件。
- 单击导入按钮。
第 2 部分：将粘性电子邮件选项添加到模板
导入 JSON 文件后，单击编辑图标以编辑自定义正文模板布局。
在帖子模板布局的底部，您会找到带有电子邮件选择加入表单的部分，我们将用于粘性电子邮件选择加入。
对于此示例，我们希望电子邮件选择加入的粘性位置位于某个部分，以便用户在滚动到具有粘性电子邮件选择加入的部分之前不会看到电子邮件选择加入。 但是，由于电子邮件选择加入在其自己的部分中，因此电子邮件选择加入将没有足够的移动空间。 因此，我们需要将其带入上面包含评论部分的部分，以便选择加入的电子邮件将悬停在该部分上，然后再停留在其原始位置。
在上面的部分添加新行
为此，请直接在包含评论模块的行下方创建一个新的单列行。
添加行样式
然后打开新行的设置，添加背景色如下：
- 背景颜色：#282828
在设计选项卡下，更新行的以下大小和间距：
- 宽度：100%
- 最大宽度：100%
- 边距：15vw 顶部
- 填充：0px 顶部，0px 底部
将电子邮件选择加入新行
行样式到位后，将底部的电子邮件选择加入您刚刚创建的新行。
删除底部部分（我们不再需要它了）。
使用粘性位置更新电子邮件选择加入
然后现在在新行内打开电子邮件选择加入的设置，并更新棒位置选项，如下所示：
- 粘性位置：粘在底部
- 最高粘性限制：部分
这将导致电子邮件选择加入在滚动浏览该部分时停留在浏览器窗口的底部，然后再停留在其父行中。
更新电子邮件选择加入样式
在设计选项卡下，更新电子邮件选择加入的布局，如下所示：
- 布局：身体在顶部，形式在底部
然后更新以下样式：
- 标题文字大小：32px
- 最大宽度：600px
- 模块对齐：居中
然后将动画样式设置为无。
结果
此时，我们可以通过在另一个浏览器窗口中查看帖子来查看结果。
添加粘性位置样式
当电子邮件选择加入处于粘性位置时，我们可以向模块添加仅适用于粘性状态的特定样式。 这允许我们添加不同的配色方案来抵消白色背景，使其更加突出。
要为粘性状态添加不同的背景颜色，请打开电子邮件选择加入设置并选择背景选项旁边的缩略图图标（粘性图标）。 然后单击粘性选项卡并添加以下背景颜色：
- 背景颜色（粘性）：#282828
继续相同的过程，为设计选项卡下的以下选项添加粘性样式：
- 标题文字颜色（粘性）：#ffffff
- 正文颜色（粘性）：#ffffff
- 最大宽度（粘性）：500px
- 填充（粘性）：顶部 18 像素，底部 30 像素，左侧 30 像素，右侧 30 像素
结果
现在让我们在实时帖子中查看结果。
将悬停弹出效果添加到粘性电子邮件选择中
要在粘性电子邮件选择加入上添加悬停弹出效果，请打开电子邮件选择加入设置，并按如下方式更新棒转换翻译：
- Transform Translate Y 轴（粘性）：85%
这将使电子邮件选择向下（在视口外）降低其自身高度的 85%，暴露足够的电子邮件选择，以便用户可以将鼠标悬停在标题上。
然后将悬停状态添加到变换选项，以便变换平移位置在悬停时返回其原始位置：
- 变换平移 Y 轴（悬停）：0%
结果
这是最终结果。
最终结果
这是我们构建的粘性标题的三个版本。
最后的想法
值得庆幸的是，Divi 可以轻松地向您的网站添加粘性电子邮件选项。 这可以腾出更多时间来调整粘性元素的设计，以采用更独特的方式来显示表单。 希望这项技术能在即将到来的博客项目中为您提供良好的服务。
我期待在评论中收到您的来信。
干杯!