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

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

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

divi toolbox settings.png

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

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

общие параметры divi toolbox.png

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

добавить социальную сеть divi.png

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

настройки ящика для инструментов divi settings.png

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

пользовательский экран входа в систему divi.png

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

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

настройки заголовка divi.png

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

настройка панели инструментов divi.png

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

настройщик заголовка divi.png

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

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

настройки нижнего колонтитула divi.png

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

настроить нижний колонтитул divi.png

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

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

Настройки для Divi Toolbox Mobile

Настройки панели инструментов для mobile.png

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

Divi-Toolbox-Mobile-Settings-for mobile.png

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

мобильное меню animation.png

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

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

настройки блога divi toolbox.png

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

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

настроить внешний вид блога divi.png

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

Результат настройки интерфейса блога divi.png

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

изменить шрифт содержимого блога divi.png

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

настройка раздела комментарий divi.png

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

Divi Toolbox Лицензия

У вас есть выбор между двумя лицензии :

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

Что помнить

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

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

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