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

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

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

Модуль карусели продуктов Divi

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

В Divi Builder добавлен новый модуль под названием Product Carousel. На нем есть фиолетовый значок, поэтому он выделяется из толпы.

Настройки включают вкладки «Содержимое», «Дизайн» и «Дополнительно». На вкладке Content есть настройки для контента WooCommerce. В раскрывающемся списке выберите тип продукта: недавний, избранный, распродажа, самый продаваемый, самый популярный или категория продукта. Введите число для количества продуктов, которое вы хотите отобразить. Выберите порядок сортировки по популярности, рейтингу, дате или цене. Вы также можете включить кнопку и описание «Добавить в корзину». Покажите полное описание или отрывок.

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

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

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

Настройки модуля карусели продуктов Divi

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

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

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

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

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

Вот как это выглядит с выбранным Overflow. Он обеспечивает приятный эффект 3D-карты. Вы можете настроить угол поворота и включить тень от слайда.

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

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

Это макет из 5 столбцов с теми же настройками, что и в примере выше.

Карусель продуктов хорошо вписывается в макеты Divi. В этом примере я заменил модуль магазина Divi на модуль карусели продуктов Divi и изменил его стиль в соответствии с макетом.

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

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

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

Здесь используется переполнение с макетом из 3 столбцов.

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

Он также показывает звездный рейтинг из обзоров при наведении курсора. Рейтинг размещается рядом с кнопкой «Добавить в корзину». Он объединяет их вместе с классной анимацией. Это настройки по умолчанию. Вы можете стилизовать цвета фона и звезд.

В этом я стилизовал рейтинги, чтобы они соответствовали элементам макета.

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

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

В настоящее время на сайте разработчика есть 13 загружаемых демоверсий. Это макеты, которые вы можете загрузить в библиотеку Divi и использовать с любым макетом Divi. Все они включают стили для модуля Divi Product Carousel, а некоторые включают другие стилизованные модули и фоны. Они хороши для того, чтобы получить отправную точку в дизайне карусели продуктов и показать некоторые вещи, которые можно сделать с помощью модуля. Давайте посмотрим на некоторые из них.

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

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

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

Он включает в себя зеленый фон и стилизованные под него слайды. Кнопка «Добавить в корзину» становится светло-зеленой при наведении курсора на продукт и темно-зеленой при наведении курсора на кнопку. Он включает стилизованный текстовый модуль для заголовка.

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

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

Он включает стилизованный фон и добавляет рамку, стилизованную кнопку «Добавить в корзину», значок продажи и обведенные стрелки. Накладка белая. Цена размещается вверху, а все остальные данные - внизу.

Цена и документация на модуль карусели продуктов Divi

Существует два варианта приобретения модуля карусели продуктов Divi:

• Одиночный сайт - 19 $
• Безлимитные сайты - 39 $

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

Документация предоставляется в виде видеоролика YouTube, в котором рассказывается о функциях. Вы найдете ссылку на него в меню DiviGear на панели управления. Если у вас более одного продукта DiviGear, выберите вкладку продукта, а затем выберите «Документация».

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

Карусель продуктов Divi проста в использовании и отлично подходит для выделения ваших продуктов. Даже если вы не хотите отображать их в виде слайдера, у него есть множество вариантов стилей и презентаций продукта, которые стоит рассмотреть. Я не очень хорошо работал с Extra. Мне бы хотелось, чтобы Extra поддерживался, поскольку он уже имеет множество функций WooCommerce и является отличной платформой для создания магазинов WooCommerce.

Мне нравится, что у него есть загружаемые демоверсии. Они включают фон и стиль для модуля. Они отлично подходят для того, чтобы дать вам отправную точку или пробудить ваше воображение для представления продуктов WooCommerce в макетах Divi.

Если вы хотите представить свои продукты WooCommerce в виде карусели или просто иметь еще несколько вариантов дизайна, стоит взглянуть на модуль карусели продуктов Divi. Он доступен на веб-сайте разработчика и на торговых площадках Divi.

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

Избранные изображения Letters-Shmetters / shutterstock.com