CodeWatchers

Как создать веб-сайт с полностраничной прокруткой в ​​Elementor

Rifat Учебные пособия по WordPress Mar 31, 2024

Создавать полноэкранные страницы с прокруткой в ​​Elementor тоже очень просто и удобно. Для этого мы собираемся использовать плагин под названием fullPage.js . Существуют и другие методы достижения этого эффекта, такие как прокрутка CSS или дополнения Elementor . Однако 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 в настоящее время не предлагает средств для добавления кода в заголовок сайта. Хотя существует несколько плагинов, которые могут добавлять код в наш заголовок, я обнаружил, что этот самый простой в использовании.

После установки плагина выберите «Добавить пользовательский HTML» в разделе «Пользовательский CSS и JS» на панели управления WordPress. Теперь вставьте вышеупомянутый код, поместив его как в заголовок, так и во внешний интерфейс.

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-виджет в этот столбец. Этот виджет, который включает шорткоды для каждого отдельного слайда, будет служить основой нашей страницы. Мы хотим добавить следующий код:

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

Убедитесь, что раздел имеет полную ширину. Кроме того, поскольку нам не нужны отступы, которые Elementor по умолчанию добавляет к столбцам, установите отступ раздела и столбца равным 0.

После создания реальных слайдов на последующих этапах мы изменим идентификатор шаблона Elementor на правильное значение.

Шаг 3. Настройте разделы

Последний шаг — отдельно построить и сохранить каждый раздел в качестве шаблона.

Для использования шорткодов вам потребуется Elementor Pro . Пришло время купить его, если вы еще не задумывались об этом. У вас есть все инструменты, необходимые для создания веб-сайта с помощью Elementor. Нет необходимости всегда покупать новую тему!

Создайте новый раздел, выбрав «Шаблоны» — «Добавить новый».

Теперь будет создан первый слайд нашего сайта с полностраничной прокруткой. Создайте новый раздел в Elementor и установите для него высоту «По размеру экрана». Теперь, когда вы добавили материал, вы можете стилизовать его. Просто убедитесь, что каждый шаблон содержит не более одной части. Чтобы создать уникальный макет, вы можете использовать столько столбцов и внутренних столбцов, сколько захотите.

Закончив, сохраните слайд, а затем вернитесь к шаблонам Elementor. Недавно разработанный вами шаблон должен появиться в списке. Возьмите идентификатор этого шаблона и вставьте его на страницу, которую мы создали на шаге 2, скопировав его.

Теперь повторите эту процедуру для каждого имеющегося у вас слайда. Каждый шаблон должен иметь одну область, высота которой регулируется в соответствии с размером экрана.

Подведение итогов

Вот и все! Это самый простой способ создания полноэкранных страниц с прокруткой с помощью fullPage.js в Elementor . Я надеюсь, что это поможет вам создать простой и минималистичный веб-сайт для ваших будущих проектов.

Divi WordPress Theme