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

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

更新日期:2024-06-15
本系列教程

正版分销:

90元/1个站点/2年

最先进的WordPress页面编辑器,能够快速创建高端的、完美的网站。适合任何主题,任何页面,任何设计。
加入读者学习群
我用的页面编辑器
让我的客户网站GTmetrix测分A\A的主机Cloudways
独家优惠前3个月7折, 戳上方按钮注册即可自动带入优惠码LOYSEO
所赠主题插件价值>$49
主机送Astra Pro不限站点1年
gmail.comsina.com邮箱,注册易通过
遇到问题,联系我

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

前提说明:

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

经后期检查校对发现,视频教程中遗漏了:①设置按钮所在setion的margin top为-1,具体可看下方图文教程。②将按钮设置为inline
此外,渐变动画功能只能在付费的Elementor Pro中使用,如果用的免费版Elementor,也可以不设置这个动画。
如果你的Header导航是固定在页面顶部的(Sticky),那么你不要在Header所在的Setion添加id,而是新增一个空白Section放到页面最顶部,并给它添加css id。

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

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

所需插件:

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

操作步骤

第1步:在页面顶部模板中,将最顶部的setion添加css id “top”
在网站header中,找到第一个setion,将它的advanced的css id设置为 top,如果你的第一个Setion设置了Sticky top(固定在页面顶部),那么请在它的上方再新增一个空白Setion设置css id
elementor back to top tutorial 2 - 如何用Elementor制作Wordpress网站的返回顶部按钮(3分钟解决)
第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

elementor back to top tutorial 3 - 如何用Elementor制作Wordpress网站的返回顶部按钮(3分钟解决)

3.将icon所在column的advanced padding都设为0,将icon所在setion的advanced margin top设置为-1,这样页面底部就不会出现空白

elementor back to top tutorial 1 - 如何用Elementor制作Wordpress网站的返回顶部按钮(3分钟解决)

    1.  

elementor back to top tutorial 4 - 如何用Elementor制作Wordpress网站的返回顶部按钮(3分钟解决)

第3步:将图标设置为inline
image 124
第4步: 测试返回顶部功能
打开网站首页刷新一下,滚动页面,你将在页面右下角看到逐渐出现的图标,点击它,你将能回到顶部。
 

查看更多Elementor教程

常见问题

如果你将顶部导航条的section设置了固定在顶部(即页面滚动时,导航条一直展示在浏览器中),那请在导航条的setion上方新增一个空白的setion,将内部间距padding设置为0,将导航条的setion的margin top设置为-1,然后将返回顶部的css id设置到此空白setion中,否则返回顶部按钮将无法实现返回顶部功能。

点赞

0 / 5 5

Your page rank:

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

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

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