如何创建全屏、透明或全宽 Bloom 选择加入表单

已发表: 2017-09-10

在今天的教程中，我们将向您展示如何使用 Bloom 创建全屏、透明和全宽的选择加入表单——一个帮助您向网站添加选择加入表单的插件。我们将逐步指导您完成设计和设置两个示例选择加入表单的过程。通过仔细阅读这篇文章，您将能够自己制作透明的选择加入表格，并在任何安装了 Bloom 插件的网站上使用它——无论是您自己的网站还是客户的网站。

在您的网站上拥有一个或多个选择加入表单不仅可以帮助您与访问者保持联系，还可以帮助您与他们互动。由于它带来了以结果为导向的数据，现在很难遇到一个没有选择加入表格的网站。通过在正确的时间和地点获得访问者的电子邮件地址，您将更接近了解他们并使他们成为忠实的客户和/或访问者。

但是，如果您不想使用标准的选择加入表单，您可以选择全屏、透明或全宽的选择加入表单。我们将提前向您展示这两个示例。

示例 1

示例 2

使用 Bloom 创建全屏和透明的选择加入表单：提示

Bloom 插件提供了多种可能性来设计您的选择加入表单并以最适合您和您的访问者的方式吸引您的观众。除了 Bloom 提供的现有选择加入模板之外，还有内置选项可以轻松创建自定义设计。您还可以添加自定义 CSS 代码以获得更高级的结果。

然而，当试图通过 CSS 代码对设计进行一些调整时，您应该记住一些事情，这样您就不会浪费时间试图使事情发挥作用。

首先激活选择加入表格

在设计选择加入表单时，“设计”选项卡顶部有一个预览按钮。这有助于您在设计时预览您正在制作的结果。虽然内置的设计更改也会在预览中自动更改，但这并不适用于 CSS 代码。如果您通过“设计”选项卡中的“自定义 CSS”字段进行某些更改，则其中一些更改可能不适用于预览表单，但适用于您网站上的选择加入表单。

这就是为什么您必须首先激活选择加入表单，然后将其应用于您的一个页面。为确保您的访问者在您仍在处理它时不会遇到选择加入表单，您可以在尚未与访问者共享的新页面上预览它。

（或者，当然，在登台/测试站点上。）

首先创建一个新页面并为其命名。您不必在该页面中放入任何内容；它必须存在。在设计选择加入表单时，请转到“显示设置”选项卡。将延迟时间设置为 1 秒，这样您就不必每次想要检查结果时都等待选择加入表单。

选择参加

向下滚动该选项卡，当您遇到“显示在”选项时，选择“页面”。选择“页面”后，您将看到网站上活动页面的列表。选择您最近创建的页面。确保仅在该页面上显示选择加入表单。

选择参加

根据您激活的表单进行更改

您对 CSS 代码所做的更改不适用于所有选择加入的表单；它们仅适用于您正在专门处理的选择加入表格。这就是为什么我们需要的一些类是独一无二的。

在这篇文章的后面，我们将向您展示如何为我们正在重新创建的示例做到这一点。

开始创建第一个示例

透明的选择加入表格

我们向您展示如何重新创建的第一个示例是上面打印屏幕中的示例。您可以看到选择加入表单似乎是全屏的。尽管看起来像这样，但我们只制作了一个透明的选择加入表单并更改了背景颜色。

添加选择加入表格

让我们开始向您的网站添加一个新的选择加入表单，方法是转到您的WordPress 仪表板 > Bloom > 单击右上角的“New Optin”> 选择“Pop up”。

键入表单的名称，然后在“设置”选项卡中选择您的电子邮件提供商。完成后，您可以转到“设计”选项卡。这是我们将在这篇文章中关注的主要选项卡。选择提供的模板之一并继续。对于我们正在制作的示例，我们选择行中的第一个。

选择参加

设计设置

当您在“设计”选项卡中预览表单而不进行任何修改时，您将看到以下选择加入表单：

选择参加

它看起来与结果看起来完全不同，但您也可以注意到选择加入表单的基础是相同的。

选择加入标题和消息

现在，为了让我们的选择加入表单看起来像我们上面展示的示例，首先对“设计”选项卡中的 Optin 标题和 Optin 消息的标准设计设置进行以下修改：

文字颜色：#FFFFFF
文字样式：粗体
文字方向：居中

选择参加

图像设置和选择样式

向下滚动相同的选项卡并对图像设置、Optin 样式和边框样式进行以下调整：

图像方向：无图像
背景颜色：透明
标题字体：Lato
正文字体：Lato
文字颜色：深色文字
角样式：方角
边框方向：顶部 + 底部边框
边框颜色：#FFFFFF
边框样式：虚线边框

选择参加

边框样式、表单设置和表单样式

继续向下滚动并对表单设置和表单样式进行以下修改：

形式方向：底部形式
名称字段：无名称字段
电子邮件文本：电子邮件
按钮文字：订阅！
表单字段方向：堆叠表单字段
表单字段角样式：圆角
表格文字颜色：浅色文字
表格背景颜色：透明
按钮颜色：#6a18a0
按钮文字颜色：浅色

选择参加

表单边缘样式

您必须对选择加入表单进行的最后一次手动更改是选择表单边缘样式，在这种情况下，它是一条直线。

自定义 CSS

最后，我们需要对表单进行一些 CSS 修改以将所有内容设置到位。将以下代码行复制并粘贴到自定义 CSS 字段中：

.et_bloom .et_bloom_popup:after{
background: -webkit-linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important;
background: -o-linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important;
background: -moz-linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important;
background: linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important; }

.et_bloom .et_bloom_form_container {
background-color: none !important;
background: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}

