免费《新手做网站视频教程》,在线观看,如果你想从零开始自己做网站,点击开始吧!

使用Elementor导入已有的网站右侧边悬浮联系按钮

  1. 首页
  2. »
  3. Elementor教程
  4. »
  5. 使用Elementor导入已有的网站右侧边悬浮联系按钮

文章目录

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

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

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

你需要知道的事:

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

使用教程

使用教程分别制作了视频和图文。下方视频教程请开启VPN后科学上网查看。

如何将模块导入到网站中

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

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

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

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

按钮常用的链接

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

  1. 邮箱:
    1. 如果需要点击按钮实现向邮箱发邮件,请在链接处填入:mailto:[邮箱],譬如:mailto:bonnie@loyseo.com复制
    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时,图标是直角;随着数字越大,边角越圆。

如何调整图标的位置

如果你需要调整按钮的位置,可以在按钮的高级设置中,修改定位栏目的水平偏移和垂直偏移数值。英汉对照:高级设置:Advanced;定位:Positioning;水平方向:Horizontal Orientation;垂直方向:Vertical Orientation;偏移:offset

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

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

如何新增图标

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

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

如何删除图标

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

推荐阅读

联系我