您可以使用 Divi 的电子邮件选择加入模块创建 5 种电子邮件选择加入设计

已发表: 2019-01-14

我们都喜欢我们电子邮件列表的新订阅者。获得新订阅者的主要方法之一是为访问者提供精心设计的电子邮件选择加入表格。这就是为什么在本教程中，我将向您展示如何使用 Divi 电子邮件选择加入模块实现五种不同的设计，以帮助激发您对这个强大而灵活的模块的可能性的想象力。

抢先看

这是我们今天将要处理的五个 Divi 电子邮件选择加入模块设计的预览。

#1 Shadow Stacks 选择加入

divi 电子邮件选择加入模块

开始设计 #1

#2 大而小的选择加入

divi 电子邮件选择加入模块

开始设计#2

#3 瘦身选择加入

divi 电子邮件选择加入模块

开始设计 #3

#4 图书优惠选择加入

divi 电子邮件选择加入模块

开始设计 #4

#5 剪切框选择加入

divi 电子邮件选择加入模块

开始设计 #5

你需要什么开始

订阅我们的 YouTube 频道

对于本教程，您只需要 Divi。我们将从头开始构建每一个，因此不需要预制布局。但是，我将使用我们的一些布局包中的一些图像，但您可以根据需要使用自己的图像。

此外，重要的是要知道，在您为电子邮件选择加入模块分配电子邮件提供商/列表之前，您将无法在实时站点上看到选择加入表单字段。您可以在电子邮件帐户下的电子邮件选择设置中执行此操作。

divi 电子邮件选择加入模块

现在让我们来看看这些设计！

#1 Shadow Stacks 选择加入

divi 电子邮件选择加入模块

此设计为 Divi 电子邮件选择加入模块添加了两个框阴影，以实现独特的堆叠效果，使表单弹出。第一个框阴影被添加到电子邮件选择加入模块，第二个框阴影被添加到具有自定义大小和边框的行中以使其工作。

这是它的完成方式。

首先创建一个包含一列行的新部分，并将电子邮件选择加入模块添加到该行。

打开电子邮件选择加入设置并更新以下内容：

背景颜色：#1a0a38
布局：身体在顶部，表格在底部
字段圆角：0px
文字方向：居中
标题字体粗细：轻
标题文字大小：36px
按钮文字颜色：#ffffff
按钮背景颜色：#00ac69
按钮边框宽度：0px
按钮边框半径：0px
自定义填充：3vw 顶部，3vw 底部，5vw 左，5vw 右

divi 电子邮件选择加入模块

现在让我们在电子邮件选择加入模块后面添加我们的第一个框阴影层。

盒子阴影：见截图
框阴影水平位置：25px
框阴影垂直位置：-25px
阴影颜色：rgba(26,10,56,0.82)

divi 电子邮件选择加入模块

现在让我们添加一小段自定义 CSS 以去除默认情况下添加到表单的左侧填充。转到高级选项卡并在选择加入表单下添加以下 CSS。

padding-left: 0px !important;

divi 电子邮件选择加入模块

这负责电子邮件选择加入模块设置。现在让我们编辑我们的行。打开行设置并更新以下内容：

自定义宽度：600px
自定义填充：顶部 25 像素，底部 0 像素，右侧 25 像素
底部边框宽度：25px
底部边框颜色：rgba(0,0,0,0)
左边框宽度：25px
左边框颜色：rgba(0,0,0,0)

divi 电子邮件选择加入模块

现在我们可以将框阴影添加到行中。

盒子阴影：见截图
框阴影水平位置：50px
框阴影垂直位置：-50px
框阴影传播强度：-25px
阴影颜色：rgba(26,10,56,0.55)

divi 电子邮件选择加入模块

现在让我们看看最终的设计。

divi 电子邮件选择加入模块

#2 大而小的选择加入

divi 电子邮件选择加入模块

这种电子邮件选择加入设计是最小的、干净的、大的。表单字段随浏览器的大小缩放，因此在所有设备上看起来都很棒。并且它不会太大以迫使用户滚动。

这是如何做到的。

首先创建一个包含一列行的新部分，并将电子邮件选择加入模块添加到该行。

打开电子邮件选择加入设置并更新内容以包括您的标题和页脚文本。

divi 电子邮件选择加入模块

然后用深色或图像更新背景：

