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

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

Divi Madmenu с конструктором тем Divi

Divi Madmenu был разработан специально для работы с Divi Theme Builder. После установки плагина перейдите в Divi Theme Builder, нажмите « Добавить глобальный заголовок» и выберите « Создать глобальный заголовок», чтобы создать свой собственный заголовок.

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

Содержание

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

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

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

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

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

Если поиск включен, вы можете выбрать значок или изображение.

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

Кнопки 1 и 2 настраиваются независимо, но имеют одинаковые параметры. Добавьте текст, значок, выберите размещение значка, видимость, ссылку и выберите способ открытия. В приведенном выше примере я добавил текст к обеим кнопкам и добавил значок к первой кнопке.

Дизайн

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

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

Элементы макета позволяют управлять выравниванием, шириной и т. Д. Меню, логотипа, поиска, корзины, кнопки 1 и кнопки 2.

Каждый из элементов имеет вариант оформления текста, который включает настройки как для обычного, так и для фиксированного меню. Отрегулируйте цвет активной ссылки, обычный цвет ссылки, шрифт, толщину шрифта, размер, интервал и т. Д. Пример выше: Текст: Меню рабочего стола. Я изменил цвета, размер шрифта и интервал.

Текст

Это текст: подменю рабочего стола . Я изменил цвета, размеры шрифта и сделал текст в верхнем регистре.

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

Это текст: мобильное меню . Я изменил цвета шрифта и сделал текст в верхнем регистре.

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

Текст: кнопка 1 и текст: кнопка 2 имеет одинаковые параметры и независимо управляет своими кнопками. Я увеличил размер шрифта для обеих кнопок и сделал кнопку 1 больше. Я также изменил их цвета. Для кнопки 2 я выбрал другой шрифт.

Текст: Корзина управляет шрифтом для текста содержимого корзины. Я изменил цвет шрифта, увеличил размер, сделал шрифт курсивом, подчеркнул шрифт волнистым стилем и изменил цвет подчеркивания.

Меню

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

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

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

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

Мы можем получить лучшее представление о том, что можно сделать с меню, покопавшись в демонстрациях.

Divi Madmenu Demos

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

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

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

Демо 1

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

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

Демо 2

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

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

Демо 3

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

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

Демо 5

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

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

Демо 7

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

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

Демо 8

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

В мобильном меню кнопки расположены слева, а логотип и значок меню - справа.

Демо 10

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

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

Купить Divi Madmenu

Divi Madmenu можно приобрести в Divi Marketplace за 39 долларов в год для неограниченного использования и одного года обновлений и поддержки.

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

Divi Madmenu для Divi Theme Builder имеет множество функций и настроек, что упрощает создание практически любого типа заголовка, который может вам понадобиться. Огромное количество настроек на вкладке «Дизайн» поначалу может сбивать с толку, но они просты в использовании, и не нужно много времени, чтобы понять, что и что контролирует. Использование двух кнопок вместе с добавлением изображений и значков к кнопкам поиска и корзины открывает множество возможностей дизайна. Если вы заинтересованы в создании интересных меню с помощью одного модуля, вам стоит взглянуть на Divi Madmenu.

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

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