代码观察者

如何在 Elementor 中创建全页滚动网站

Rifat WordPress Tutorials Mar 31, 2024

在 Elementor 中创建全屏滚动页面也非常简单和方便。为了实现它，我们将使用一个名为fullPage.js的插件。还有其他方法可以实现这种效果，例如 CSS 滚动或Elementor Addons。然而，fullPage.js 提供了兼容性、响应能力和可用性的最佳解决方案。

如何在 Elementor 中创建全页滚动网站

在 Elementor 中创建全屏滚动网站

现在我们将演示在 Elementor 中创建全页滚动网站的过程。

第1步：加载fullPage.js

为了使用fullPage.js插件功能，我们必须首先加载它。

必须将以下代码添加到我们的网站标题中才能正确加载：

创建令人惊叹的网站

使用最好的免费页面构建器 Elementor

现在开始 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.extensions.min.js"></script>

我们需要一个插件来执行此代码，因为 Elementor 目前不提供向网站标题添加代码的方法。虽然有多个插件可以向我们的标题添加代码，但我发现这个插件最容易使用。

安装插件后，在 WordPress 仪表板中选择“自定义 CSS 和 JS”下的“添加自定义 HTML”。现在，粘贴上述代码，确保将其放在标题和前端。

Adding code to the Header using a WordPress Plugin

下一步是添加一些特殊的 JS。要初始化 fullPage.js 并设置其选项和过程，我们必须使用 jQuery。以下是适用于所有具有垂直滚动的网站的一些基本选项。

jQuery(document).ready(function($) {
    $('#fullpage').fullpage({
        //options here
        scrollingSpeed: 1000,
        navigation: true,
        slidesNavigation: true
    });
    //methods
    $.fn.fullpage.setAllowScrolling(true);
});

确保将此代码包含在前端的页脚中。

我们还在这个阶段设置了 FullPage 设置。前面的示例包括导航点，它将出现在滚动网站的右侧，以及全页滚动网站所需的最少选项。当我们修改设计以使其具有响应能力时，我将考虑更多替代方案。请访问官方文档以获取有关您的选项的更多详细信息。

第 2 步：设置 Elementor 页面

fullPage.js的滚动页面需要以下标记。

<div id="fullpage">
    <div class="section">Section 1</div>
    <div class="section">
        <div class="slide">Slide 2.1</div>
        <div class="slide">Slide 2.2</div>
        <div class="slide">Slide 2.3</div>
    </div>
    <div class="section">Section 3</div>
</div>

我们的滚动页面的各个 div 与类部分都将是全屏部分。使用模板是与 Elementor 配合使用的最简单方法。

让我们首先配置我们的实际页面。在 Pages 中创建一个新页面，为其指定合适的标题和 URL，然后使用 Elementor 进行编辑。

现在在 Elementor 中创建一个包含一列的部分。我们想要向此列添加一个 HTML-Widget。该小部件包含每张幻灯片的短代码，将作为我们页面的框架。我们要添加以下代码：

<div id="fullpage">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</div>

验证该部分是否为全角。此外，由于我们不希望 Elementor 默认添加到列中的填充，因此将部分和列的填充设置为 0。

在后续步骤中创建实际幻灯片后，我们将 Elementor 模板 ID 更改为正确的值。

第 3 步：设置部分

最后一步是单独构建每个部分并将其保存为模板。

您需要Elementor Pro才能使用 Shortcodes。如果您还没有考虑购买，现在是时候购买了。您拥有使用 Elementor 构建网站所需的所有工具。无需总是购买新主题！

通过转到模板 - 添加新项来创建一个新部分。

现在将创建我们的全页滚动网站的第一张幻灯片。在 Elementor 中创建一个新部分，并将其高度设置为“适合屏幕”。现在您已经添加了材质，您可以对其进行样式设置。只需确保每个模板最多包含一个部分即可。要创建独特的布局，您可以根据需要使用任意数量的列和内部列。

完成后保存幻灯片，然后返回 Elementor 模板。您最近开发的模板现在应该出现在列表中。获取此模板的 ID，然后通过复制将其粘贴到我们在步骤 2 中创建的页面中。

现在，对您拥有的每张幻灯片重复此过程。每个模板都必须有一个区域，其高度可以调整以匹配屏幕。

包起来

那么就这样吧！这是在Elementor中使用 fullPage.js 构建全屏滚动页面的最简单方法。我希望这可以帮助您为您未来的企业设计一个简单且简约的网站。

Divi WordPress Theme