如何在单击按钮时弹出 Bloom 选择加入表单

现在很难想象没有选择加入表格的互联网。 我们在我们的网站上使用它们主要有两个原因： 获得订阅者或产生潜在客户。

找到通过选择加入表格接近受众的正确方式可能是一个真正的挑战。 有些人想要安全地玩，不想让他们的访问者觉得他们正在用不需要的选择加入形式“入侵”他们的互联网泡沫。 这通常是人们选择在单击网站上的某个特定位置后出现的选择加入表单的时刻，或者我们如何称呼它； “点击触发”。

在今天的教程中，我们将向您展示如何在网站的一些最重要的部分中使用这些点击触发器。 一旦您设法包含点击触发选项，请不要忘记衡量它给您带来的结果，看看它是否有助于您取得进展。

单击后何时使用选择加入表单

您基本上可以使您网站上的任何内容触发选择加入表单。 但是在错误的地方使用它很快就会对你不利。 人们习惯于一直随机点击一个网站； 例如，当他们正在阅读某些东西时。 或者甚至只是在他们环顾四周时，他们也经常无目的地点击网站上的某个地方。

现在想象你是访客； 每次随机点击时，您可能会遇到意外的选择加入表格，这是由于您无目的地采取的行动。 这无疑会产生不良影响，因为在那个正确的时刻，当您访问该网站时，您会觉得自己根本无法控制。

不过，在人们自愿选择点击或不点击的地方（如按钮或行动号召）放置点击触发器选择加入表单是另一回事。 我们熟悉点击 CTA（号召性用语），因此它不会吓到我们。 我们故意选择看看下一步是什么。 如果我们对 CTA 背后的内容不感兴趣，我们就不会点击。 但如果我们愿意，我们可以。 当最终弹出选择加入表单并增加他们实际注册您的时事通讯的机会时，访问者拥有的这种“选择”使他们感到更加轻松。

如何在单击按钮时弹出 Bloom 选择加入表单

订阅我们的 YouTube 频道

创建您的选择加入表格

让人们点击你的 CTA 是一种艺术形式。 在点击您的 CTA 后，通过选择加入表格让人们订阅或成为潜在客户是对艺术的欣赏。 您必须尝试并找到接近目标受众的正确方法，以便最终让双方都满意。

我们将向您展示如何为您网站上的两个不同按钮创建点击触发器，您可以从这种选择加入表单中受益； 按钮模块和全角标题按钮。 工作方式是一样的，但在不同的场景中看到它可能会帮助你理解其中的逻辑。 之后，您也可以将其用于其他模块。

现在，在我们向您展示如何将选择加入表单链接到 CTA 之前，我们将介绍选择加入表单的设置。 在这篇文章中，我们不会为您提供任何具体的设计，而只会提供逻辑。 需要进行一些设置才能确保点击触发器正常工作。

选择加入表格的类型

添加新的选择加入表单时，您将面临的第一个选择是您要使用的选择加入表单的类型。 要创建触发点击效果，您可以使用两种类型：弹出和飞入。您最有可能选择的一种是弹出。 但如果你想更微妙一点，你也可以使用飞入。

设置选项卡

首先在您创建的选择加入表单的“设置”选项卡中命名您的选择加入表单。 接下来，将您的表单连接到电子邮件提供商。 如果没有电子邮件提供商、帐户和电子邮件列表，表单将处于非活动状态。

设计选项卡

在“设计”选项卡中，您可以设置要使用的表单的样式。 在这篇文章中，我们不会这样做。 我们将选择一个没有修改的标准选择加入表格，只是为了看看它是否有效。 稍后，您可以始终返回到您创建的选择加入表单以进行更改。

显示设置选项卡

这是我们将选择加入表单链接到其中一个按钮的选项卡。 为确保结果有效，您必须确保允许选择加入表单显示在您希望其处理的页面上。 如果您打算在整个网站中使用相同的表单，您可以轻松地为所有内容启用表单，如下图所示。

此外，我们希望仅将选择加入表单用于点击触发器。 这就是为什么我们要禁用所有其他选项而只启用“点击触发”一个。 您将看到 CSS Selector 字段将立即出现。 在这篇文章的后面，我们将使用此字段将我们的按钮链接到我们正在创建的选择加入表单。 让此页面在您的选项卡中保持打开状态，以便您稍后立即访问。

