Описание плагина Divi: Divi Next Blurb

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

Модуль Divi Next Blurb

После загрузки и активации Divi Next Blurb в Divi Builder добавляется новый модуль под названием Next Blurb. Вам не нужно ничего настраивать. Готово к использованию.

Вкладка Divi Next Blurb Content

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

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

Добавьте изображение и значок одновременно или по отдельности. Стандартный модуль рекламных сообщений Divi отображает только одно или другое. Divi Next Blurb открывает множество возможностей дизайна, позволяя отображать и то, и другое одновременно.

Включите кнопку со стандартным стилем кнопки.

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

Вкладка Divi Next Blurb Design

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

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

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

Это помещает изображение в правый центр. Я добавил рамку и изменил ее цвет. Я также добавил тень от коробки.

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

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

Значок следующего рекламного объявления

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

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

Следующие эффекты при наведении курсора

Эффект наведения включает опции 2D и Tilt. Вариант 2D предоставляет на выбор 16 эффектов.

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

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

В этом примере добавлено больше бликов и перспективы. Есть много способов настроить наклон.

Следующий рекламный текст

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

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

Кнопки следующей вставки

Включены все стандартные настройки текста кнопок и значков. Я увеличил размер шрифта и изменил цвет. В этом примере показаны настройки значка кнопки.

Button Hover включает в себя множество настроек, включая 2D, фон, обводку и значок. Настройки 2D включают множество эффектов наведения.

Button Hover включает в себя множество настроек, включая 2D, фон, обводку и значок. В настройках 2D есть множество эффектов наведения. Фоновый эффект включает еще один набор эффектов. Это показывает кнопку при наведении курсора.

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

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

Divi Next Blurb, пример первый

В качестве примера я хочу заменить текст «Продажа» в правой части макета «Кожаная компания» модулем Next Blurb и добавить несколько функций.

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

Вот воссозданный призыв к действию Sale с использованием только модуля Next Blurb. В этом примере я все еще использую черный фон для столбца.

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

Теперь я могу добавлять эффекты и функции, которые я не мог получить с изображением и кнопкой в ​​исходном макете. Например, я добавил эффект наведения «Увеличить поворот» 2D. Поскольку я разместил текст заголовка и кнопку на черном фоне для этого пространства столбца, карта, кажется, остается на месте, пока содержимое наклоняется.

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

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

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

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

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

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

Divi Next Blurb, пример второй

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

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

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

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

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

Вот как следующие пятна выглядят в макете.

Divi Next Blurb Цена и где купить

Divi Next Blurb имеет три доступных лицензии:

• Одиночная лицензия - 25 долларов США
• Безлимитная лицензия - 49,00 $
• Бессрочная лицензия - 99 долларов США.

Вы можете приобрести его на сайте разработчика.

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

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

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

Мне очень нравится Divi Next Blurb. Если вас интересует простой в использовании модуль рекламных объявлений, который делает намного больше, чем стандартный модуль Divi, стоит взглянуть на Divi Next Blurb.

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

Избранные изображения через Леонида Зарубина / shutterstock.com