Главная / Уроки / Elementor / Крутой слайдер или карусель на Elementor

Крутой слайдер или карусель на Elementor

Содержание

В бесплатной версии Elementor есть виджет для создания слайдера или карусели, но он очень примитивный. В этом посте я подскажу вам три способа, как можно сделать крутой многослойный слайдер на Elementor любой сложности. И главное, реализовать это можно как в бесплатном Elementor, так и в Elementor Pro.

При помощи этих способов можно делать сложные многослойные слайдеры с анимацией, кнопками и всем чем угодно.

blank

Способ 1 - Слайдер из блоков на Elementor при помощи 2 плагинов

Суть этого варианта в том, что мы создаём каждый слайд, как отдельную страницу, используя все возможности Elementor. А потом из таких страниц-слайдов соберем уже слайдер.

Для этого способа нам понадобятся два плагина:

  • AnyWhere Elementor
  • Slides anythig

Они есть в репозитории WordPress, поэтому заходим туда и устанавливаем их.

После этого заходим в первый плагин и создаём первый слайд-страницу. Путь в меню - "AE Templates/Add new".

плагин для создания слайдера на Elementor

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

cозданиt слайдера на Elementor

Далее делаем необходимое количество таких страниц-слайдов, копируем их шорткоды и переходим к следующему плагину Slides anythig. Создаём новый слайдер - "SA Slides/Add new slider".

Вставляем в каждый слайд нужный шорткод. В настройках включаем поддержку шорткодов (смотри рисунок ниже). Ну и выставляем нужные настройки отображения, в зависимости от того, что мы делаем - полноразмерный слайдер или карусель.

карусель Elementor

В результате получаем вот такой, например, слайдер с несколькими слоями и активной кнопкой.

слайдер с помощью Elementor

Способ 2 - Карусель и слайдер с помощью плагина Premium addons

Суть здесь та же. Сначала мы создаём отдельные страницы (секции), а потом собираем их в слайдер. Но этот вариант проще. В этом случае мы используем только один плагин Premium addons for Elementor. После его установки переходим на страницу, где нужно установить слайдер и добавляем виджет Premium Carousel.

Premium addons карусель

Далее в поле Templates выбираем наши сделанные странички и собираем слайдер.

blank

Играемся с настройками виджета и получаем желаемый результат.

Способ 3 - Слайдер из секций стандартными средствами Elementor Pro

Всё очень просто. Для этого мы будем использовать виджет "Карусель отзывов" из набора, доступного только в Elementor Pro.

Например, мы хотим сделать карусель из нескольких блоков с ценами, три из которых будут в видимой части экрана, а остальные будут перелистываться.

слайдер блоков с помощью Elementor pro

Для этого необходимо создать несколько нужных секций в Elementor и скопировать их шорткоды.

blank

Далее переходим в "Карусель отзывов", создаём необходимое количество слайдов, удаляем там всю информацию и в поле с текстом вставляем шорткоды созданных секций.

blank

Не пугайтесь, что в редакторе блоки отображаться не будут - во фронтэнде всё будет работать.

При такой реализации слайдера есть небольшой нюанс! Стили виджета карусели могут перебивать стили ваших созданных блоков, поэтому придётся поиграться с настройками виджета. Если вы хорошо знакомы с Elementor, то проблем у вас возникнуть не должно.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *