Мега менютата са популярен дизайнерски елемент, който може да придаде на вашия уебсайт тласък на елегантност, като същевременно предоставя на посетителите допълнителен слой навигация. Има няколко начина за добавяне на мега менюта в Divi. Един от най-простите методи, които съм използвал, е дадобавка на трета страна, наречена Divi Mega Pro .

Divi Mega Pro улеснява създаването на мега менюта с помощта на Divi Builder. Всяко меню може да бъде добавено към всеки елемент с помощта на CSS клас. Това означава, че можете да добавите оформление Divi към всяка връзка в менюто, но можете да отидете още по-далеч и да ги добавите към всеки елемент от оформление Divi само като добавите CSS клас.

Той е идеален за създаване на менюта и изскачащи прозорци с модули на магазини, изображения, плъзгачи, портфейли, икони, разгъване, видеоклипове, блогове и др Работи и с Extra.

Създайте мега меню Mega Pro

Менюто Divi Mega Pro се добавя към менюто на таблото. Тук можете да въведете вашия лицензен ключ, да видите менютата, които сте създали и да създадете ново меню. Когато щракнете, за да добавите ново меню, ще видите редактор за типа публикация в менюто. Екранът е прост, но тук се случва много.

издател - можете да създадете мега-меню или подсказка с помощта на Divi Builder.

Mega Pro Background - можете да изберете цветовете на фона и шрифта.

Преглед на местоположенията - изберете всички страници или назовете конкретни страници, след което въведете изключения.

Mega Pro Анимация - изберете анимация. Изберете изместване, отместване, перспектива, избледняване или мащабиране.

Мега Про Тригери - добавяне на тригер като CSS селектор. След като го запазите, ще видите CSS класа, който ще поставите в полето на CSS класа на елемент от менюто, модул, ред или раздел. Това е, което се щраква или задържа, за да се покаже менюто. Всичко може да се използва като спусък, а не само елемент от менюто. Това означава, че можете също да използвате Divi Mega Pro за създаване на изскачащи прозорци или подсказки.

Настройки на дисплея Mega Pro : изберете посоката на показване (отгоре или отдолу), въведете горните и долните полета в пиксели, изберете процент от ширината и активирайте стрелка. Активирането на стрелката разкрива повече персонализации, където можете да изберете типа стрелка (триъгълник или кръг), да изберете цвета, да зададете ширината и височината и да прегледате стрелката.

персонализации бутон за затваряне: активирайте бутона за затваряне на работния плот или на мобилния телефон и персонализирайте бутона за затваряне. Ако го активирате, се визуализират персонализации за цвят на текста, цвят на фона, размер на шрифта, радиус на границата, запълване и показване.

Допълнителни параметри Mega Pro - изберете вида на спусъка (задържан или щракнат), вида на изхода (задържан или щракнат) и въведете закъснението при излизане.

Divi Mega Pro модели

Разработчикът е предоставил няколко модела за Divi Mega Pro. Когато закупите приставката, тези шаблони са налични във вашия акаунт, в раздела Шаблони за оформление на приставки. Те са чудесни, за да ви помогнат да започнете да проектирате вашите мега менюта. Ще използвам няколко в моите примери.

Меню Divi Mega Pro

След като създадете мега меню, то ще се появи в списъка. Тук можете да редактирате, бързо да редактирате или изтриете менютата. Можете също да търсите, да филтрирате по дата, да преглеждате по състояние и т.н. Той също така предоставя уникалния клас Mega Pro, така че можете да ги копирате от тук, вместо да отваряте всеки, за да получите класа.

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

Сигурен съм, че не би било лесно да се добави, но функцията за копиране и редактиране би била удобна. Можете да запазите оформленията Divi във вашата библиотека за повторна употреба, но това не включва околните настройки.

Добавяне на спусък

В полето Mega Pro Triggers ще видите един клас Mega Pro. Копирайте и го поставете в полето CSS Class на елемента, който искате да използвате като задействане.

За да добавите полето CSS Class към елемент от менюто, трябва да активирате CSS класове. От екрана на менюто изберете Опции на екрана и активиране на CSS класове.

Поставете CSS класа в полето на менюто. Сега този елемент от менюто ще покаже мега менюто при задържане и ще ви отведе до страницата при щракване.

Ще забележите, че Divi Mega Pro също е опция в опциите за връзки в менюто. Те са чудесни за добавяне на елемент от менюто към менюто, който всъщност не отива никъде. Добавете CSS класа като всеки друг елемент от менюто.

Свържете се с раздела за мега менюто

Менюто се отваря при задържане. Винаги мога да щракна върху връзката Контакт, за да отворя страницата за контакт, ако искам. Ако просто исках мега менюто да се показва, бих могъл просто да използвам връзката към главното меню „Контакт“ и да го преименувам (както в примера по-горе).

