Divi: Как да създадете вертикално меню за навигация

Искате ли да създадете вертикално меню за навигация, така че да представя повече елементи на преден план в DIVI?

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

В този урок ще ви покажем как да създадете вертикално навигационно меню с помощта на Divi Theme Builder. 

Това ще ви даде повече място за показване на вашите елементи от менюто на WordPress.

Да започнем!

изследване

Ето един бърз поглед върху дизайна, който ще създадем в този урок.

Да отидем на урока.

Създаване на нов глобален хедър

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

За да започнете, отидете на таблото за управление на WordPress и навигирайте до Divi > Theme Builder.

След това щракнете върху областта „Добавяне на глобална заглавка“ на шаблон за уебсайт по подразбиране и изберете „Изграждане на глобален заглавен колонтитул“ от падащия списък.

Прочетете още: Как да създадете глобален хедър с Theme Builder в DIVI

Дизайн на оформление на вертикална секция

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

• Максимална ширина: 300px
• Височина: 100vh

• Вътрешно поле: 4vh отгоре, 0px отдолу

Продължете персонализирането, като добавите поле със сянка, както следва:

• Shadow box: вижте екранната снимка
• Вертикална позиция на сянката на кутията: 0px
• Сила на замъгляване на сенките в кутията: 20px
• Сила на разпространение на сянка в кутия: -10px
• Цвят на сянката: rgba(0,0,0,0.3)

За да сте сигурни, че вертикалното навигационно меню остава видимо отляво, докато потребителят превърта, актуализирайте раздела Разширени до фиксирана позиция и актуализирайте z-индекса, както следва:

• Фиксирана станция
• Z-индекс: 9999

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

overflow: visible !important;

Вашият раздел вече ще бъде във вертикално оформление от лявата страна на шаблона.

Проектирайте вертикалното меню

С поставения раздел сме готови да проектираме вертикалното меню. За да направим това, ще използваме модул на менюто с персонализиран CSS, за да персонализираме навигацията да се показва вертикално.

Ще използваме и единицата за дължина vh, така че менюто да се адаптира добре към различните височини на браузъра.

Добавяне на линията

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

След това актуализирайте параметрите на линията, както следва:

Оразмеряване и разстояние

• Използване на персонализирана ширина на улука: ДА
• Разстояние между колоните: 1
• Максимална ширина: 100%
• Максимална ширина: 80%

• Вътрешен марж: 3vh отгоре, 3vh отдолу

граница

• Ширина на рамката: 1px
• Цвят на рамката: #eeeeee

Добавен модул Меню

В реда с една колона добавете нов модул на менюто.

Изберете меню за показване в раздела Съдържание.

След това добавете логото на вашето уебсайт като съдържание динамичен под бутона Лого.

В раздела Стил актуализирайте следното:

• Стил: Центриран

• Меню с шрифтове: Nunito Sans
• Цвят на текста на менюто: #535b7c

• Меню за размер на текста: 18px (десктоп), 14px (таблет и телефон)
• Височина на реда на менюто: 2 em

• Цвят на падащия ред: #535b7c
• Падащо меню за цвят на активната връзка: #535b7c

• Цвят на иконата на количката: #535b7c
• Цвят на иконата за търсене: #535b7c
• Цвят на иконата на менюто за хамбургери: #535b7c

• Вътрешен марж: 2vh отгоре, 2vh отдолу

Добавен персонализиран CSS за менюто

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

CSS връзка към менюто (десктоп):

width: 100%;

padding: 1vh 15px;

background: #f8f8f8;

border-radius: 3px;

border: 1px solid #eeeeee;

CSS връзка към менюто (таблет):

width: auto;

border:none;

CSS лого на менюто:

margin-bottom: 20px;

След това добавете персонализиран CSS клас към модула на менюто, както следва:

CSS клас: et-vert-menu

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

Добавяне на персонализиран CSS с модула Code

Под модула Меню добавете модул Код.

След това поставете следния код в полето за код (уверете се, че сте го поставили между етикетите за стил):

/* Menu de Navigation Style Vertical*/

.et-vert-menu .et_pb_menu__menu>nav>ul {

  flex-direction: column;

  margin-left: 0px!important;

  margin-right: 0px!important;

  width: 100%;

  }

.et-vert-menu .et_pb_menu__menu>nav>ul>li {

  margin: 10px0!important;

  }

.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul li {

  display:block!important;

  padding: 0px!important;

  }

  .et-vert-menu .et_pb_menu__menu>nav>ul ul {

    padding: 0px!important;

    top: 0px!important;

  }

.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul {

  left:calc(100%- 1px) !important;

  top:0px!important;

  }

.et-vert-menu .et-menu .menu-item-has-children>a:first-child:after {

  content: "5"!important; /*change arrow icon for submenu*/

  right: 20px!important;

  }

.et-vert-menu .nav li ul {

    left: calc(100%- 1px) !important; /*align submenu to the right of menu link*/

  }

@media alland (min-width: 981px) {

.et-vert-menu .et_pb_menu__menu, .et-vert-menu .et_pb_menu__menu>nav {

    width: 100%; /*width of the vertical navigation menu*/

  }

/*Adjust the width of the main content and footer area to make room for the fixed vertical header*/

#et-main-area {

  width: calc(100%- 300px);

  margin-left: 300px;

}

}

Дизайн на бутон и икони за следване в социалните медии

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

Добавяне на линията

Добавете нов ред една колона под текущия ред.

Добавете бутон

След това добавете модул Button към линията.

Актуализирайте настройките на бутоните, както следва:

• Подравняване на бутоните: централно

• Използвайте персонализирани стилове за бутон: ДА
• Размер на текста на бутона: 18px (десктоп), 14px (таблет и телефон)
• Цвят на текста на бутона: #ffffff
• Цвят на фона на бутона: #535b7c
• Ширина на рамката на бутона: 0 пиксела

След това отидете в раздела за разширени и поставете следния персонализиран CSS в основния елемент:

Основен елемент на CSS (десктоп)

display:block;

width: 100%;

Основен елемент на CSS (таблет)

display:inherit;

Добавени икони за следване в социалните медии

Под бутона добавете модул Следвайте ни в социалните медии.

Добавете социалните мрежи, които искате, под раздела съдържание.

В раздела Стил актуализирайте следното:

• Подравняване на модула: Център

• Цвят на иконата: #535b7c

След това отворете настройките за всяка от социалните мрежи и премахнете цвета на фона.

След това добавете малко горно поле, както следва:

• Марж: 3vh Peak

Актуализиране на параметрите на реда

След като иконите за следване в социалните медии са готови, отворете настройките на линията и коригирайте следното:

• Използване на персонализирана ширина на улука: ДА
• Разстояние между колоните: 1

• Вътрешно поле: 3vh отгоре, 0px отдолу

Запазете оформлението и шаблона

След като сте готови, запазете оформлението и шаблона.

Краен резултат

Ето крайния резултат на страница на живо.

Изтеглете DIVI сега!!!

Заключение

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

Настройката на вертикалната секция също отваря вратата за създаване на персонализирани странични ленти. 

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

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

Но междувременно, споделете тази статия във вашите различни социални мрежи.

...