Divi教程：如何使用Email Optin模块

使用由 WordPress主题 迪维。 该模块支持集成 MailChimp , Aweber et Feedburner的.

如何在页面上添加新闻订阅模块

在您可以将电子邮件模块添加到您的页面之前，您必须首先跳转到 Divi Builder。 一旦 Divi主题 安装在您的网站上，您会注意到一个按钮 使用Divi Builder 创建新页面时，在帖子编辑器上方。 单击此按钮以激活Divi Builder，并访问所有Divi Builder模块。 然后点击按钮 使用Visual Builder 以可视模式启动发电机。 您也可以点击按钮 启用Visual Builder 如果您已连接到WordPress仪表板，则在前台浏览网站时。

进入Visual Builder后，可以单击灰色加号按钮将新模块添加到页面。 新模块只能添加到行内。 如果要开始新页面，请记住先向页面添加一行。 我们有使用Divi的line和section元素的出色教程。

在模块列表中找到optin电子邮件模块，然后单击它以将其添加到页面中。 模块列表是可搜索的，这意味着您也可以输入单词“ email optin”，然后单击“ Enter”以自动搜索并添加optin模块！ 添加模块后，模块选项列表将为您打招呼。 这些选项分为三个主要组： 包装内容 , 概念 et 先进 .

配置电子邮件帐户

在使用optin电子邮件模块之前，必须首先将其连接到电子邮件提供商。 可以在模块设置中添加和管理这些提供程序。 添加新的电子邮件提供程序后，每次您在网站上编辑电子邮件模块时，它将显示在模块设置中。

要添加新的电子邮件提供商，请首先从列表中选择您的电子邮件提供商 选择供应商 。 然后点击按钮 添加 将该模块链接到您的电子邮件帐户。 Divi当前支持三个提供程序：MailChimp，AWeber和Feedburner。

链接您的AWeber帐户

在将此模块与AWeber结合使用之前，必须首先连接您的AWeber帐户。 为此，请从提供程序列表中选择AWeber，然后单击“添加”按钮以开始该过程。 单击“添加”按钮后，将带您到一个页面，提示您登录AWeber帐户。 登录以生成您的API密钥。

然后将密钥复制并粘贴到字段中 API密钥 在模块设置中，然后单击按钮 发送 .

您的帐户现已链接，您可以从下拉菜单中选择电子邮件列表 AWeber名单 .

链接您的MailChimp帐户

在将该模块与MailChimp结合使用之前，必须首先连接MailChimp帐户。 为此，请从提供程序列表中选择MailChimp，然后单击“添加”。 单击添加按钮后，一个字段 API密钥 会出现。 将您的API密钥复制并粘贴到该字段中，然后按按钮 发送 。 您的帐户现已链接，您可以从下拉菜单中选择电子邮件列表 MailChimp列表 .

您可以在MailChimp.com帐户中找到MailChimp API密钥。 登录并进入您的个人资料页面。 看类别 演员 并找到链接 API密钥 。 这里有一些 附加信息 有关如何找到您的API密钥的信息。

用例示例：将订阅帖子添加到博客帖子的底部

一个常见的地方添加一个 形式 电子邮件选择就在您的消息内容下方。
对于这个快速的示例，我将向您展示使用Visual Builder在博客文章下插入Optin电子邮件模块并为其设置样式是多么容易。

使用Visual Builder，在包含帖子内容的部分下方添加一个带有1/2列（2列）行的标准部分。

由于此示例将与optin一起作为电子书提供，因此请在左侧栏中添加图片模块，然后上传该书的图片。 将图像对齐方式设置为“居中”，并将最大图像宽度设置为300px。

然后将“优化电子邮件”模块添加到右列。

如下更新更新电子邮件设置：

内容选项

标题：“新订阅者可以获得我的电子书的免费副本”按钮文本：“订阅”内容：“一个引人入胜的故事，将使您排在座位边缘。” 服务提供商：[选择服务提供商] 
选择列表或流标题

