В бесплатной версии Elementor есть виджет для создания слайдера или карусели, но он очень примитивный. В этом посте я подскажу вам три способа, как можно сделать крутой многослойный слайдер на Elementor любой сложности. И главное, реализовать это можно как в бесплатном Elementor, так и в Elementor Pro.
При помощи этих способов можно делать сложные многослойные слайдеры с анимацией, кнопками и всем чем угодно.
Способ 1 - Слайдер из блоков на Elementor при помощи 2 плагинов
Суть этого варианта в том, что мы создаём каждый слайд, как отдельную страницу, используя все возможности Elementor. А потом из таких страниц-слайдов соберем уже слайдер.
Для этого способа нам понадобятся два плагина:
- AnyWhere Elementor
- Slides anythig
Они есть в репозитории WordPress, поэтому заходим туда и устанавливаем их.
После этого заходим в первый плагин и создаём первый слайд-страницу. Путь в меню - "AE Templates/Add new".
По сути мы попадаем в обычный редактор страниц, только у этих страниц есть возможность вставки их при помощи шорткода или php в любое место на сайте.
Далее делаем необходимое количество таких страниц-слайдов, копируем их шорткоды и переходим к следующему плагину Slides anythig. Создаём новый слайдер - "SA Slides/Add new slider".
Вставляем в каждый слайд нужный шорткод. В настройках включаем поддержку шорткодов (смотри рисунок ниже). Ну и выставляем нужные настройки отображения, в зависимости от того, что мы делаем - полноразмерный слайдер или карусель.
В результате получаем вот такой, например, слайдер с несколькими слоями и активной кнопкой.
Способ 2 - Карусель и слайдер с помощью плагина Premium addons
Суть здесь та же. Сначала мы создаём отдельные страницы (секции), а потом собираем их в слайдер. Но этот вариант проще. В этом случае мы используем только один плагин Premium addons for Elementor. После его установки переходим на страницу, где нужно установить слайдер и добавляем виджет Premium Carousel.
Далее в поле Templates выбираем наши сделанные странички и собираем слайдер.
Играемся с настройками виджета и получаем желаемый результат.
Способ 3 - Слайдер из секций стандартными средствами Elementor Pro
Всё очень просто. Для этого мы будем использовать виджет "Карусель отзывов" из набора, доступного только в Elementor Pro.
Например, мы хотим сделать карусель из нескольких блоков с ценами, три из которых будут в видимой части экрана, а остальные будут перелистываться.
Для этого необходимо создать несколько нужных секций в Elementor и скопировать их шорткоды.
Далее переходим в "Карусель отзывов", создаём необходимое количество слайдов, удаляем там всю информацию и в поле с текстом вставляем шорткоды созданных секций.
Не пугайтесь, что в редакторе блоки отображаться не будут - во фронтэнде всё будет работать.
При такой реализации слайдера есть небольшой нюанс! Стили виджета карусели могут перебивать стили ваших созданных блоков, поэтому придётся поиграться с настройками виджета. Если вы хорошо знакомы с Elementor, то проблем у вас возникнуть не должно.