В този, аз смених цветовете леко, използвайки фона и настройките на дисплея, вместо да използвам Divi Builder. Той добавя лента в долната част на менюто.

Лесен призив за действие с колони от менюто

Това е един от моделите, които добавят множество колони. Правя корекции на фона и цветовете на шрифта. Добавих и стрелка и направих ширината 75%.

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

разделите

Шаблонът на раздела включва кодов модул с jQuery за създаване на ефект на задържане.

Добавих съдържание към разделите и ги адаптирах към сайта. Всяка от връзките вляво показва различен раздел в по-голямата част от менюто.

Информация за конфигурациите на мехурчетата

За тази добавих CSS класа към някаква размивка, така че да отвори малък изскачащ прозорец при нанасяне на курсора на мишката. Изскачащият прозорец е просто изображение със сянка отдолу.

На изображението по-горе мишката ми лежи над думите LIVE WEBSITE. Все още не съм коригирал позиционирането, но е лесно да го накарате да се показва навсякъде, където искате.

За тази създадох изскачащ прозорец, за да покажа изображение с малко текст. Задал съм посоката на показване на Ниска и, за да се покаже до изображението, към което искам да добавя, съм добавил поле от -300.

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

Лиценз и документация

Имате избор между четири лиценза:

• Единичен сайт - $ 15 на година
• Три сайта - $ 29 на година
• Неограничени сайтове - $ 59 на година
• Неограничен живот - 129 щ.д. еднократно

Документацията се предоставя от видео демонстрация и статия на сайта обяснява функциите и обяснява, стъпка по стъпка, как да използвате плъгина.

[vc_row center_row= »yes »][vc_column width= »1/2″][vcex_button target= »blank » layout= »expanded » align= »center » font_family= »Raleway » font_weight= »700″ style= »flat » custom_background= »#18b69d » custom_hover_background= »#118d7a » custom_color= »#ffffff » custom_hover_color= »#ffffff » icon_right= »fa fa-download »]ИЗТЕГЛЕТЕ ГО ТЕМА DIVI [/vcex_button][/vc_column][vc_column width= »1/2″][vcex_button url= »https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=уроци » target= » празно » layout= »разширено » align= »center » font_family= »Raleway » font_weight= »700″ style= »flat » custom_background= »#c4226e » custom_hover_background= »#8d184f » custom_color= »#ffffff » custom_hover_color= »#ffffff » icon_right= »fa fa-download »]ИЗТЕГЛЕТЕ ШАБЛОНИ DIVI[/vcex_button][/vc_column][/vc_row]

Други уроци по Диви

• Ресторант 5, който използва темата на Divi
• Как да добавяте текст към продукт Divi WooCommerce
• Как да промените цвета на менюто между страниците на Divi
• Как да персонализирате решетките на блог с Divi
• Как да използвате редактора на роли Divi в WordPress
• Как да създадете плъзгач Divi на цял екран
• Как да промените цвета на менютата между страниците на Divi
• Функции, които вероятно не знаете за Divi
• Как да използвате Divi Builder на WordPress
• Как да използвате модула за превъртане на видео Divi
• Как да използвате модула за обръщане на Divi Builder
• Как да добавите препоръчителен модул на Divi Builder
• Как да използвате текстовия модул Divi
• Как да създадете плъзгач на Divi
• Как да редактирате потребителска роля на Divi
• Как да използвате модула Divi Social Media
• Как да използвате магазинния модул по темата WordPress Divi
• Как да използвате модула Sidebar на Divi
• Как да използвате модула на таблицата с цени за Divi
• Как да използвате заглавния модул на публикациите на Divi
• Как да добавите видео модул на Divi
• Как да използвате навигационния модул на статията
• Как да използвате модула за търсене Divi
• Как да използвате модула на портфейла Divi
• Как да използвате модула за лице на Divi Builder
• Как да използвате портфейла с филтър на Divi
• Как да използвате модула на плъзгача с пълна ширина
• Как да използвате модула за изображения на Builder на Divi
• Как да използвате навигационния модул с пълна ширина на Divi Builder
• Как да използвате модула за галерия на изображения
• Как да използвате модула на карта с пълна ширина Divi Builder
• Как да използвате модула за портфейли с пълна ширина Divi
• Как да използвате заглавния модул Divi с пълна ширина
• Как да използваме Counter модула Divi
• Как да използвате плъзгача за статии в Divi Builder
• Как да използвате модула Divi Email Optin

Блеър Jersyer

Разработчик на WordPress и запален по всичко, свързано с новите технологични тенденции. Автори на добавки, Теми на WordPress и други уеб приложения. Автор в BlogPasCher.com.

Вижте пълната биография