让我们开始吧

尽管在不同模块中添加点击触发选择加入表单背后的逻辑是相同的，但我们将通过两个示例进行解释； 按钮模块和全角标题按钮。在不了解逻辑的情况下，您可以简单地按照本文中的步骤来实现。

但是，如果您希望点击触发器在下面说明之外的其他地方工作，则必须稍作修改。 唯一要改变的是我们使用的类，因为这个类总是不同的。 如果您想让这个点击触发器发生在您网站的任何其他部分，您只需按照我们将在下面显示的相同步骤操作，并根据您使用的内容更改 CSS 类。

将按钮模块连接到弹出的选择加入表单

我们将引导您完成的第一个示例是按钮模块。 为按钮模块创建点击触发器的好处在于其可能性是无限的。 您可以制作包含按钮模块的任何类型的部分或行，并根据需要获得尽可能多的创意。

不用再费力了，让我们开始为按钮创建一个点击触发器。 我们有两种方法可以做到这一点； 通过使用 CSS 类或创建分配给模块的 CSS ID。

通过使用 CSS 类

打开页面或创建您希望点击触发器在其中工作的页面。 接下来，添加一个按钮模块或打开您希望它工作的按钮的按钮模块设置。

转到“高级”选项卡并向下滚动。 单击 Main Element 字段并观察分配给按钮的 CSS 类出现。 复制 CSS 类，我们马上就需要它。

然后，转到您正在创建的选择加入表单的“显示设置”选项卡。 在上一部分中，我们已经向您展示了神奇之处。 我们启用了“点击触发”并禁用了提到的所有其他可能性。 在“Trick On Click”正下方，您必须粘贴以下行：

*.et_pb_button_0.et_pb_button.et_pb_module

如您所见，它只是一个“*”符号，后跟您在此步骤之前复制的类。

使用此方法时，您必须记住一件事； 同一页面中每个按钮的按钮 CSS 类都不同，但是只要您将按钮添加到另一个页面，它就会立即从 '0' 开始。 这意味着如果您的选择加入表单可用于所有页面和帖子，则每个页面上的每个第一个按钮模块都会触发选择加入表单。

如果您想避免这种情况，您可以使用通过 CSS ID 来触发点击。 但是如果你为整个模块分配一个特定的 CSS ID，实现它的最简单方法是通过 CSS 类。

您可以确定某个选择加入表单可以在您选择加入表单的“显示设置”中显示在哪些页面上。 通过这样做，您可以控制并确切知道在单击分配给它的按钮后选择加入表单将出现在哪些页面上。

通过使用 CSS ID

第二种方法是使用 CSS ID。 打开按钮模块，转到高级选项卡并为其指定一个 CSS ID。 在这种情况下，我们将使用“弹出”。

继续转到按钮模块的“内容”选项卡并编写“#”符号，后跟您想要的任何内容。 通过这样做，您将确保访问者在单击按钮时保持在页面上的同一位置。

继续，返回您的选择加入表单设置并将“a#popup”添加到“点击触发”字段。 你应该总是写“a#”，然后是你分配给按钮模块的 CSS ID。

a#popup

将全角标题按钮连接到选择加入表单

我们将向您展示如何执行点击触发选择加入表单的另一个示例是全角标题按钮。 我们在这里唯一的可能性是使用按钮 CSS 类。 我们无法通过 Divi 构建器为按钮分配 CSS ID。

通过使用 CSS 类

创建全角标题或打开全角标题，在其中添加单击触发选择加入表单。 转到全角标题的高级选项卡并向下滚动，直到遇到“按钮一”。 单击该字段并复制分配给按钮的 CSS 类。

然后，转到“内容”选项卡并在按钮 #1 的 URL 字段中键入“#”符号，后跟任何其他内容。

最后，转到您选择加入的“显示设置”选项卡，然后键入“*”符号，然后键入您复制的分配给按钮的类。

*.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button

最后的想法

本教程将帮助您开始使用点击触发器和 Bloom 选择加入表单。 它甚至可能让您重新考虑当前尝试获得订阅者或潜在客户的方式。 如果您有任何问题或建议； 随时在下面的评论部分发表评论。 当你在那里时； 请告诉我们在哪些情况下您会使用点击触发选择加入表单。

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

BarsRsind/shutterstock.com 的特色图片