Как да използвате навигационния модул с пълна ширина в Divi Builder

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

Как да добавите модул от меню на цял екран към вашата страница

Преди да можете да добавите модул с меню с пълна ширина към вашата страница, първо трябва да влезете в Divi Builder. Веднъж Тема на Divi инсталиран на уебсайта ви, ще забележите бутон Използвайте Divi Builder над редактора на публикации, когато създавате нова страница. Щракнете върху този бутон, за да активирате Divi Builder и да получите достъп до всички модули Divi Builder. След това кликнете върху бутона Използвайте Visual Builder за да стартирате генератора във визуален режим. Можете също да щракнете върху бутона Активиране на Visual Builder когато разглеждате уебсайта си на преден план, ако сте свързани с таблото за управление на WordPress.

След като влезете в Visual Builder, можете да щракнете върху сивия бутон плюс, за да добавите нов модул към вашата страница. Нови модули с пълна ширина могат да се добавят само в секциите с пълна ширина. Ако стартирате нова страница, не забравяйте първо да добавите раздел с пълна ширина към страницата си. Имаме няколко чудесни урока за това как да използваме елементите на раздела Divi.

Намерете модула на менюто с пълна ширина в списъка с модули и кликнете върху него, за да го добавите към вашата страница. В списъка с модули може да се търси, което означава, че можете също да въведете думата "Меню с пълна ширина" или "меню с пълна ширина" (в зависимост от вашата версия) и след това щракнете върху Enter за автоматично търсене и добавяне на модул от меню с пълна ширина ! След като модулът бъде добавен, ще бъдете посрещнати от списъка с опции на модула. Тези опции са разделени на три основни групи: Съдържание , Концепция et напреднал .

Пример за употреба: Добавяне на меню с пълна ширина под заглавката на страницата

За този пример ще ви покажа как да добавите меню с пълна ширина под заглавния раздел на страница.

Ето един пример:

Тъй като това ново меню на цялата страница ще замени основното меню за навигация по подразбиране, е необходимо да изберете шаблона за празна страница, така че менюто за навигация по подразбиране да не се показва в горната част на страницата в допълнение към менюто с пълна ширина. че ще добавя.

За да редактирате шаблона на вашата страница, отидете в редактора на вашата страница и изберете шаблона „празна страница“ в областта Атрибути на страницата в дясната странична лента.

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

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

добавете меню с пълна ширина под title.jpg

Актуализирайте настройките на менюто с пълна ширина, както следва:

Опции за съдържанието

Меню: [изберете менюто, което трябва да се използва в модула] Контекст: # 333333

Опции за дизайн

Цвят на текста: Светъл Ориентация на текста: Шрифт на централното меню: Меню Roboto Размер на шрифта: 20px

Това е!

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

Опции за съдържанието на цялото съдържание на менюто

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

Изберете меню, което да използвате в модула. Можете да създадете нови менюта, като използвате страницата Външен вид> Менюта от таблото за управление на WordPress. Всеки път, когато създавате ново меню, менюто ще бъде избираемо от това падащо меню.

Цвят на фона

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

Цвят на фона на падащото меню

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

Цвят на фона на мобилното меню

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

Административен етикет

Това ще промени етикета на модула в конструктора за лесно идентифициране. Когато използвате изгледа WireFrame в Visual Builder, тези етикети се появяват в модулния блок на интерфейса Divi Builder.

Опции за дизайна на менютата с пълна ширина

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

Отворете подменютата

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

Направете връзки в цял размер

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

Цвят на линията на падащото меню

В падащите менюта връзките са разделени с линия от 1 пиксел. Ако искате да персонализирате цвета на този ред, можете да изберете персонализиран цвят, като използвате инструмента за избор на цвят в тази настройка.

Цвят на текста

Тук можете да изберете стойността на вашия текст. Ако работите на тъмен фон, текстът ви трябва да е включен. Ако работите със светъл фон, текстът ви трябва да е тъмен.

Ориентация на текста

Това контролира как вашият текст е подравнен в модула. Можете да избирате между ляв, десен и център.

