Особенности плагина Divi: модуль Divi Carousel

DIVI Carousel Module - это сторонний плагин для Divi и Extra, который добавляет расширенный слайдер карусели в Divi Builder. У вас есть контроль почти над всем в модуле, чтобы создать практически любой тип карусели, который вам нужен для вашего сайта Divi или Extra. В этой статье мы рассмотрим модуль Divi Carousel и посмотрим, что он может делать и насколько прост в использовании.

Установка и активация модуля Divi Carousel

Загрузите и активируйте плагин как обычно. На панель управления добавлен новый пункт меню под названием DiviGear. Войдите в это меню и добавьте свой лицензионный ключ.

Модуль Divi Carousel в Divi Builder

В Divi Builder добавлен новый модуль под названием Divi Carousel.

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

Вкладка «Дизайн» включает настройки для наложения, изображения (ширины), границы изображения, заголовка и основного текста, цвета, интервала и границы. Это включает настройку цвета как для стрелочной, так и для точечной навигации.

На вкладке «Дополнительно» есть все ожидаемые поля CSS, а также настройки видимости и перехода. Он добавляет поля CSS для заголовка, содержимого, изображения и кнопки.

Настройки элементов карусели также включают три вкладки. Эти настройки отменяют все, что установлено в основных настройках модуля. На вкладке «Контент» есть область для основного контента, заголовка и ссылки на изображение, настроек кнопок, настроек изображения и фона.

Вкладка «Дизайн» включает настройки для текста заголовка, стиля содержимого (основного текста), кнопки, интервала и тени блока. Это стандартные настройки дизайна, которые вы увидите в большинстве модулей Divi. Вкладка Advanced - это основные настройки большинства модулей.

Для настроек изображения вы можете использовать изображения или значки.

Добавьте столько слайдов, сколько хотите. Слайды отображаются рядом в соответствии с номером, который вы установили для отображения. Этот настроен на отображение четырех. Конечно, вы можете перетаскивать их в любом порядке.

В этом я установил интервал между элементами на 100. Основное отличие, которое показано в моем примере, - это текст. Теперь в каждой строке отображается меньше слов.

Здесь используется стрелочная навигация. Я установил его так, чтобы он отображался на внешней стороне слайда. Я установил интервал между элементами на 1. Это станет более очевидным, если вы используете цвета фона.

Я установил этот, чтобы показывать два слайда. Он показывает точечную навигацию.

Взгляните на расширенные настройки. Я установил эффект ползунка на Coverflow. Это открывает возможность поворота и тени. Эта функция показывает, что действительно отличает модуль от стандартного слайдера. Это настройки по умолчанию.

Теперь я установил поворот на 100. Слайды наклонены еще больше в трехмерном направлении влево, в сторону от экрана.

Вот тот же поворот, но без тени Coverflow.

Примеры модуля Divi Carousel

Одно из моих любимых применений карусели - показ логотипов клиентов или продуктов. В этом примере я добавил модуль на страницу портфолио целевой страницы разработчика приложений. Я установил отображение трех логотипов компаний, циклическую прокрутку и автоматическое воспроизведение, чтобы посетителю не нужно было перемещаться по ним.

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

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

Здесь используется эффект ползунка «Переполнение». Это настройки по умолчанию.

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

Этот настроен на отображение 3 слайдов. Я установил Поворот на 80.

Этот настроен на отображение 6 слайдов. Для поворота установлено значение по умолчанию (50).

На этом показано 6 слайдов без включения центрального слайда или переполнения.

На этом показано 6 с включенным центральным слайдом.

В этом примере я использую модуль как слайдер меню еды. Добавляя изображение, текст и кнопку, он фактически создает слайдер с размытыми изображениями. Изображения имеют ширину 100. Я добавил оверлей, кнопку для покупки каждого элемента (кнопка переводит вас на страницу продукта для этого элемента) и точечную навигацию. Я стилизовал наложение и значок наложения, а также точки как для активных, так и для неактивных слайдов. Он идеально вписывается в макет Coffee.

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

Здесь используется эффект Coverflow. Я нахожу курсор на левый слайд, чтобы показать наложение и стрелки.

Для этого я добавил фон и тень блока только на один из слайдов. Это можно использовать, чтобы показать, что продается, или выделить лучшее.

Для этого я использую только значки. Я поместил модуль рядом с набором модулей аннотации и установил 6 ссылок на социальные сети. Они стилизованы под размытые изображения. При нажатии на значок открывается социальная сеть. Я установил автоматическое скольжение каждую секунду.

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

В этом примере я хотел создать простой слайдер с таблицей цен. Я упростил цены из пакета макетов поля для гольфа.

Теперь я добавил тень от коробки. Сначала мне не удавалось заставить вертикальную тень проходить под слайдом. Потом я понял, что слайды касаются стенок контейнера модуля. Я добавил заполнение модуля и затем смог добавить тени блоков со всех сторон слайдов.

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

Я добавил стрелки и стилизовал их под элементы макета.

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

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

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

Вот как модуль выглядит в макете поля для гольфа. В оригинальном макете было много ценовых особенностей. При использовании модуля Divi Carousel все цены по-прежнему указаны, но они показаны на слайдах. Похоже, он принадлежит этому макету.

Он также отлично работает с Extra. В этом примере я установил, что на странице не отображается боковая панель.

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

Цена модуля Divi Carousel

Модуль Divi Carousel доступен на сайте разработчика. Доступны два варианта:

• Один сайт - 15 $
• Безлимитные сайты - 29 $

Документация и поддержка модуля Divi Carousel

Документация доступна в меню панели инструментов DiviGear. Выберите вкладку «Документация». Здесь есть ссылки на 4-минутное видео-пошаговое руководство на канале DiviGear на YouTube. Поддержка билетов осуществляется через Freshdesk.

Конечные мысли

Модуль Divi Carousel - это простой способ добавить слайдер карусели в Divi Builder. Он интуитивно понятен и на самом деле имеет больше настроек, чем я ожидал. Несколько раз мне не удавалось правильно клонировать слайд, но это могло быть проблемой с моей стороны. Не забудьте присвоить каждому слайду ярлык администратора, иначе они покажут название элемента в модуле, что затруднит их различение.

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

Divi Carousel Module - отличный слайдер-карусель. Он доступен на веб-сайте разработчика и на торговых площадках Divi.

Ждем вашего ответа. Вы пробовали модуль Divi Carousel? Дайте нам знать, что вы думаете об этом, в комментариях ниже.

Лучшее изображение через Anatolir / shutterstock.com