.et_bloom .et_bloom_form_container .et_bloom_form_content
{ background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_form_container .et_bloom_form_header .et_bloom_header_text_dark {
background: none !important;
}

.et_bloom .et_bloom_form_container.et_bloom_form_right {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container .et_bloom_form_header {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container h2 {
font-size: 50px !important;
text-shadow: -1px -1px 1px rgba(33,97,160,0.5), 2px 2px 1px rgba(33,97,160,0.5);
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container p {
font-size: 30px !important;
text-shadow: -1px -1px 1px rgba(33,97,160,0.5), 2px 2px 1px rgba(33,97,160,0.5);
}

.et_bloom .et_bloom_form_container.et_bloom_form_text_light .et_bloom_form_content input {
text-align: center !important;
color: #FFFFFF !important;
}

.et_bloom .et_bloom_bottom_stacked p.et_bloom_popup_input {
width: 50% !important;
margin-left: 25%;
}

.et_bloom .et_bloom_form_container.et_bloom_rounded button {
width: 50% !important;
margin-left: 25%;
}

.et_bloom .et_bloom_form_container .et_bloom_form_content {
padding: 0 0 40px 0 !important;
}

选择参加

根据您自己的 Bloom Opt-in 表单更改代码

在我们与您共享的代码中，您必须进行三处调整。一些 CSS 类仅适用于一种选择加入表单，这就是为什么我们需要知道我们正在处理哪种选择加入表单。您唯一需要做的就是将一个数字更改三遍：

选择参加

上面打印屏幕中突出显示部分末尾的数字是 6，因为它是该行中的第 6 个：

选择参加

因此，根据它在表单列表中的位置，您必须调整数字。

最后结果

如果您现在预览您的选择加入表单，您会注意到所有修改都已完成，您的选择加入表单如下所示：

选择参加

显示设置

您现在可以转到“显示”设置并进行所需的修改以设置您的 Bloom 选择加入表单。我们不打算深入细节，因为这篇文章将只处理这些选择加入表单的设计部分。

开始创建第二个示例

选择参加

我们将向您展示的下一个示例不是全屏而是全角。为了演示我们如何实现结果，我们将使用与前一个示例相同的选择加入表单，但对其进行一些小的更改并添加不同的 CSS 代码。

设计设置

在内置的设计设置中，我们只需要做三件不同的事情。记住; 我们正在使用我们在上一个示例中创建的选择加入表单。除了我们将要提到的三件事外，与第一个示例相同的内置设置也适用。您要做的第一件事是将边界方向设置为“无边界”。

向下滚动并为表单文本颜色选择“深色文本”，并使用“#724501”作为按钮颜色。

选择参加

自定义 CSS

最后，我们需要向自定义 CSS 框添加一些 CSS 代码行：

@media only screen and (min-width: 981px){ 
.et_bloom .et_bloom_popup:after{ 
margin-top: 12% !important; 
height: 50% !important; 
background: url(""); 
border-top: 3px solid #b29470 !important; border-bottom: 3px solid #b29470 !important; 
box-shadow: 0px 1px 30px 0px rgba(46, 50, 50, 0.92); 
-webkit-box-shadow: 0px 1px 30px 0px rgba(46, 50, 50, 0.92); 
-moz-box-shadow: 0px 1px 30px 0px rgba(46, 50, 50, 0.92); 
}
.et_bloom .et_bloom_form_container .et_bloom_close_button {
right: -250px !important;
top: -20% !important;
}}

@media only screen and (max-width: 981px){
.et_bloom .et_bloom_popup:after{
background: url("");
} }

.et_bloom .et_bloom_form_container .et_bloom_popup_input {
background: #FFFFFF !important;
}

.et_bloom .et_bloom_form_container {
background-color: none !important;
background: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}

.et_bloom .et_bloom_form_container .et_bloom_form_content {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_form_container .et_bloom_form_header .et_bloom_header_text_dark {
background: none !important;
}

.et_bloom .et_bloom_form_container.et_bloom_form_right {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container .et_bloom_form_header {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container h2 {
font-size: 50px !important;
text-shadow: -1px -1px 1px rgba(114,69,1,0.5), 2px 2px 1px rgba(114,69,1,0.5);
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container p {
font-size: 30px !important;
text-shadow: -1px -1px 1px rgba(114,69,1,0.5), 2px 2px 1px rgba(114,69,1,0.5);
}

.et_bloom .et_bloom_form_container.et_bloom_form_text_dark .et_bloom_form_content input {
text-align: center !important;
color: #FFFFFF !important;
}

.et_bloom .et_bloom_bottom_stacked p.et_bloom_popup_input {
width: 50% !important; margin-left: 25%;
}

.et_bloom .et_bloom_form_container.et_bloom_rounded button {
width: 50% !important;
margin-left: 25%;
}

.et_bloom .et_bloom_form_container .et_bloom_form_content {
padding: 0 0 40px 0 !important;
}

选择参加

替换背景图像

您需要做的最后一件事是替换 wp-content 文件夹或其他地方的其中一个 URL 正在使用的背景图像。在下面的打印屏幕中标记的第一个 URL 适用于台式机，第二个适用于平板电脑和手机。

选择参加

最后结果

你完成了！您的第二个选择加入表格现在应如下所示：

选择参加

最后的想法

使用bloom制作精美的选择加入表单的可能性是无穷无尽的。我们在这篇文章中向您展示的制作方法只是您可以获得多少创意的一个例子。如果您有任何问题或建议，请随时在下面的评论部分发表评论！

请务必订阅我们的电子邮件通讯和 YouTube 频道，这样您就不会错过重大公告、有用提示或 Divi 免费赠品！