Активен цвят на връзката

Цветовете на активните връзки са подчертани в модула на менюто, за да покажат на потребителя тяхното текущо местоположение. Можете да промените цвета на подчертаване, използван за тези активни връзки, като използвате тази настройка.

Цвят на текста на падащото меню

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

Цвят на текста на мобилния меню

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

Формат на менюто

Можете да промените шрифта на шрифта на менюто си, като изберете желания шрифт от падащото меню. Divi се предлага с десетки страхотни шрифтове, задвижвани от Google Fonts. По подразбиране Divi използва шрифта Open Sans за целия текст на вашата страница. Можете също така да персонализирате стила на текста си, като използвате удебелен шрифт, курсив, главни букви и опции за подчертаване.

Размер на шрифта

Тук можете да регулирате размера на шрифта на менюто си. Можете да плъзнете плъзгача за диапазон, за да увеличите или намалите размера на текста си или директно да въведете стойността на желания размер на текста в полето за въвеждане вдясно от плъзгача. Полетата за въвеждане поддържат различни мерни единици, което означава, че можете да въведете „px“ или „em“ в зависимост от стойността на вашия размер, за да промените типа му.

Цвят на текста в менюто

По подразбиране всички цветове на текста в Divi се показват в бяло или тъмно сиво. Ако искате да промените цвета на цифровия си текст, изберете желания цвят от инструмента за избор на цвят, използвайки тази опция.

Разстояние между буквите в менюто

Разстоянието между буквите засяга пространството между всяка буква. Ако искате да увеличите интервала между всяка буква в цифровия си текст, използвайте плъзгача за диапазон, за да регулирате интервала или въведете желания размер на разстоянието в полето за въвеждане вдясно от плъзгача. Полетата за въвеждане поддържат различни мерни единици, което означава, че можете да въведете "px" или "em" в зависимост от стойността на вашия размер, за да промените типа му.

Височина на линията на менюто

Височината на реда влияе на интервала между всеки ред от цифровия ви текст Ако искате да увеличите интервала между всеки ред, използвайте плъзгача за диапазон, за да коригирате интервала или въведете желания размер на разстоянието в полето за въвеждане разположен вдясно от курсора. Полетата за въвеждане поддържат различни мерни единици, което означава, че можете да въведете "px" или "em" в зависимост от стойността на вашия размер, за да промените типа му.

Разширени опции за меню с пълна ширина

В раздела за напреднали ще намерите опции, които по-опитните уеб дизайнери биха могли да намерят за полезни, като персонализирани CSS и HTML атрибути. Тук можете да приложите персонализиран CSS към всеки от многото елементи на модула. Можете също да приложите персонализирани CSS класове и идентификатори към модула, които могат да се използват за персонализиране на модула във файла style.css на вашата детска тема.

модул на менюто fullwidth разширена секция divi.png

CSS ID

Въведете незадължителен CSS ID, който да използвате за този модул. Идентификаторът може да се използва за създаване на персонализиран CSS стил или за връзка към определени раздели на вашата страница.

CSS клас

Въведете незадължителните CSS класове, които да използвате за този модул. CSS клас може да се използва за създаване на персонализиран CSS стил. Можете да добавите няколко класа, разделени с интервал. Тези класове могат да се използват във вашата дъщерна тема Divi или в персонализиран CSS лист със стилове, който добавяте към вашата страница или към вашия уеб сайт, като използвате опциите за тема Divi или настройките на страницата Divi Builder.

Персонализиран CSS

Персонализиран CSS може също да се приложи към модула и всеки от вътрешните елементи на модула. В раздела Персонализиран CSS ще намерите текстово поле, където можете да добавяте персонализирани CSS таблици със стилове директно към всеки елемент. CSS записите в тези настройки вече са обвити в стилови тагове. Така че просто въведете правилата на CSS, разделени с точка и запетая.

Анимация на падащото меню

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

видимост

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

[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]

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

Блеър Jersyer

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

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

Как да използвате модула за навигация Full Width Builder на Divi