如何在 WordPress 中创建“粘性”浮动栏

已发表: 2021-12-27
how to create a sticky floating bar in wordpress

想要使用 WordPress 中的粘性浮动条来吸引访问者的注意力吗?

使用粘性浮动横幅或栏,您可以在网站顶部或底部显示一条消息,而不会影响用户体验。 这使您可以推广电子邮件注册、产品、闪购、社交媒体帐户,并显示任何自定义消息。 例如,您可能希望显示 cookie 设置以请求访问者允许在他们浏览您的网站时跟踪他们的数据。

在本分步指南中,我们将向您展示创建 WordPress 浮动横幅的最简单方法。 在开始本教程之前,让我们先弄清楚粘性浮动条到底是什么。

什么是粘性浮动条?

当访问者滚动页面时,粘性浮动横幅会停留在网页的顶部或底部。

这些栏始终对用户可见,并且他们可以在浏览过程中随时与您的消息进行交互。

粘条被设计为灵活并具有多种用途。 因此,您可以定制它们以显示您想要的任何信息。 举几个例子,您可以为新访客添加欢迎折扣或推广新添加的产品以最大限度地提高知名度。

正确使用时,您可以使用浮动条:

  • 通过限时抢购、折扣和交易提高您的销售和收入
  • 为您的在线内容(播客、文章、指南、视频等)增加流量
  • 提高网站参与度和转化率
  • 生成潜在客户和订阅者以增加您的电子邮件营销列表
  • 提高社交媒体参与度和追随者
  • 提高品牌知名度

有很多方法可以让您使用粘性条来发挥自己的优势。 有了这个,让我们学习如何为您的网站创建一个引人入胜的 WordPress 浮动横幅。

为 WordPress 创建一个粘性浮动横幅

WordPress 有很多浮动栏插件,但并非所有插件都提供您轻松创建和自定义所需的功能。

我们将向您展示如何使用我们最喜欢的名为 OptinMonster 的浮动横幅工具在 5 分钟内创建一个,而无需触及任何一行代码。

OptinMonster

OptinMonster 是排名第一的潜在客户生成工具,可让您创建引人注目的营销活动,将访问者转化为客户。 这些包括浮动栏、弹出窗口、幻灯片、内联表单等。

OptinMonster 带有一个包含 50 多个预先设计的浮动栏模板的库,因此您不必从头开始。

您会发现公告、折扣、流行的假期优惠、新闻通讯订阅等设计。

您可以预览并选择您选择的模板。 然后是一个易于使用的拖放构建器。 您可以通过单击鼠标按钮自定义文本、图像设计、颜色等。

更重要的是,OptinMonster 允许您设置定位规则,以便您可以在正确的时间和地点向正确的人展示您的浮动横幅。 例如,您可以将广告系列设置为仅向新用户或即将退出您网站的用户展示。 它还允许您重新定位和跟进您的潜在客户,以提高参与度。

除此之外,OptinMonster 在其仪表板中跟踪并显示您需要的所有重要统计数据。 您可以查看查看和点击您的 WordPress 浮动横幅的访问者数量,甚至可以看到您从该活动中赚了多少钱。

为了让您了解使用 OptinMonster 可以做什么,以下是一些示例活动:

campaign-examples-from-om

OptinMonster 的最佳之处在于,它使您可以灵活地从 WordPress 仪表板创建和管理所有活动,包括浮动栏。

现在,让我们立即开始使用 OptinMonster 创建我们的 WordPress 浮动横幅。

第 1 步:安装并激活 OptinMonster 插件

首先,您需要注册一个 OptinMonster 帐户。 该插件每月 9 美元起,提供 30 天退款保证。

然后,您需要安装 OptinMonster 插件以将该帐户连接到您的站点。

连接器插件是免费提供的,因此您可以从 WordPress 仪表板轻松下载它。 有关更多详细信息,您可以查看我们关于如何安装 WordPress 插件的指南。

当您在您的站点上安装并激活 OptinMonster 插件时,它将启动一个设置向导。 您可以选择连接新创建的帐户。

请记住,如果您在另一个选项卡中登录到您的 OptinMonster 帐户,该插件将自动检测它并同步您的网站。

现在,您可以开始使用 OptinMonster 创建您的第一个 WordPress 浮动横幅。

第 2 步:创建新的浮动条广告系列

OptinMonster 允许您在 WordPress 管理仪表板中创建和自定义浮动横幅。

为此,请转到 OptinMonster 选项卡,您可以看到不同类型的潜在客户生成活动,例如弹出式、浮动栏、全屏、内联等。

要创建 WordPress 粘性条广告系列,我们将选择浮动条选项。

这将启动包含令人惊叹的浮动横幅模板的模板库,您可以从中进行选择。

在这里,您可以将鼠标悬停在任何模板上以预览同一页面上的粘性浮动条。 当您找到最适合您的广告系列的设计时,请单击使用模板按钮来创建您的浮动横幅。

这将打开一个弹出窗口,您可以在其中为浮动条广告系列命名。

optinmonster-template-name

然后,单击“开始构建”按钮以启动 OptinMonster 活动构建器。

第 3 步:自定义您的 WordPress 浮动横幅

在活动构建器中,您将在左侧看到所有元素块,在右侧看到粘滞栏的预览。 在这里,您可以轻松地将所需的块拖放到横幅上。

您会发现 12 个块可用于使您的横幅更具吸引力和互动性。

一些有用的元素块是:

  • 倒数
  • 聊天机器人
  • 社会图标
  • 可选字段
  • 是/否按钮
sticky bar optinmonster builder

