如何在特定页面访问后触发选择表单

已发表: 2021-11-14

弹出式选择表单同时是网页设计中最有用和最烦人的元素之一。 没有他们,您几乎无法增加忠实客户的名单,但首次访问者甚至不太可能关注他们。 这就是为什么我们要引导您完成使用 Divi 的条件选项在用户访问某些页面后触发 optin 表单的过程。 他们更有可能进行转换,因为他们已经浏览了您的网站,还因为您不会通过与他们无关的弹出窗口来烦他们。 让我们深入研究,看看我们如何增强您的网站!

如何使用条件选项触发 Optin 表单

对于这篇特定的文章,我们将使用 Divi 条件选项在用户访问您网站上的两个特定页面后显示折扣代码的选择表单。 它只会在满足这些条件后出现,这意味着折扣仅适用于特定目标用户。

对于本教程,我们将使用 Divi Theme Builder 将 optin 表单模块添加到页面的正文布局,但如果您有特定页面或帖子,您希望在某些页面或帖子访问后显示 optin,您可以对条件选项遵循完全相同的过程。

您可以在左侧边栏中的Divi – Theme Builder下的 WordPress 管理仪表板中找到 Divi Theme Builder。

主题生成器位置

创建新模板

在 Divi Theme Builder 中,您要单击Add New Template按钮。

特定页面的选择表单

然后,选择您希望选择表单出现的特定页面。 由于我们将使用 optin 表单模块提供折扣代码,因此我们将让布局仅出现在事件定价页面上。

复制电子邮件选项模块

由于我们为此使用了预制的布局包,因此请使用已经设计和实施的电子邮件选择表单进入布局页面。 右键单击包含部分并从上下文菜单中选择复制部分

复制模块

之后,从页面中删除该部分,因为您将在 Theme Builder 中拥有它。

添加自定义正文布局

接下来导航回 Theme Builder 以创建整体布局。 您将单击该模板中的Add Custom Body并选择Build Custom Body

自定义身体

在其中,选择从头开始,您应该有一个空白模板可以使用。

粘贴电子邮件选项部分

在编辑器中,右键单击并从上下文菜单中选择粘贴部分

粘贴该部分

完全样式化和设计的电子邮件选项应该直接插入。

添加副本以提供有条件折扣

接下来,您要提及您提供的折扣。 对于此模块,我们将更改文本模块中的标题,但您也可以进入选项表单的设置并更改标题文本。

电子邮件选择

之后,是时候显示页面内容了。

添加动态页面内容

接下来,如果还没有空白部分,请单击蓝色 + 图标并选择常规部分添加新部分

添加一个新部分

当您有该部分时,添加一个单列 row

为电子邮件选项添加一行

插入模块下拉列表中选择发布内容模块。 这是一个动态模块,可以显示您已经完成的任何设计。 在这种情况下,预制的博物馆活动定价布局将显示在前端。

发布内容

在这种情况下,预制的博物馆活动定价布局将显示在前端。

编辑帖子内容的宽度

接下来,进入发布内容模块包含行的行设置。 导航到Design选项卡中的Spacing并将WidthMax Width设置为100%

宽度

从行和节中删除填充

因为我们正在向已经设计好的页面添加动态内容,所以我们希望尽可能保持无缝。 因此,进入所有单独部分和行的“设计设置”选项卡,并确保在“间距”标题下将“顶部和底部填充”设置为0 像素。 不要将其留空,因为在 Divi 中为它们设置了默认间距。

填充

添加动画

接下来,进入包含电子邮件选择表单的部分设置。 在该部分的设计选项卡下,我们将添加一个动画。 由于此部分仅针对符合特定条件的访问者显示,因此我们希望引起他们的注意。 我们希望确保他们不会认为这只是网站的另一部分。 我们将通过使整个部分动画在设定的持续时间后出现来做到这一点。

我们将为Animation Style选择Bounce ,为Animation Delay选择1000ms(1 秒) 。 现在,此部分只会在访客到达后 1 秒出现。 您可以将延迟设置为最适合您的延迟,每 1000 毫秒为 1 秒。

延迟

可选:设置固定位置

如果您希望用户立即看到 optin,而不必滚动到页面底部,您可以将其粘贴到屏幕底部。 进入该部分的高级选项卡并找到位置设置。 从下拉列表中选择“固定”,然后单击底部中心方块来定位该部分。 接下来,将Z 索引更改为 999,使其始终高于页面上的其他内容。

电子邮件选择表格

将条件逻辑添加到该部分

当您仍在包含部分的设置中时,请转到“高级”选项卡并找到“条件”选项。 这就是您将如何设置访问者在获得此选择表单之前必须在您的网站上看到的页面。 单击显示添加条件灰色 + 图标开始。

optin 表单的条件选项

接下来,选择交互子标题下的页面访问

页面访问以触发 optin 表单

然后,您只需要选择访问者必须看到的确切页面即可触发带有折扣的 optin 表单。 从此处的列表中选择定价活动页面。 因为这两个页面都被选中并且它们都被分配给 Theme Builder 模板,所以无论访问它们的顺序如何,用户都将在任一页面上看到 optin。 但必须访问两者才能触发 optin 表单出现。

条件选项

您也可以使用Post Visit来执行此操作,它也在Interaction子标题下。 它的工作方式完全相同,但使用的是博客文章而不是 Pages。

结束条件选择表单

一旦所有这些都保存下来,您的有条件选择表单就会生效。 现在,每当有人访问您网站上的特定页面或帖子时,您都可以为他们提供特殊的、有针对性的内容。 能够使用这些选项自定义您的内容,可以让您的网站拥有令人难以置信的用户体验。 这是转化的最大驱动因素之一。 现在,您可以显示 optin 表单以将它们转换为该体验的一部分。

您将如何使用条件选项来显示 optin 表单?

文章特色图片来自 TMvectorart / shutterstock.com