Особенности плагина Divi: Divi Essential

Divi Essential - это сторонний плагин для Divi, который добавляет более 60 новых модулей в Divi Builder. Модули включают в себя множество анимаций и функций дизайна, которые придадут вашему веб-сайту Divi профессиональный вид. В этом выделении плагина мы рассмотрим Divi Essential и посмотрим, какие типы модулей у него есть, чтобы помочь вам решить, подходит ли это плагин для ваших нужд Divi.

Основные модули Divi

Загрузите и активируйте плагин как обычно. Никаких других настроек не требуется. Divi Essential добавляет в Divi Builder более 60 новых модулей. В списке модулей они синие и при наведении курсора показывают фиолетовый градиент в одну сторону. Их имена описательны, что позволяет легко понять, на что они способны. Пару имен сначала не так легко понять, но как только вы загрузите модуль на свою страницу, становится очевидно, для чего они нужны. Мы рассмотрим несколько выделяющихся модулей.

Следующий слайдер 3D Cube

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

Следующее объявление

Next Blurb похож на стандартный модуль рекламных объявлений, но добавляет несколько новых элементов, включая текст заголовка до и после, несколько фонов, а также эффекты 2D и наклона при наведении курсора. В этом примере я добавил несколько цветов фона и включил эффект наклона. Плитка также может иметь блики и обратный наклон.

Следующая кнопка

Следующая кнопка работает как стандартная кнопка, но имеет множество настроек при наведении курсора. Укажите разные размеры, цвета и анимацию для цветов, границы и значка.

Следующее круговое изображение

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

Следующий слайдер Coverflow

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

Следующий обзор Divi

Divi Review можно использовать как персональный модуль и как модуль обзора продукта. Этот модуль будет хорошо работать при обзоре и рейтинге услуг. Он включает изображение, систему оценок и текст с именем, должностью и описанием. По умолчанию у него есть рамка и тень блока.

Следующий разделитель

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

Следующая двойная кнопка

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

Следующий список возможностей

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

Поле для наведения на следующее изображение

Поле для наведения на изображение отображает изображение, а затем заменяет его при наведении на фон, заголовок и содержимое. Вы можете добавить что угодно к содержимому и стилизовать каждый из элементов. Выбирайте из 13 эффектов наведения и 4 направлений. Анимации интересные. Изображения можно вращать, переворачивать, вращать, масштабировать и т. Д.

Эффект значка следующего изображения

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

Прокрутка следующего изображения

Прокрутка изображений помещает изображение в окно, которое короче, чем изображение. Когда вы наводите курсор на изображение, оно будет прокручиваться в окне, чтобы показать остальную часть изображения. Он включает в себя оверлей и кнопку. Оверлей исчезает при наведении курсора. Это отлично подходит для демонстрации таких продуктов, как макеты Divi, карты местоположений или другие типы высоких изображений.

Следующая Галерея Кладки

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

Эффект Next Mega Image

Mega Image Effect отображает изображение и заменяет его наложением и кнопкой при наведении курсора.

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

Следующая промо-коробка

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

Следующий этап потока

Step Flow - интересный вариант модуля аннотации. Он отображает шаг, который включает изображение или значок, стрелку, значок и содержимое. Стрелка может указывать в любом направлении, и вы можете настроить стили текста, стрелки, значка и круга. Это замечательно, если вы хотите отображать шаги в пронумерованном порядке, и каждый из них указывает на следующий.

Следующая временная шкала

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

Купить Divi Essential

Divi Essential доступен на торговой площадке Divi Marketplace. Он включает более 60 модулей и доступ к более чем 500 профессионально разработанным макетам с использованием модулей. Обычная стоимость составляет 79 долларов за неограниченное использование веб-сайта, включая 1 год поддержки и обновлений.

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

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

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

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

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

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