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

Divi Toolbox - это сторонний плагин, который добавляет в Divi множество новых эффектов, для которых обычно требуются CSS, JavaScript, PHP или множество отдельных плагинов. Эффекты просты в использовании и настройке и придают вашему сайту Divi дополнительную яркость, чтобы выделиться из толпы.

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

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

Экран параметров панели инструментов Divi добавлен в меню панели инструментов Divi. Здесь настройки включены, но корректировки производятся в настройщике.

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

При добавлении дополнительных значков социальных сетей открывается поле, в котором вы можете ввести URL-адреса еще 9 социальных сетей.

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

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

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

Настройки заголовка Divi Toolbox

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

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

Вот настройщик шапки. Я добавил макет над меню (в этом примере это просто текстовый модуль, но вы можете добавить полный макет, если хотите). Перекрывающийся логотип имеет квадратную рамку с теневыми эффектами. Я изменил размер логотипа с 200 на 140 и переместил значки социальных сетей в главное меню. Я нахожу курсор на пункт меню «Службы», чтобы вы могли увидеть эффект CSS.

Настройки нижнего колонтитула Divi Toolbox

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

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

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

Мобильные настройки Divi Toolbox

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

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

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

Настройки блога Divi Toolbox

Настройки блога позволяют настраивать боковую панель и виджеты, мета поста, страницы архива и категорий, выбирать макет (из 6 вариантов), скрывать боковую панель архивов и настраивать текст кнопки «Читать дальше».

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

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

Это макет 6. Я снова настроил цвета мета-шрифта и добавил цвет при наведении курсора. Я также настроил фон кнопки «Читать дальше».

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

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

Настройки модулей Divi Toolbox

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

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

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

Настройки дополнительных компонентов Divi Toolbox

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

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

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

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

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

Лицензия Divi Toolbox

На выбор есть две лицензии:

• Обычная лицензия (для использования в одном проекте) - 49,00 евро
• Расширенная лицензия (для использования в неограниченном количестве проектов) - 169,00 евро

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

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

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

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

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

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