德观念选项

字段背景颜色：＃f1f1f1背景颜色：#ffffff焦点边框颜色：是边框颜色：＃02b875文本颜色：深色文本方向：中心页眉字体：不带标题的PT字体大小：35px头高：1.3em主体字体大小：18px自定义填充：向右20px，向左20px样式使用“自定义”按钮：是文本大小按钮：26px文本按钮颜色： #ffffff按钮背景颜色：＃02b875按钮边框宽度：2按钮边框颜色：＃02b875按钮字母间距：1px添加按钮图标：是按钮图标：[添加图标]

就这样。 如果您想改善您的订阅表格，可以使用 Bloom ，Divi电子邮件选项和潜在客户生成插件，这些插件专门设计用于帮助您增加邮件列表。

Optin电子邮件模块内容选项

在内容选项卡中，您将找到模块的所有内容元素，例如文本，图像和图标。 所有控制 什么 出现在模块中的内容将始终在此标签中找到。

标题

插入你的标题 形式 在这里注册。

按钮文本

在此处指定注册按钮文本。

包装内容

您可以在此字段中输入SignUp模块的内容。

服务提供商

在这里，您可以选择使用的邮件列表提供商。 该模块当前支持集成 MailChimp , Aweber et Feedburner的。 从列表中选择您的提供商，然后继续以下选项。

MailChimp列表

如果您选择 MailChimp 作为提供者，此选项将出现。 在这里，您可以选择MailChimp列表来添加客户。 如果您在此处看不到列表，则需要确保ePanel中已设置MailChimp API密钥，并且MailChimp帐户上至少有一个列表。 如果您添加了新列表，但未在此处显示，请在ePanel中启用“重新生成MailChimp列表”选项。 列表重新生成后，请不要忘记停用它。

Aweber的房源

如果您已选择 Aweber 作为提供者，此选项将出现。 在这里，您可以选择Aweber列表来添加客户。 如果您在此处未找到列表，则需要确保在ePanel中正确配置了Aweber，并且Aweber帐户上至少有一个列表。 如果添加了新列表，但未在此处显示，请激活ePanel中的“重新生成Aweber列表”选项。 列表重新生成后，请不要忘记停用它。

Feedburner标题

如果您已选择 Feedburner的 作为提供者，此选项将出现。 这是您识别Feedburner帐户的方式。 您需要输入供稿标题， 可以在这里找到 .

使用背景颜色

如果启用，则背景色将应用于模块。 如果启用了背景色，则会在模块内部添加其他填充，以将文本内容与模块的可见边缘分开。 如果未打开背景色，则模块背景变为透明，多余的填充物将被删除。

背景颜色

您可以使用颜色选择器使您的题词拼贴成所需的颜色。 选择与该节的背景相同的颜色以创建宽度或无边界效果的外观。

行政标签

这将更改构造函数中的模块标签，以便于识别。 在Visual Builder中使用WireFrame视图时，这些标签将出现在Divi Builder界面的模块块中。

电子邮件Optin部分设计

在“设计”选项卡中，您将找到模块的所有样式选项，例如字体，颜色，大小和间距。 这是用于更改模块外观的选项卡。 每个Divi模块都有一长串的设计设置，可用于更改任何内容。

表单字段背景颜色

Le 形式 optin 电子邮件包含两个用户名和密码输入字段。 您可以使用此设置来调整这些字段的背景颜色。

表单字段的文本颜色

optin电子邮件表单包含两个用于输入用户名和密码的输入字段。 您可以使用此设置来调整这些字段的文本颜色。 如果您已经调整了表单字段的背景颜色，则还可以调整文本颜色以确保和谐的颜色关系。

背景颜色

当使用访客的鼠标对输入字段进行聚焦时，颜色会更改以清楚地指示哪个字段处于活动状态。 在这里，您可以定义聚焦字段的背景颜色。

