如何向 WordPress 添加浮动行动号召按钮

行动号召按钮是吸引(或购买)访问者的最重要因素之一。 但是,如果您的按钮位于页面上的静态位置,则有时”折痕.” 浮动行动号召按钮可解决此问题。

按钮可以放置在显著位置,并在页面滚动时保留在那里。

我们 按钮奈泽 行动号召 (CTA) 按钮插件。 按钮狙击手有许多内置函数。 因此,您可以轻松地创建按钮,将访问者带到 URL、开始聊天、拨打电话、发送短信或在社交媒体上发帖。

今天,我们将讨论创建一个 CTA 按钮,该按钮将访问者发送到网站的另一个页面。 接下来,我将简要介绍布特顿泽可用的一些其他选项。

安装按钮插件

登录到 WordPress 管理面板。

在左侧列导航中,单击[プラグイン]将鼠标悬停在链接上,然后单击[新規追加]单击链接。

在“搜索插件…”框中键入“按钮清除器”。

查找按字按钮插件

找到插件后,单击“立即安装”按钮。

单击以安装 WordPress 按钮工具插件

单击“激活”按钮。

单击以启用 WordPress 按钮插件

使用按钮识别器创建文字按浮动按钮

在左侧列导航中,单击[ボタンナイザー]将鼠标悬停在链接上,然后单击[ボタン ライザー]单击链接。

