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

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

Установка модуля ленты Divi

1. Зайдите и скачайте плагин
2. На панели инструментов WordPress перейдите в Плагины > Добавить новый.
3. Нажмите Загрузить плагин.
4. Выберите заархивированный файл на вашем компьютере
5. Нажмите Установить сейчас
6. Когда вы увидите «Плагин успешно установлен», нажмите « Активировать плагин».
7. Перейдите в Инструменты > Лицензия плагина Divi Ribbon и введите свой лицензионный ключ.

Модуль ленты Divi

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

Вкладка содержимого ленты Divi

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

Основные настройки

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

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

Разветвленный может отображаться вверху слева или справа.

Полная ширина может отображаться сверху или снизу.

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

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

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

Blurb Rotation

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

Добавьте изображения из медиатеки и значки из списка. Сначала отобразится изображение / значок, а затем карточка будет переворачиваться, чтобы отобразить содержимое при наведении курсора. Вы также можете добавить изображения в качестве фона.

Кнопка

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

Вкладка "Дизайн ленты Divi"

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

Изображение и значок

Параметры изображения и значка позволяют настроить ширину изображения, границу, тень блока, цвета, режим наложения и т. Д.

Вращение

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

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

Интервал текста

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

Настройки ленты

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

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

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

Текст

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

Кнопка

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

Примеры лент Divi

Вот несколько примеров того, как Divi Ribbon выглядит в макетах Divi.

В продаже лента

В первом примере я заменю CTA справа.

Он состоял из трех модулей: изображения, текста и кнопки. Я использую тот же фон, текст и кнопку и воссоздаю их с помощью одного модуля Divi Ribbon.

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

Я не включил волнистое изображение (треугольная волна), но его можно было легко добавить в область содержимого. Заголовок также необходимо переместить в область содержимого, чтобы изображение отображалось над заголовком. Лента «Распродажа» делает его еще более привлекательным.

Лента последних проектов

Для этого я заменил изображение на модуль Divi Ribbon и добавил ленту во всю ширину в качестве CTA, чтобы увидеть последние проекты. На ленте есть фоновое изображение и шрифты из макета. Тень блока является настройкой по умолчанию. Я выровнял текст по центру.

Лента с призывом к действию продукта

В этом примере я добавил модуль Divi Ribbon в раздел героев страницы магазина макета Leather Company. Используя изображение из макета, я заменил стандартный призыв к действию. Лента и кнопка используют цвета из макета. Я переместил ленту в правый нижний угол и удалил конец ленты.

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

Тест и покупка

Вы можете приобрести Divi Ribbon Module на веб-сайте разработчика за 11 долларов США для личного или коммерческого использования на одном веб-сайте.

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

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

Divi Ribbon Module - интересный модуль для Divi Builder. Он включает в себя несколько мест для добавления изображений, и вы можете включать заголовок, контент, значок и кнопку. Обладая всеми этими функциями, он отлично работает как рекламное объявление, призыв к действию, ссылка на продукт, ссылка на блог и т. Д. Добавьте к этому стильную ленту, чтобы привлечь внимание к продажам или другим CTA, и этот плагин предоставляет варианты стиля, которые трудно подобрать. получить с одним модулем.

Модуль Divi Ribbon отлично работает с Visual Builder и Theme Builder. Это отличный плагин, который легко порекомендовать.

Ждем вашего ответа. Вы пробовали модуль ленты Divi? Расскажите нам о своем опыте в комментариях.

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