Искате ли да създадете глобална заглавка с модула Меню на цял екран в Divi?
Заглавката е един от най-важните елементи на всеки уеб сайт и е в основата на потребителското изживяване. Менюто за навигация дава на вашите потребители представа какво могат да очакват да намерят във вашия уеб сайт и им помага да намерят информацията, от която се нуждаят.
Освен това вторичната лента с менюта може да бъде чудесно място за подчертаване на призив за действие или към насърчаване оферта. Да не говорим, че заглавката е една от най-важните части на вашия уеб сайт, защото обикновено се появява на всяка страница. Това е чудесна възможност да покажете вашата марка и да създадете заглавка, която е в съответствие с дизайна на останалата част от уебсайта ви.
Опциите на Theme Builder на Divi ви позволяват да създадете персонализирана глобална заглавка и да персонализирате външния вид на заглавката и модулите на менюто в целия си уебсайт.
В този урок ще ви покажем как да създадете глобална заглавка с помощта на модула на менюто за цял екран на Divi.
Нека да започнем!
изследване
Ето предварителен преглед на глобалната заглавка, която ще проектираме.
Отворете конструктора на теми
Тъй като в този пример изграждаме глобална заглавка, нека се придвижим до „Theme Builder“, който можете да намерите в менюто WordPress Divi. Изберете Добавяне на глобален заглавие, след което изберете Създаване на глобален заглавие.
Създайте вторичната лента с менюта
Когато за първи път отворите глобалното оформление на заглавката, то идва с предварително заредена обикновена секция. Ще променим това, за да бъде нашата вторична лента с менюта, която ще седи над менюто с пълна ширина и ще включва текст на призив за действие и бутон.
Първо отворете настройките на секцията и добавете цвета на фона.
- Фон: #92A8A1
След това полето на секцията.
- Върх на вътрешен марж: 0px
- Долно вътрешно поле: 0px
Сега вмъкнете ред. За този пример ще използваме оформлението, показано по-долу.
В настройките на редовете, под Оразмеряване на раздела Стил, хармонизирайте височините на колоните.
- Хармонизиране на височините на колоните: ДА
След това задайте горното и долното поле, както следва:
- Горно вътрешно поле: 5px
- Долно вътрешно поле: 5px
Тъй като искаме нашите вторични заглавни елементи да бъдат подравнени вертикално, ще добавим персонализиран CSS към основния елемент на ред.
1.
align-items:center;
Сега, когато нашата линия е конфигурирана, можем да вмъкнем модулите за нашата съдържание. Първо поставете текстов модул от лявата страна.
Променете съдържание на текст. Това е идеалното място да включите призив за действие или към насърчаване оферта.
- Текст: "Присъединете се към нашия пощенски списък, за да получите 10% отстъпка от вашата поръчка!" »
Влезте в раздела Стил на текстовия модул и променете параметрите, както следва:
- Шрифт „Текст“: Poppins
- „Текст“ Приглушено осветление: Средно
- Цвят на текста "Текст": #FFFFFF
След това добавете модула Button отдясно.
Добавете текст на бутона.
- Текст: "Вземете безплатна оферта"
В раздела Стил подравнете бутона в центъра.
- Подравняване на бутоните: Център
Сега нека персонализираме външния вид на бутона.
- Използвайте персонализирани стилове за "Бутон": Да
- Размер на текста на бутона: 14px
- Цвят на текста на бутона: #FFFFFF
- Фонов бутон: #2F5349
- Ширина на рамката на бутона: 0px
- Бутон за радиус на границата: 50px
- Бутоно разстояние между буквите: 1px
- Шрифт на бутоните: Poppins
Добавете модула на менюто на цял екран
Сега, когато второстепенното меню е проектирано, можем да преминем към главното меню. Ще изградим менюто с помощта на модула Меню на цял екран. Добавете нова секция на цял екран към глобалната заглавка.
Изберете и поставете модул за меню на цял екран
След това ще персонализираме настройките на менюто на цял екран.
- Цвят на активната връзка: #2F5349
- Меню с шрифтове: Poppins
- Меню с приглушена светлина: Полудебели
- Меню за стил на копиране: TT
- Цвят на текста на менюто: #000000
- Цвят на текста на менюто при задържане на мишката: #2F5349
- Размер на текста на менюто: 15px
- Разстояние между буквите в менюто: 2px
Променете цвета на иконата на менюто за хамбургер на черен.
- Цвят на иконата на менюто за хамбургер: #000000
Преди да добавим логото към нашето меню, нека променим опциите за оразмеряване. Ще използваме вградените опции за реакция на Divi, за да зададем различна максимална височина за компютър и мобилни устройства.
- Максимална височина на логото на компютър: 3vw
- Максимална височина на логото на мобилно устройство: 6vw
Сега добавете вашето лого към менюто на цял екран.
И накрая, искаме главното меню да остане в горната част на екрана, когато потребителят превърта през уебсайта, така че ще използваме вградените лепкави настройки на Divi за това.
- Залепваща позиция: Залепете отгоре
С това нашият глобален дизайн на хедъра е завършен.
Създайте нова страница с предварително дефинирано оформление
За да видите заглавката и менюто с пълна ширина в действие, нека създадем нова страница с предварително дефинирано оформление от библиотеката Divi. За този пример ще използваме началната страница за подови настилки от пакета подово оформление.
Добавете нова страница към вашия уебсайт и й дайте заглавие, след което изберете опцията Използване на Divi Builder.
За този пример използваме предварително направено оформление от библиотеката Divi, така че изберете Избор на оформление.
Намерете и изберете оформлението „Начална страница за подови настилки“.
Изберете „Избор на оформление“, за да добавите оформлението към страницата си.
Сега дизайнът е завършен!
Краен резултат
Заключение
Както казахме по-горе, заглавката и менюто за навигация са в основата на потребителското изживяване на вашия уебсайт. Вече видяхте колко лесно е да проектирате зашеметяващ цялостен хедър с модула на Divi "Full Screen Menu".
За щастие създателят на теми на Divi ви дава контрол върху всеки аспект от менюто и заглавката на вашия уебсайт и можете да създавате напълно персонализирани и уникални дизайни само с няколко щраквания.
Използвали ли сте глобалните опции на заглавката на Divi, за да персонализирате заглавката и менюто си за навигация? Кажете ни какво мислите в коментарите!