文本颜色在焦点

当使用访客的鼠标对输入字段进行聚焦时，颜色会更改以清楚地指示哪个字段处于活动状态。 在这里，您可以定义焦点字段的文本颜色。

使用焦点边框颜色

如果要在焦点对准输入字段时向其添加边框，则可以启用此选项。

焦点边框的颜色

通过使用此设置，可以更改出现在焦点输入字段上的边框的颜色。

文字颜色

如果背景颜色为深色，则文本颜色应设置为“浅色”。 另一方面，如果背景色为浅色，则文本颜色应设置为“深色”。

文字方向

通过此下拉菜单，您可以指定文本的方向，使其左对齐，居中或右对齐。

标题字体

您可以通过从下拉菜单中选择所需的字体来更改标题文本的字体。 Divi随附了数十种由Google字体支持的出色字体。 默认情况下，Divi对页面上的所有文本使用Open Sans字体。 您还可以使用粗体，斜体，大写字母和下划线选项来自定义文本样式。

标题字体大小

您可以在此处调整标题文本的大小。 您可以拖动范围滑块以增大或减小文本的大小，或者直接在滑块右侧的输入字段中输入所需的文本大小值。 输入字段支持不同的度量单位，这意味着您可以根据尺寸值输入“ px”或“ em”以更改其单位类型。

标题文字颜色

默认情况下，Divi中的所有文本颜色都显示为白色或深灰色。 如果要更改标题文本的颜色，请使用此选项从颜色选择器中选择所需的颜色。

标题字母间距

字母间距会影响每个字母之间的间距。 如果要增加标题文本中每个字母之间的间隔，请使用范围滑块调整间隔，或在滑块右侧的输入字段中输入所需的间隔大小。 输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

标题行高度

行高会影响标题文本每一行之间的间距。如果要增加每一行之间的间距，请使用范围滑块调整间距或在光标右侧的输入字段。 输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

正文字体

您可以通过从下拉菜单中选择所需的字体来更改您的字体。 Divi随附了数十种由Google字体支持的出色字体。 默认情况下，Divi对页面上的所有文本使用Open Sans字体。 您还可以使用粗体，斜体，大写字母和下划线选项来自定义文本样式。

正文字体大小

在这里您可以调整您的正文文本大小。 您可以拖动范围滑块以增大或减小文本的大小，或者直接在滑块右侧的输入字段中输入所需的文本大小值。 输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

正文文字颜色

默认情况下，Divi中的所有文本颜色都显示为白色或深灰色。 如果要更改文本的颜色，请使用此选项从颜色选择器中选择所需的颜色。

正文字母的间距

字母间距会影响每个字母之间的间距。 如果要增加文本中每个字母之间的间距，请使用范围滑块调整间距或在滑块右侧的输入字段中输入所需的间距大小。 输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

身体线的高度

行高会影响正文中每一行之间的间距如果要增加每一行之间的间距，请使用范围滑块调整间距或在输入字段中输入所需的间距大小位于光标右侧。 输入字段支持不同的度量单位，这意味着您可以根据尺寸值输入“ px”或“ em”以更改其单位类型。

使用边框

启用此选项将在模块周围放置边框。 可以使用以下条件参数来自定义此边框。

边界的颜色

此选项会影响边框的颜色。 从颜色选择器中选择一种自定义颜色，以将其应用于边框。

边界的宽度

默认情况下，边框为1像素宽。 您可以通过拖动范围滑块或在滑块右侧的输入字段中输入自定义值来增加此值。 支持自定义度量单位，这意味着您可以将默认单位从“ px”更改为em，vh，vw等。

边框样式

边框支持八种不同的样式：实心，点缀，点缀，双点，凹槽，山脊，覆盖和开始。 从下拉菜单中选择所需的样式，以将其应用于边框。

自订保证金