1.编辑内容块

如果您想自定义任何内容块,只需单击它,您将在左侧任务栏中看到打开的块编辑器。

例如,您可以通过上传自己的图像或从现有媒体库中选择一个来替换图像。 您还可以更改图像设置,例如不透明度、宽度、替代文本等。

optinmonster image edit

除此之外,OptinMonster 允许您向图像添加链接,以便用户可以单击它们以重定向到您选择的页面。 有一个选项可以使链接 URL 在新窗口中打开,您可以启用点击跟踪以查看有多少人点击了图片。

image link optinmonster

同样,您可以更改浮动横幅中的内容文本并编辑 optin 按钮。 您所要做的就是在预览中选择元素并输入您的自定义文本。

button optinmonster

完成自定义内容块后,单击“保存”按钮。

2. 配置活动设置

OptinMonster 允许您在构建器中编辑活动设置。 为此,您需要单击广告系列构建器左下角的“设置”图标。

sticky bar optinmonster settings

然后,您将看到左侧的 4 个主要设置和页面右侧的浮动栏实时预览。 设置包括:

  • 活动详细信息:允许您编辑活动名称、描述和有关浮动栏的其他信息。
  • 查看样式:为您提供大量设计和样式设置,以匹配您的网站品牌。
  • 显示设置:选择向访问者显示您的广告系列的次数。
  • 浮动栏设置:从上到下更改浮动栏的位置,反之亦然。

由于 OptinMonster 的模板外观和功能开箱即用,您无需对它们进行太多自定义,只需更改一些细节以匹配您的广告系列目标。 但如果需要,您可以轻松更改设计和样式。

视图样式选项中,您可以更改整体样式和设计选项。 基本设置可让您编辑样式、背景颜色、图像、关闭按钮等。

settings background color

高级设置允许您自定义边框、间距、阴影等小细节。

border settings optinmonster

默认情况下,OptinMonster 在您的网站底部显示浮动横幅,但您可以更改它并将其移至顶部。

为此,请转到“浮动设置”并在此处启用“在页面顶部加载浮动栏”选项。

floating bar optinmonster

完成后不要忘记保存设置。

现在,我们将了解您可以为浮动横幅广告系列设置的显示规则,以定位访问者。

第 4 步:设置定位规则以显示您的浮动横幅

Optinmonster 提供强大的受众定位功能,以优化转化并从您的活动中产生潜在客户。

要添加新的定位规则,您需要导航到编辑器顶部的“显示规则”标签。

然后,您可以看到默认规则集,如果访问者在您网站的任何页面上停留 5 秒钟,就会显示您的横幅。

如果要更改显示规则,可以单击编辑按钮或单击现有规则,您将看到 OptinMonster 提供的预定义显示规则列表。

所有规则都组织到不同的选项卡中,因此您可以轻松找到广告系列的定位规则。 一些亮点包括:

  • 滚动距离:仅在访问者在页面上滚动一定深度后显示
  • 时间和日期:针对特定假期、一周中的几天和时间段进行限时促销或限时优惠
  • 物理位置:根据用户的地理区域与用户互动,以本地化活动优惠
  • 访客设备:根据用户是在桌面还是移动设备上显示/不显示广告系列

要添加规则,您所要做的就是单击它。 就是这么简单!

您永远不需要添加编码或使用复杂的设置来定位您的受众。 接下来,我们将向您展示如何将您的广告系列连接到您的电子邮件帐户,以便您的所有新潜在客户都将自动添加到您的联系人列表中。

第 5 步:连接到您的电子邮件提供商

OptinMonster 与所有主要的电子邮件营销服务集成,例如 Constant Contact、Aweber、ActiveCampaign 和 ConvertKit。

当您同步您的电子邮件帐户时,您可以收集电子邮件地址并向您的新订阅者发送自动电子邮件。 OptinMonster 还带有内置选项来细分您的潜在客户,以便您的列表保持井井有条,并且您可以根据他们注册的内容发送相关电子邮件。

要连接到您的电子邮件提供商,请在活动编辑器中打开“集成”选项卡。

在这里,您可以选择您的电子邮件提供商并登录您的帐户。 一些提供商需要一个 API 才能工作,您可以在您的电子邮件帐户设置中找到该 API。

设置集成后不要忘记保存设置。

现在您已准备好在您的 WordPress 网站上发布您的粘性浮动横幅广告系列

第 6 步:发布您的 WordPress 浮动横幅

转到编辑器中的“发布”选项卡,您将看到用于查看广告系列实时预览的选项。 准备就绪后,您只需将状态更改为Publish

单击“发布”按钮后,您会看到广告系列状态更改为“已发布”。

前往您的 WordPress 仪表板并打开OptinMonster » 广告系列选项卡。 确保状态也设置为在此处发布

om popup set status to published in wordpress

现在,当您访问您的网站时,您应该会看到您的浮动栏广告系列根据您设置的显示规则出现。

display your wordpress floating banner

今天就是这样! 我们希望本文能帮助您轻松学习如何为您的 WordPress 网站创建粘性浮动横幅。

现在您知道如何使用 OptinMonster,您可以继续在您的网站上创建更多高转化率的广告系列,例如弹出窗口、幻灯片、优惠券轮盘游戏等。

接下来,要在您的网站上产生更多潜在客户和转化,您一定要阅读以下文章:

  • 如何在 WordPress 中创建潜在客户捕获页面
  • 如何在 WordPress 中创建弹出窗口(逐步)
  • 制作一个高转化的挤压页面

这些帖子向您展示了更多机会来定位您的用户,让他们参与并订阅您的品牌。