专注于WordPress、Elementor、外贸建站教程与服务
大家好呀~本站正在筹备公益的B2B外贸建站实操直播,感兴趣的同学可以戳右上角微信加我报名(注明来意),直播时间视报名情况待定~

如何用Elementor制作WordPress网站的返回顶部按钮(3分钟解决)

更新日期:2020-09-22

LOYSEO使用的主题不提供网站的返回顶部按钮,而免费的Elementor页面编辑器就能解决这个问题,只需要3分钟,跟着教程试一下吧。

前提说明:

如果不方便看视频的,可以看下方的图文教程。(我还是推荐看视频啊,更容易理解,无配音有字幕)

经后期检查校对发现,视频教程中遗漏了:设置按钮所在setion的margin top为-1,具体可看下方图文教程。
此外,渐变动画功能只能在付费的Elementor Pro中使用,如果用的免费版Elementor,也可以不设置这个动画。

如何用Elementor制作返回顶部按钮

所需时间: 3 minutes
插件费用: 0 元

所需插件:

Elementor插件 - 免费
Elementor - Header, Footer & Blocks插件 -免费

操作步骤

第1步:在页面顶部模板中,将最顶部的setion添加css id “top”
在网站header中,找到第一个setion,将它的advanced的css id设置为 top
第2步:在页面底部添加一个setion,放入一个icon元素并配置它
  1. 在页面底部(footer)模板中,在末尾添加一个setion
  2. 在setion中放入一个icon图标,修改图标为向上的箭头(搜索arrow),修改图标尺寸和颜色,图标链接填入#top ;
    在图标的advanced设置中,找到position,设置为fixed、右侧对齐、底部对齐,距离右侧和底部各10px
    (注意:下面这个渐变动画功能只能在付费的Elementor Pro中使用,你如果用的免费版Elementor,也可以不设置这个动画) 继续在advanced设置中,将motion effects的scrolling effecs开启,点选Transparency(保持它的默认设置即可),然后设置 Effects Relative To 为viewpoint
  3. 将icon所在column的advanced padding都设为0,将icon所在setion的advanced margin top设置为-1,这样页面底部就不会出现空白
第3步: 测试返回顶部功能
打开网站首页刷新一下,滚动页面,你将在页面右下角看到逐渐出现的图标,点击它,你将能回到顶部。

查看更多Elementor教程

评价
0 / 5 5
分享知识是一种美德,当我们每一个人都在不断的分享知识给这个社会的时候,我们这个社会将会变得越来越好,所以如果您喜欢这篇文章的内容,希望您可以把它分享到您的朋友圈当中,或者给到您指定的某一个人,您关心谁,就把知识分享给他,谢谢。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Copyright © LOYSEO.COM
Do NOT follow this link or you will be banned from the site!
扫码加我微信吧 ~

在朋友圈无分组分享本站首页,或点赞知乎专栏置顶文章,联系我可获得以下任一正版主题或插件~
插件:Elementor Pro、WP Rocket、Essential addons elementor、WPML...
主题:Astra、bridge、avada、manufacturer、Jnews...

外贸网站或同类博客交换友情链接也可以联系我哦~