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

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

Установка

Установка проста и понятна.

1. Купите и загрузите плагин в Divi Marketplace.
2. Перейдите в Плагины > Добавить новый > Загрузить плагин.
3. Нажмите Выбрать файл
4. Найдите zip-файл плагина на своем компьютере и выберите его.
5. Нажмите Установить сейчас
6. Нажмите Активировать
7. Перейдите в Divi Supreme Pro > License на панели инструментов WordPress и введите свой лицензионный ключ.

общие настройки

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

Запланированный элемент

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

Неожиданно возникнуть

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

Подробнее

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

Виджет библиотеки

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

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

Отзывчивый зритель

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

Легкий конструктор тем

Easy Theme Builder позволяет настраивать заголовок, изменять цвета элементов заголовка при прокрутке и настраивать элементы сжатия.

Фиксированный заголовок

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

Заголовок теперь исправлен, поэтому, когда я прокручиваю, заголовок остается на месте.

Прокрутка

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

Вот мой заголовок Theme Builder перед прокруткой. Я установил для него значение «Фиксированный» и сдвинул содержимое вниз. Этот заголовок состоит из двух разделов.

Вот заголовок после прокрутки. Цвет фона двух разделов изменился в соответствии с моими настройками.

Сокращаться

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

Вот мой заголовок Theme Builder с его настройками по умолчанию и новым логотипом.

Я увеличил размер, чтобы было легко увидеть разницу. Я добавил 8 пикселей отступа и установил изображение на 80%. Теперь он изменил логотип на мое новое изображение.

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

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

Разное

Разные настройки позволяют удалять данные плагина при удалении, разрешать загрузку файлов JSON и SVG, а также изменять имя и значок меню Divi Supreme.

Модули Divi

Divi Supreme добавляет 42 новых модуля в Divi Builder. Они добавляют множество новых функций для изображений, текста, кнопок, контактных форм, социальных сетей и т. Д. Давайте рассмотрим некоторые из них.

Высшее рабочее время

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

Верховная кнопка

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

Высшая карта

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

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

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

Карточная карусель Supreme

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

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

Высший двойной заголовок

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

Встроенная карта Google Supreme

Встроенная карта Google позволяет добавить адрес, который вы хотите закрепить, и выбрать уровень масштабирования. Никакой другой настройки не требуется. Он использует Ctrl + для масштабирования, поэтому пользователи могут прокручивать его без остановки страницы для масштабирования карты.

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

Встроенная хронология Твиттера Supreme

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

Комментарии Supreme Facebook

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

Список значков Supreme

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

Высшие формы

Supreme Shapes позволяет выбрать фигуру из раскрывающегося списка и установить ее размер. У него есть 17 различных форм на выбор.

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

Покупка

Divi Supreme доступен на Divi Marketplace за 79 долларов. Цена включает неограниченное использование веб-сайта и один год поддержки и обновлений.

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

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

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

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