专注于外贸建站,分享WordPress教程和Elementor教程

网站右侧边悬浮联系按钮

价格:39元/不限网站/终生
相关教程
加入读者学习群
我用的页面编辑器
让我的客户网站GTmetrix测分A\A的主机Cloudways
独家优惠前3个月7折, 戳上方按钮注册即可自动带入优惠码LOYSEO
所赠主题插件价值>$49
主机送Astra Pro不限站点1年
gmail.comsina.com邮箱,注册易通过
遇到问题,联系我
更新日期:2024-03-31

这个模块可以在全站右侧添加图示的4个悬停联系按钮,可链接到发邮件、打电话、skype、whatsapp,这在外贸网站建设中挺常见到的。

2024年3月新增了第5个按钮:返回顶部,具体使用教程详见文末

每个按钮的图标、链接、颜色、大小、边角、位置都是可以修改的,你也可以新增或删除按钮。

它是用Elementor制作并放置于网站页脚的,所以只能用于:用Elementor制作页脚的WordPress网站。目前页脚通常由插件Elementor Pro(付费版)Elementor –页眉,页脚和块模板插件(免费版)制作。

你需要知道的事:
1.请在购买前体验演示模板和阅读以下教程,以便了解这个模块的真实情况与使用方法。
2.因模块销售是微利且无授权控制的,一经售出不能退款。

视频教程

使用教程分别制作了视频和图文。

如何将模块导入到网站中

  1. 购买后下载模块到你的电脑里,接下来我们将它传到网站的页脚中
  2. 在你的网站中,用Elementor编辑页脚Footer文件,你可以从任一页面顶部的控制栏里找到Footer的编辑入口
image 14
  1. 接下来,如下图所示,在Footer已有内容下方点击文件夹图标
image 5
  1. 在弹出的模板库中,点击右上角的上传图标
image 6
  1. 将刚才下载的模块文件上传到模板库中,以后再用就不用重传了
image 7
  1. 传完后,在模板库列表中找到:侧边栏悬浮联系按钮,在右侧点击插入按钮,即可将它导入到footer页面中
image 8
  1. 接下来在导入文档设置的确认界面,点击否
image 9
  1. 你将看到悬浮按钮已经成功导入,你可以发布footer页面去前台查看一下效果。
image 10

如何更换图标与图标的链接

备注:如果你想在制作网站期间使用中文界面以增加便利,可以按照这篇教程的第二节的第一步修改站点语言为中文即可,期间你会发现部分页面有中文文案,等做完网站再改回目标语言通常即可恢复。此外,当插件无中文语言包或中文语言包不完整时,切换站点语言也是徒劳的。

如下图所示,请在导入后点选需要修改的图标,然后在左侧的面板中更换图标和图标的链接,点击图标可以链接到对应内容。

image 11

按钮常用的链接

下面列举了发邮件、打电话、对接skype和whatsapp的链接代码,记得做完后自己测试一下功能是否正常。

  1. 邮箱:
    1. 如果需要点击按钮实现向邮箱发邮件,请在链接处填入:mailto:[邮箱],譬如:mailto:[email protected]
    2. 如果需要点击按钮打开询盘弹窗,你需要使用Elementor Pro的Popup功能
  2. 电话:如果需要点击按钮实现拨打电话,请在链接处填入:tel:[电话号码],譬如:tel:+8618100000000 或者 tel:+86(25)11112222
  3. skype:记得把下面的号码或名称(name)换成你的信息
    1. 点击按钮直接拨打skype电话:skype:+1234567890?call,或者skype:+name?call
    2. 点击skype按钮加好友:skype:name?add
    3. 点击skype按钮发送消息:skype:name?chat
  4. Whatsapp:https://wa.me/+86180xxxxxxxx,其中国际代码+86要保留,+86之后的号码之间不要有任何符号(譬如括号)

如何修改图标的颜色、尺寸、边框半径

点选需要修改的图标,然后在左侧面板的style/样式中,修改图标的标准颜色(normal)和悬停颜色(hover);

调整尺寸数值可以修改图标的大小(Size),设置边框半径(border radius)为0时,图标是直角;随着数字越大,边角越圆。

image 12

如何调整图标的位置

如果你需要调整按钮的位置,可以在按钮的高级设置中,修改定位栏目的水平偏移和垂直偏移数值。

英汉对照:高级设置:Advanced;定位:Positioning;水平方向:Horizontal Orientation;垂直方向:Vertical Orientation;偏移:offset

增大水平偏移数值,能够加大按钮与右侧的距离,反之亦然。

增大垂直偏移数值,能够加大按钮与底部的距离,你可以通过调整每个按钮的垂直偏移数值,来排列按钮的顺序、调整按钮的间距。

image 13

如何新增图标

image 16

如果你需要复制一个按钮,请在按钮上右键,然后点击复制功能(duplicate),复制后的按钮会重叠在原按钮上,记得按照上一段说的,调整垂直偏移量。

如果按钮重叠导致你无法选中,那你可以如下图所示,右键后点击导航功能(navigator),在导航中,给按钮命名以便识别,并且在导航中点击按钮,即可选中对应按钮,同时页面左侧的配置栏也是针对当前所选按钮的。

image 20 11 03 10 59 09

如何删除图标

image 17

如果你需要删除一个按钮,请在按钮上右键,然后选择删除

返回顶部按钮如何使用

在已有的4个图标下方,我新增了一个返回顶部按钮。

该按钮依旧需要配合Elementor制作的网站页头(即Header)使用,需要你在header所在的container或section的advanced中,为它设置CSS ID为topheader,如果所示:

网站右侧边悬浮联系按钮

如果你的header是跟随页面滚动的,也就是说,当你滚动页面时,导航栏一直固定在浏览器的顶部,那么,上文所说的配置需要更改一下。

你需要选取一个一直在页面顶部、不会跟随页面滚动的Container,譬如上图中,我选的是header中的第一行,它放了联系信息和搜索框,我将它设置为不跟随页面滚动,或者,你也可以在已有的header上方新增一个空白的container,将其的advanced – padding都设为0,然后同样将它的CSS ID 设为topheader。

注意,topheader这个CSSID全站必须是唯一的,也就是别处就别用了。避免一个页面里出现两个topheader,从而导致返回顶部按钮不知道返回到哪一个。

Picture of 外贸建站技术姐Bonnie
外贸建站技术姐Bonnie

Bonnie是LOYSEO的创始人,在建站领域有着超过14年的经验,热爱能将想法变为现实的WordPress,更是Elementor的忠实用户~

LOYSEO
让我的客户网站GTmetrix测分A\A的主机Cloudways
独家优惠前3个月7折, 戳上方按钮注册即可自动带入优惠码LOYSEO
所赠主题插件价值>$49
主机送Astra Pro不限站点1年
gmail.comsina.com邮箱,注册易通过
遇到问题,联系我