WordPress + Elementor：实现炫酷翻页效果与 Preloader 加载动画的完整教程

在打造高质量的 WordPress 网站 时，视觉体验和交互细节往往决定了用户是否愿意停留。得益于强大的 Elementor 页面构建器，我们不仅能轻松拖拽布局，还能通过简单的设置或扩展插件，为网站添加翻页动画效果和Preloader（页面加载动画），让整个浏览过程更加流畅、专业且具备品牌感。

本文将全面介绍如何在 WordPress + Elementor 环境中实现翻页效果与 Preloader 动画，从基础设置到进阶自定义，助你快速提升网站交互体验。

一、WordPress 与 Elementor 的关系

WordPress 是全球最受欢迎的网站内容管理系统（CMS），而 Elementor 是其中最流行的可视化页面构建插件之一。
二者的关系就像“操作系统与应用程序”：

WordPress 提供网站运行框架与内容管理；
Elementor 提供强大的页面设计能力，让你无需编写代码即可创建出色的网页布局。

通过 Elementor，你可以在 WordPress 中自由实现动画、过渡、滚动特效等视觉交互，而翻页效果（Page Transition）和加载动画（Preloader）正是提升用户体验的关键元素之一。

二、为什么要在 WordPress 网站中添加翻页效果和 Preloader？

提升页面切换的流畅性
Elementor 页面之间默认是“瞬间跳转”，而加入翻页动画后，过渡更自然。
改善首次加载体验
Preloader 能在页面资源加载时显示品牌 LOGO 或动态图形，避免“白屏”尴尬。
提高品牌识别度
自定义加载动画与网站色调一致，可以传达专业感。
增加停留时间与SEO友好度
更流畅的用户体验通常会降低跳出率，对搜索引擎优化（SEO）也有积极作用。

三、在 Elementor 中设置翻页效果的方法

方法1：使用 Elementor 自带的设置选项

打开站点设置
点击翻页效果按钮
设置页面过度和预加载器

方法2：使用插件实现页面过渡动画（推荐）

如果你希望在 WordPress 页面切换时产生平滑的“翻页过渡”，可以借助以下 Elementor 兼容插件：

🔹 Page Transition by Elementor Addons
🔹 Elementor Page Transition Animations
🔹 Animsition JS（通过代码实现）

使用步骤示例（以 Page Transition by Elementor Addons 为例）：

安装并启用插件；
前往 Elementor → Settings → Page Transition；
启用翻页动画功能；
选择动画类型（Fade、Slide、Zoom、Flip 等）；
设置动画时长与延迟；
保存后刷新前端即可生效。

这些插件与 WordPress + Elementor 完全兼容，操作简单，无需手写代码。

方法3：自定义 JS 翻页动画

如果你希望完全自定义，可以在 WordPress 的页脚区域（或通过 Code Snippets 插件）添加以下代码：

<script>
document.addEventListener("DOMContentLoaded", function() {
  document.body.classList.add("fade-in");
});
window.addEventListener("beforeunload", function() {
  document.body.classList.add("fade-out");
});
</script>

<style>
body {
  opacity: 0;
  transition: opacity 0.6s ease;
}
body.fade-in {
  opacity: 1;
}
body.fade-out {
  opacity: 0;
}
</style>

👉 当用户进入或离开 WordPress 页面时，将会出现柔和的淡入淡出翻页效果。

四、在 WordPress 中为 Elementor 页面添加 Preloader 动画

方法1：使用插件实现

最常用的 WordPress Preloader 插件包括：

LoftLoader
Preloader Plus
PageLoader

以 LoftLoader 为例：

安装并启用插件；
前往后台 LoftLoader Lite → Customize；
选择加载动画样式（如旋转圆圈、进度条、LOGO 动画等）；
设置持续时间、背景颜色等；
保存后即可在 Elementor 页面加载时显示 Preloader。

这些插件支持自定义颜色、LOGO 和动画节奏，非常适合品牌网站使用。

方法2：自定义代码实现轻量级 Preloader

若不想安装插件，可以在 WordPress 的页头模板中加入以下 HTML + CSS + JS：

<div id="preloader">
  <div class="loader"></div>
</div>

<style>
#preloader {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #ffffff;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loader {
  border: 5px solid #eee;
  border-top: 5px solid #2271b1;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

<script>
window.addEventListener("load", function() {
  document.getElementById("preloader").style.display = "none";
});
</script>

💡 该方案完全兼容 Elementor 页面，当页面资源加载完成后，Preloader 将自动隐藏。