背景颜色：#121212
背景图片：这是可选的。我正在使用 Podcast Layout Pack 中的一个

在我们继续使用设计选项卡进行更多自定义之前，我们需要为我们将添加的大型表单元素腾出空间。为此，请转到行设置并更新以下内容：

自定义宽度：100%

提示：使用 100% 自定义宽度是确保您的设计在移动设备上没有任何左右边距的好方法。如果您使用“制作全宽”选项，您的最大宽度将为 89%，因此您在移动设备上仍然有边距。

divi 电子邮件选择加入模块

现在跳回电子邮件选择加入模块设置并更新以下设计：

布局：身体在顶部，表格在底部

表单字段背景颜色：rgba(0,0,0,0)
字段圆角：0px
字段底部边框宽度：2px
字段底部边框颜色：#ffffff

文字方向：居中

标题字体：Lato
标题字体粗细：轻
标题字体样式：TT
标题文字大小：4vw
标题行高度：1em

字段文本颜色：#ffffff
字段字体：Lato
字段字体重量：轻
字段文本大小：3.5vw
字段字母间距：0.1em
场线高度：1.3em

正文字母间距：0.5em

按钮文字大小：4vw
按钮边框半径：0px
按钮字母间距：0.1em
按钮字体：Lato
字体粗细：轻
自定义填充：顶部 10vw，底部 10vw，左侧 10vw，右侧 10vw

divi 电子邮件选择加入模块

注意字体大小的 vw 长度单位与行高和字母间距的 em 长度单位的结合使用。这允许文本和设计在调整浏览器时无缝缩放。

最后一步是包含一些自定义 CSS 片段来完善设计。转到高级选项卡并在选择加入表单字段下添加以下自定义 CSS：

font-size: 3.5vw;

这将允许键入时文本的大小与表单字段中的占位符文本相匹配。

然后让我们在按钮上方添加一些自定义边距，给它一点喘息的空间。在订阅按钮下添加以下内容：

margin-top: 3.5vw;

divi 电子邮件选择加入模块

现在让我们看看最终的设计。

divi 电子邮件选择加入模块

#3 瘦身选择加入

divi 电子邮件选择加入模块

对于希望在帖子或登录页面上节省一些垂直空间的公司和博客来说，下一个设计肯定会成为一种流行的解决方案。尽管 Divi 的 Email Opt-in 模块最适合更传统的垂直表单，但您实际上可以仅使用一小段 CSS 将表单转换为细长的水平表单。

这是如何做到的。

创建一个包含一列行的新部分，并将电子邮件选择加入模块添加到该行。

打开电子邮件选择加入设置并更新内容以包含标题但不包含其他内容。

然后使用背景和按钮颜色更新设计，如下所示：

背景颜色：#54677d
布局：身体在顶部，形式在底部
文字方向：居中
按钮背景颜色：#b0c94f
按钮边框宽度：0px

divi 电子邮件选择加入模块

现在是自定义 CSS 的时候了。由于我们只希望在桌面上（而不是在移动设备上）使用瘦表单设计，因此我们将使用自定义 CSS ID 将 CSS 添加到页面（在页面设置下）以定位表单样式。

为此，请转到高级选项卡并为选择加入模块提供自定义 CSS ID。

CSS ID：瘦

这将用于使用我们将添加到页面的外部 CSS 来定位此表单。

现在打开 Divi Builder 页面设置并在“高级”选项卡下添加以下 CSS。

@media (min-width: 980px){
#skinny.et_pb_newsletter .et_pb_newsletter_fields {
  flex-wrap: nowrap !important;
}
#skinny.et_pb_newsletter .et_pb_newsletter_fields>* {
  flex-basis: 23%;
}
}

#skinny .et_pb_newsletter_form {
  padding-left: 0px;
}

divi 电子邮件选择加入模块

由于 Divi 已经在后端使用 flex 来设置表单的样式，因此这个 CSS 去掉了导致表单字段垂直对齐的 flex-wrap 属性。结果是表单字段的水平布局。将 flex-basis 属性调整为 23% 基本上可以设置每个表单字段的宽度。并且因为我们在媒体查询中添加了 CSS，设计只会发生在桌面上，表单的默认布局显示在移动设备上。

这是最终的设计。

divi 电子邮件选择加入模块