边距是添加到模块外部，模块与模块上方，下方或左侧和右侧之间的下一个元素之间的空间。 您可以将自定义边距值添加到模块的四个侧面中的任何一个。 要删除自定义边距，请从输入字段中删除添加的值。 默认情况下，这些值以像素为单位进行度量，但是您可以在输入字段中输入自定义度量单位。

自定义填充

填充是在模块内部及其边缘与内部元素之间添加的空间。 您可以将自定义填充值添加到模块的四个侧面中的任何一个。 要删除自定义边距，请从输入字段中删除添加的值。 默认情况下，这些值以像素为单位进行度量，但是您可以在输入字段中输入自定义度量单位。

对按钮使用自定义样式

启用此选项会显示各种按钮自定义设置，您可以使用这些设置来更改模块按钮的外观。

按钮文字大小

此设置可用于增加或减小按钮中文本的大小。 该按钮会随着文本大小的增加和减少而适应。

按钮文字颜色

默认情况下，按钮采用主题定制器中定义的主题的强调色。 此选项使您可以为该模块的按钮分配自定义文本颜色。 使用颜色选择器选择自定义颜色以更改按钮颜色。

按钮背景颜色

默认情况下，按钮具有透明的背景色。 可以通过从颜色选择器中选择所需的背景颜色来更改此设置。

边框宽度按钮

默认情况下，所有Divi按钮的边框均为2px。 使用此设置可以增加或减少边框。 输入0即可删除边框。

按钮边框颜色

默认情况下，按钮边框采用主题自定义程序中定义的主题的强调色。 此选项使您可以为该模块的按钮分配自定义边框颜色。 使用颜色选择器选择自定义颜色，以更改按钮边框的颜色。

按钮边框半径

边框的半径会影响按钮角的圆度。 默认情况下，Divi中的按钮具有较小的边框半径，该边框将角四舍五入3个像素。 您可以将该值减小为0以创建一个方形按钮，或者显着增大该值以创建具有圆形边缘的按钮。

按钮字母的间距

字母间距会影响每个字母之间的间距。 如果要增加按钮文本中每个字母之间的间隔，请使用范围滑块调整间隔或在滑块右侧的输入字段中输入所需的间隔大小。 输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

按钮字体

您可以通过从下拉菜单中选择所需的字体来更改按钮文本的字体。 Divi随附了数十种由Google字体支持的出色字体。 默认情况下，Divi对页面上的所有文本使用Open Sans字体。 您还可以使用粗体，斜体，大写字母和下划线选项来自定义文本样式。

添加按钮图标

禁用后，此设置将从您的按钮中删除图标。 默认情况下，所有Divi按钮都将在悬停时显示一个箭头图标。

按钮图示

如果启用了图标，则可以使用此设置选择要在按钮中使用的图标。 Divi有不同的图标可供选择。

颜色图标按钮

调整此设置将更改按钮上显示的图标的颜色。 默认情况下，图标颜色与按钮文本颜色相同，但是此设置可让您独立调整颜色。

图标放置按钮

您可以选择在按钮的左侧或右侧显示按钮的图标。

将鼠标悬停在按钮上时仅显示图标

默认情况下，仅在悬停时显示按钮图标。 如果您希望图标始终出现，请关闭此设置。

按钮悬停文本颜色

当访客的鼠标悬停在按钮上时，将使用此颜色。 颜色将与之前设置中定义的基础颜色不同。

悬停按钮背景颜色

当访客的鼠标悬停在按钮上时，将使用此颜色。 颜色将与之前设置中定义的基础颜色不同。

颜色悬停边框按钮

当访客的鼠标悬停在按钮上时，将使用此颜色。 颜色将与之前设置中定义的基础颜色不同。

悬停边框半径按钮

当访问者的鼠标悬停在按钮上时，将使用此值。 该值将不同于先前设置中定义的基值。

指向音符间距按钮

当访问者的鼠标悬停在按钮上时，将使用此值。 该值将不同于先前设置中定义的基值。

电子邮件优化高级选项

