WordPress侧边悬浮窗免插件制作教程

如果你正在寻找一种无需插件即可快速为 WordPress 网站添加侧边悬浮窗的方法，那么使用 Elementor 是一个绝佳选择。无论你是想提升用户体验，还是增加网站交互，悬浮窗都能帮助你实现这些目标。本文将详细介绍两种利用 Elementor 制作侧边悬浮联系按钮的简单方法，帮助你快速提升网站的交互效果和转化率！

方式一：悬浮元素Floating Elements

本文基于Elementor 3.23 及以上

步骤一：启用Floating Elements功能

进入Wordpress后台,进入到Elementor的Setting页面,找到Features标签。

打开Flexbox Container功能（Active)。

步骤二：创建Floating Elements模板

侧边在Elementor下面找到Template中的Floating Elements并进入。

点击Add New，创建新模板。

模板选择Floating Element，点击创建，最好命名一下比较容易找。

进入之后会有很多样式供你选择，挑选一个适合自己的即可。

插入之后就会看到悬浮按钮出现在侧边。

这时候你可以在侧边编辑框里面添加或者删除，比如在WhatsApp添加自己的号码，Messager里面添加自己的username,也可以选择其他选项比如SMS，Viber之类的。在样式里面可以自定义颜色，字体，图标边距，图标边角之类，最后点击保存。

保存的时候，注意要add condition，应用到全网站或者指定网页，点击保存刷新，前台就应用可以看到了。

方式二：Footer添加图标

步骤一:创建Footer

已创建的直接打开Footer.

在Template里面打开并点击Add New.

创建Footer并命名。

进入之后，会有一些模板给你选择或者自己自定义也可以。

创建好或者应用好模板之后在最下面增加一个Container。

把container设为full width全宽，并添加小部件图标。

更改为自己需要的图片，并设计样式颜色，大小，图标也设置全宽度且居中。

在图标的content内容里面最下面的url加入超链接，比如WhatsApp，可以加入在线聊天的超链接。(WhatsApp对话直达链接），然后转到高级功能。

把位置改成绝对固定，调整上下左右的距离，并保存应用到全网站，浏览网站就可以看到应用了。点击图标就会直接跳转到WhatsApp在线聊天了。