["ボタンナイザー" リンク

Buttonizer を開くと、サイトのホームページも別のパネルで開きます。これはプレビューなので、フローティングの行動喚起ボタンがサイト上でどのように見えるかを確認できます。

既定では、Buttonizer はグループ内に 2 つのボタンを表示します。そのうちの1つを削除して、1つのボタンの設定に集中できるようにします。

最初に行うことは、レンチアイコンをクリックして基本的なボタン設定にアクセスすることです。

レンチ アイコンをクリックします

ここでは、ボタンの位置、アニメーション、スタイル、アクション、およびボタンがデスクトップ ディスプレイ、モバイル、またはその両方に表示されるかどうかを設定します。それぞれのオプションを見てみましょう。

基本的なボタン構成

立場

これにより、ボタンはサイトの隅の 1 つまたはカスタムの場所に配置されます。ドロップダウンで位置を変更すると、プレビューペインでボタンが移動するのを確認できます。

カスタムの場所は、たとえば、ページの横の中央にボタンを設定する場合に便利です。これを行うには、[位置]从下拉列表[カスタム]选择” 然后,将 Y(%) 设置为 50。

设置自定义按钮位置

您可以看到按钮移动到页面右侧的中心。 通过播放这些 X 轴和 Y 轴值,可以将按钮放置在页面上的任意位置。

动画

插件的免费版本有两种动画选项。 两者每 8 秒或 10 秒运行一次,以吸引按钮的注意。

动画选项

样式

样式将按钮从圆形(或默认)更改为方形或矩形。[四角形],按钮标签将显示在按钮旁边(稍后将对此进行说明)。

带标签的矩形按钮

行动

按钮操作是选择按钮执行的操作的位置。

选择按钮操作

我设置了一个按钮来转到网站上的页面,但正如您所看到的,还有许多其他选项。

  • 热门动作
    • 网站网址
    • 呼叫操作(电话号码)
    • 电子邮件操作(电子邮件地址)
    • Whats 应用程序聊天
    • 返回页面顶部
    • 返回第 1 页
    • 社交共享
  • 点击聊天
    • 股票代码
    • 脸谱信使聊天小部件
    • 脸谱信使链接
    • 推特DM
    • 天空
    • 线
    • 电报
    • 微信
    • 维伯
  • 社交媒体
    • 脸谱
    • 囀囀
    • 因斯塔格拉姆
    • 快照聊天
    • LinkedIn
    • VKontakte
    • 方式
  • 弹出式
    • 波普钦
    • 元素弹出窗口
    • 弹出窗口制造商
    • 弹出窗口 – 按字弹出
  • 行动
    • 将 URL 复制到剪贴板
    • 打印页面

创建链接按钮

现在,您已经完成了基本设置,让我们创建一个按钮。 接下来,我们将看看我们可以用它做什么。

  • 将“位置”设置为默认右下角。
  • 传递“动画”,因此将该集保留为“无动画”。
  • 对于样式,选择矩形。 然后,当您向按钮添加标签文本时,它将显示为单个矩形。 标签文本也以“默认”样式显示,但文本将浮动在另一个容器附近。
  • 按钮操作是网站 URL。 在“按钮操作”下拉列表正下方的文本字段中输入 URL。
  • 将“打开新选项卡”设置保留为默认关闭位置,并将“查看”、“移动”和“桌面”设置保持打开状态。

这是设置在全部完成后的外观。

配置 URL 按钮

在保存按钮之前,必须设置按钮旁边的文本。 现在,让我们向下滚动到标签部分。

在“标签”字段中输入文本。 您可以在预览中看到它们的外观。 如果需要更大的字体大小,也可以设置它。

按钮标签文本

有两个“可见性”设置,一个用于桌面,另一个用于移动设备。 这些设置允许您在桌面屏幕上隐藏标签,或在访问者将鼠标悬停在桌面上时显示标签。 您还可以在移动设备上完全隐藏标签。

隐藏按钮文本不是个好主意(您不想创建神秘按钮),因此请同时将这两个按钮设置为“始终显示标签”。

按钮显示选项

然后,当您单击“保存并发布”按钮时,该按钮将显示在您的网站上。 滚动页面时,按钮将保持原位。 无论访问者位于特定页面上的哪个位置,按钮始终存在。

[["保存和发布" 按钮

网站上的按钮

其余按钮配置选项

我们跳过了一些事情,所以让我们备份并检查出来。

按钮颜色

在这里,您可以更改按钮的颜色以匹配网站的设计。 选择“基本”或“交互”以打开颜色选取器。 “底座”是按钮的正常颜色。 交互是访问者将光标悬停在按钮上时按钮更改的颜色。

颜色选取器

边框半径

它控制值介于 1 和 50 之间的按钮的圆角。 如果设置为 50,则按钮将完全圆润。 数字越小,按钮越方形。

在这里,我们将“边框半径”更改为 25,您可以看到按钮是圆角正方形。

边框半径

标签颜色

“标签颜色”设置控制显示按钮标签时的背景颜色和文本颜色。

按钮图标

最后,“按钮图标”部分设置按钮的图形元素。默认情况下,主按钮使用字体真棒“fa-user”图标。 但是,您也可以为按钮选择其他图标。

单击“图标”字段以打开图标选择器。 您可以滚动图标或按关键字搜索。

图标选择器

单击选择器图标时,按钮图标将发生更改。

新图标

在“图标颜色”部分中,您可以选择不同图标的颜色作为“基本”和“交互”。 您可以通过在此处和“按钮颜色”部分更改颜色来创建一些有趣的效果。

“图标大小”设置控制按钮中图标的大小,正如您所猜测的那样。

其他很酷的按钮奈泽功能

“按钮操作”设置是管家展示它的地方的可能性。

想要将 WhatsApp 浮动按钮拖放到 WordPress 网站上? 在“按钮操作”下,选择“WhatsApp 聊天”,然后输入 WhatsApp 号码以完成。

在“按钮操作”中选择“社交共享”时,有广泛的社交媒体网站可供选择。 通过为您希望访问者共享的每个网站添加按钮,可以创建自己的浮动社交共享面板。

布特顿泽尔有很多选项,其中许多选项在使用插件的免费版本时可用。 我的帽子对开发人员来说已经脱落了。 通常,付费版本的插件会隐藏免费用户的所有很酷的功能。 按钮奈泽不这样做。

谷歌分析注意事项

按钮提升器设置包括向按钮添加 Google 分析代码的选项。 如果您已经在网站上使用 Google 分析插件,请不要将分析代码添加到按钮播放器。.

如果页面上已存在代码,并且向按钮添加了分析代码,Google 会认为目标网页已打开两次。 这会将分析跳出率显示在目标页上,而不是实际跳出率。

卸载插件时会发生什么情况?

卸载按钮器插件后,您创建的按钮将不再显示在您的网站上。

浮动行为唤起按钮的优点

行动号召聊天按钮或“点击呼叫”按钮的好处是显而易见的。 “上一页”或“返回顶部”按钮也是行动号召,但不是营销的意思。 但是,它们以其他方式使您的访客受益。

然而,行动号召在那里有利于你,主要是网站所有者。 让访问者购买您的产品或直接与您互动(因此,他们最终将购买您的产品)。

如果行动号召按钮或链接固定在文本页面的底部,则许多访问者看不到它。 因此,浮动或“堆叠”CTA 具有始终可见的优点。 访问者可以随时采取行动。

您是否尝试过 CTA 放置,并找到了最适合您的部署? 查看布特顿泽尔选项列表是否提出了您以前没有考虑过的 CTA 想法? 请在评论中告诉我们!

给TA打赏
共{{data.count}}人
人已打赏
WordPress 教程

如何向 WordPress 添加健身时间表

2022-9-12 8:42:43

WordPress 教程

如何测试莫德尔的速度

2022-9-12 10:44:45

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索