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

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

Мобильное меню Divi по умолчанию

Для сравнения, вот мобильное меню Divi по умолчанию. Меню автоматически изменится на гамбургер-меню. При нажатии на меню открывается раскрывающееся меню со всеми ссылками. Это не регулируется отдельно от стандартного меню.

Настройщик тем

В настройщик тем добавлено новое меню под названием Divi Mobile. Он темно-синий с зеленым текстом, поэтому выделяется. Все настройки выполняются в этом меню. Я использую пакет макетов Financial Advisor.

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

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

Стиль и настройки меню

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

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

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

Нижняя панель навигации отображает значки внизу экрана. Это настраивается в другом меню под названием «Настройки нижней навигации».

Настроив точку останова, вы можете настроить отображение мобильного меню на рабочем столе.

Пользовательский заголовок

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

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

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

Выберите меню бургера

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

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

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

Я установил золотой цвет значка открытия.

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

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

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

Внедрить макеты

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

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

Внешний вид меню

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

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

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

Внешний вид подменю

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

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

Это стиль подменю Side By Side. Он помещает значок стрелки, указывающий на пункты подменю. Вы можете настроить высоту, положение, цвет и т. Д. Как для значка открытия, так и для значка закрытия. Я изменил настройки для открытого значка.

Прекратить штабелирование

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

Просто добавьте модуль в строку. Больше ничего не нужно.

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

Где купить

Divi Mobile доступен на сайте разработчика. Есть несколько лицензий на выбор:

Ежегодный

• 1 сайт £ 12
• 2-5 Сайтов £ 36
• Безлимитный £ 64

Продолжительность жизни

• 1 сайт £ 40
• Безлимитный £ 196

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

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

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

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

Я был впечатлен тем, что я мог делать с Divi Mobile. Если вас интересует плагин Divi для создания настраиваемых мобильных меню, стоит взглянуть на Divi Mobile.

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

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