在使用 Elementor 构建网站时，为用户创建流畅的视觉体验至关重要。预加载器可以在页面内容完全加载前展示加载动画。下面，我们将一步步地指导你如何在 Elementor Pro 中创建预加载器。

预加载器是什么？

预加载器通常是网站在内容完全加载之前显示的图像或动画。通过预加载器，可以展示品牌标志或特定动画，让用户感受到更专业和流畅的浏览体验。

步骤 1：创建标题模板

首先，需要创建一个标题模板，以便将预加载器应用到网站的所有页面。
操作步骤：

1. 导航至 Elementor 仪表盘中的 模板 > 主题生成器。

2. 点击 标题 部分，然后点击 + 图标创建一个新的标题模板。

3. 完成模板的设置后，点击 发布 并应用显示条件。

系统会弹出 显示条件 窗口。在这里，选择想要应用该标题模板的页面范围。选择 整个网站 将确保该标题在所有页面上显示。确认选择并点击 保存和关闭 以完成发布。

步骤 2：添加容器并设置 CSS ID

在标题模板内，添加一个容器以容纳预加载动画。
操作步骤：

1. 在标题模板的编辑页面，添加一个单列容器。

2. 点击容器的高级选项卡，将 CSS ID 设置为 der_preload。

步骤 3：添加小部件图标或图像

为预加载器添加视觉效果，例如图标或品牌标志。
操作步骤：

1. 在容器中，添加 图标 或 图像 小部件。

2. 在小部件的高级菜单中，将 CSS ID 设置为 der_loader。

3. 进入样式菜单，调整图标的大小（建议设置为 1）以适应你的设计需求。

步骤 4：添加 HTML 小部件以运行脚本

接下来，添加 HTML 小部件并插入 JavaScript 代码，以控制预加载器的显示和隐藏。
操作步骤：

1. 在图标或图像小部件下方添加 HTML 小部件。

2. 插入以下代码：

<script> document.addEventListener('DOMContentLoaded', function () { setTimeout(function () { document.getElementById('der_preload').style.display = 'none'; document.getElementById('content').classList.add('visible'); }, 2000); }); </script>

3. 在 HTML 小部件的高级选项中，设置 CSS ID 为 der_preloader_adds，以便隐藏该小部件，避免不必要的空白区域。

步骤 5：添加自定义 CSS

为了让预加载器正常工作，添加一些 CSS 代码来美化预加载效果。

1. 点击页面设置图标，打开高级菜单。

2. 在自定义 CSS 栏中粘贴以下代码：

#der_preload { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; display: flex; align-items: center; justify-content: center; z-index: 1000; } #der_loader { border: 8px solid #363636; border-top: 8px solid #3498db; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #der_preloader_adds { display: none; }

步骤 6：发布并测试预加载器

发布你的模板并设置显示条件，以确保预加载器在指定页面上正常显示。
操作步骤：

1. 点击 发布，在显示条件弹出窗口中选择 整个网站。

2. 保存设置并访问你的网站页面，检查预加载器是否按预期工作。

总结

通过以上步骤，你已成功创建了一个自定义的 Elementor Pro 预加载器。还可以通过调整 CSS 和 JavaScript 代码进一步个性化预加载效果，使其与品牌风格保持一致。