在高级选项卡上，您将找到经验丰富的Web设计人员可能会有用的选项，例如自定义CSS和HTML属性。 在这里，您可以将自定义CSS应用于模块的许多元素中的任何一个。 您还可以将自定义CSS类和ID应用于模块，该自定义CSS类和ID可用于在子主题的style.css文件中自定义模块。

CSS ID

输入用于此模块的可选CSS ID。 ID可用于创建自定义CSS样式或链接到页面的特定部分。

CSS类

输入用于此模块的可选CSS类。 CSS类可用于创建自定义CSS样式。 您可以添加多个类，以空格分隔。 这些类可以在Divi子主题中使用，也可以在使用以下方法添加到页面或网站的自定义CSS样式表中使用： 主题选项 Divi或Divi Builder页面的参数。

自定义CSS

自定义CSS也可以应用于模块和任何模块内部。 在“自定义CSS”部分中，您将找到一个文本字段，您可以在其中直接将自定义CSS样式表添加到每个元素。 这些设置中的CSS条目已经包装在样式标签中。 因此，只需输入用分号分隔的CSS规则即可。

能见度

此选项使您可以控制模块所在的设备。 您可以选择在平板电脑，智能手机或台式机上分别停用模块。 如果要在不同的设备上使用不同的模块，或者要通过从页面中删除某些元素来简化移动设计，这将很有用。

有关WordPress主题Divi的其他教程

• 5网站对餐厅使用迪维主题
• 如何在Divi WooCommerce产品上添加文字
• 如何更改Divi页面之间的菜单颜色
• 如何使用Divi个性化博客的网格
• 如何使用WordPress的作用迪维编辑
• 如何创建全屏Divi滑块
• 如何更改Divi页面之间菜单的颜色
• 您可能不了解Divi的功能
• 如何在WordPress上使用Divi Builder
• 如何使用Divi视频滚动模块
• 如何使用Divi Builder Flip模块
• 如何在Divi Builder上添加推荐模块
• 如何使用Divi文本模块
• 如何在Divi上创建滑块
• 如何编辑Divi用户角色
• 如何使用Divi社交媒体模块
• 如何在主题WordPress Divi上使用shop模块
• 如何使用Divi侧边栏模块
• 如何使用Divi Price表模块
• 如何使用Divi出版物的标题模块
• 如何添加Divi的视频模块
• 如何使用文章导航模块
• 如何使用Divi搜索模块
• 如何使用Divi钱包模块
• 如何在Divi Builder上使用person模块
• 如何使用带有Divi过滤器的钱包模块
• 如何使用全宽滑块模块
• 如何使用Divi Builder图像模块
• 如何使用Divi Builder的全宽导航模块
• 如何使用图库模块
• 如何使用Divi Builder全宽模块
• 如何使用Divi全宽度组合模块
• 如何使用Divi全角标题模块
• 如何使用Divi计数器模块
• 如何在Divi Builder上使用文章滑块
• 如何使用Divi Email Optin模块

[vc_row center_row =“ yes”] [vc_column宽度=“ 1/2”] [vcex_button target =“空白” layout =“展开” align =“ center” font_family =“ Raleway” font_weight =“ 700”样式=“ flat” custom_background =“＃18b69d” custom_hover_background =“＃118d7a” custom_color =“ #ffffff” custom_hover_color =“ #ffffff” icon_right =“ fa fa-download”]下载主题[/ vcex_button] [/ vc_column] [»vc_column] =» 1/2英寸] [vcex_button url =“ https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target =“ blank” layout =“ expanded” align =“ center” font_family =“ Raleway” font_weight =“ 700”样式=“ flat” custom_background =“＃c4226e” custom_hover_background =“＃8d184f” custom_color =“ #ffffff” custom_hover_color =“ #ffffff” icon_right =“ fa fa-download”]下载模板DIVI [/ vcex_button] [/ vc_column] [/ vc_row]