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

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

更新日期:2021-01-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
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步: 测试返回顶部功能
打开网站首页刷新一下,滚动页面,你将在页面右下角看到逐渐出现的图标,点击它,你将能回到顶部。
 

查看更多Elementor教程

点赞
0 / 5 5

Your page rank:

教程 分类

发表评论

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

相关 教程

我自用的 建站资源

当你点击本站的链接购买它们,我会得到一些佣金,谢谢你们对我这位自由职业娃妈的支持,比心( •̀ ω •́ )y

Namesilo

注册域名,购买时使用优惠券loyseo可减1美元
前往注册→

siteground logo
SiteGround

购买外贸建站主机,它是80%读者的选择
了解详情→

Astra

易用又轻快的WordPress主题,含超多免费模板
了解详情→

elementor logo gradient 01 1
Elementor

最热门的网页可视化设计编辑器,我的网站就是用它建的
了解详情→

Hi~当你点击本站中的主机、主题、插件的链接前往购买后,我将获取一些佣金,这是我撰写建站教程的主要收入~希望也能得到你的支持,比心( •̀ ω •́ )y

Copyright © LOYSEO.COM — 专注提供外贸网站建设 · 外贸建站 · 外贸网站制作 与 外贸建站教程

LOYSEO
微信扫一扫