Elementor如何添加设置WordPress回到顶部功能

Elementor提供了设置 WordPress网站回到顶部功能（back to top），回到顶部是网站用户体验中比较舒服的一项功能，如果你使用了 Elementor编辑器，可以在数分钟内添加完成。下面魏艾斯笔记分享在 Elementor 中添加设置WordPress回到顶部功能。

1、说在前面

以下是本文操作的前提条件，请自行对照。

• 本文教程适合 Elementor编辑器制作的 WordPress网站
• 教程操作基于 Elementor Header, Footer & Blocks插件制作的 Header页眉之上。
• 如果使用 Elementor Pro 制作页眉，没有用上面的插件，那么修改方法也是一样的。
• 使用主题自带页眉或其他插件制作的页眉，要手动去页眉添加CSS id。不会操作的话安装 WordPress返回顶部按钮插件 WPFront Scroll Top。

2、需要准备的插件

• Elementor插件
• Elementor Header, Footer & Blocks插件

都是免费插件，放心安装。如何安装wordpress插件？

3、添加css id

我们之前已经在 Elementor Header, Footer & Blocks插件中添加了页眉 header（不知道如何制作看教程）。

从 WordPress后台 > 模板 > Theme Builder 进入，点击 header 中“使用 elementor编辑” 进入编辑区域。

这里面有两种情况，第一页眉不是固定的，会随着页面下拉而消失；第二种页眉是固定的，不会随着页面下滑而消失，一直能看到。

什么是固定页眉？无论你上下滚动页面，最上面的页眉始终都能显示出来，不会消失。很多网站都在使用，用户体验比较好。

魏艾斯笔记是固定页眉（固定导航栏），无论你下拉、上划页面，网站logo+导航栏一直都在页面顶部显示。

还看不懂的就用鼠标滚轮上下滑动本页面，看看最上面的导航栏是不是一直在页面顶部固定不动。

3.1、先说页眉不是固定的情况。在 Elementor导航器中找到页面最顶部第一个段(section)，在左侧编辑窗口中的高级设置中的 css id 添加 top。

3.2、然后说页面顶部导航栏是固定的情况。要在导航所在段的上面再新增一个空白段，不这么设置就无法实现返回顶部功能。

• 添加的 段 默认在下面，需要去导航器中手动拖拽到所有段的上面
• 内部间距 padding 为0
• 外部间距 margin top 为-1，先解锁（最右侧那个链接符号），然后单独设置 top
• 再把返回顶部的 css id添加到这个空白段中（和上面不固定页眉一样的位置）

4、页脚设置

同样我们已经在 Elementor Header, Footer & Blocks插件中添加了页脚 footer。

在页面底部添加一个段，从左侧搜索 icon，拖拽到右侧，如下图所示。

搜索arrow，修改默认图标为向上的箭头，依据个人喜好修改图标样式、尺寸和颜色。

图标链接添加 #top，当点击图标时页面就会上行到页眉添加 top的位置。

在图标的advanced设置中，找到定位（position），开始如下设置：

• 宽度：行内（auto）
• 位置：固定（fixed）
• 水平方向：右侧对齐，偏移 50px
• 垂直方向：底部对齐，偏移 10px
• 具体偏移量根据个人喜好设置

在Elementor Pro中还可以为上划动作加上动画效果。在高级设置的 动作效果 中开启 scrolling effecs，再选择合适的动画效果即可。

Elementor插件无法添加这个特效。本就是可有可无的效果，加不加无所谓。

为了不让页面底部留白，还需要如下设置：

• icon所在 栏 的高级设置 > padding设为0
• icon所在 段 的高级设置> margin top设为-1
• 找不到 栏 和 段 的使用导航器快速定位

5、检查返回页面顶部功能

进入网站任何页面刷新后，在页面右下角看到向上箭头图标，点击后能快速回到页面顶部。

如果上面你还添加了动画效果，在动作的同时会出现设置好的相应效果。