Трябва да създадете глобален хедър за вашия уебсайт с Диви?

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

Да започнем!

изследване

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

Конфигурирайте главното си меню

Започнете, като създадете менюто си в настройките за външния вид на вашия WordPress сайт.

Достъп до опцията Theme Builder под Divi

В опциите на Тема на Divi, щракнете върху Създател на теми. Веднъж там ще забележите a шаблон за уебсайт По подразбиране.

Добавете и създайте глобална заглавка

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

Настройки на секцията

оразмеряване

Отворете настройките на секцията, които ще намерите на страницата, в раздела Стил, променете размерите на различни размери на екрана.

  • Максимална ширина: 100%
  • Максимална ширина: 1280px (за компютър и таблет), 100% (за мобилни устройства)

разстояние

Премахнете всички горни и долни вътрешни полета

  • Върх на вътрешен марж: 0px
  • Долно вътрешно поле: 0px

граница

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

  • Долу вляво: 50px
  • Долу вдясно: 50px

Кутия за сянка

Нека добавим и фина сянка на кутия.

  • Сила на размазване на сянка на кутията: 60px
  • Цвят на шрифта на субтитрите: rgba(0,0,0,0.13)

видимост

  • Хоризонтално преливане: Видимо
  • Вертикално преливане: Видимо

Посветете нов ред на заглавката

След като завършихме общите настройки на секцията, можем да започнем да добавяме редове. Общо ще ни трябват два реда; един, който е посветен на заглавката и който позволява показване на елементи от менюто. Ще започнем със заглавката, като добавим нов ред, използвайки следната структура на колоните:

Настройки на линията

Фонови настройки

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

  • Фон: #38383F

оразмеряване

След това променете параметрите за оразмеряване на линията.

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

Преглед

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

01 display: flex;

Добавете модул за изображение в колона 1

Изтеглете логото

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

подравняване

Отидете в раздела Стил и подравнете изображението вляво.

оразмеряване

Също така променете ширината на модула.

разстояние

Добавете и персонализирани стойности на маржовете.

създайте глобална заглавка с темата Divi Builder

Добавете модул за проследяване на социални медии в колона 2

Добавете социални мрежи

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

създайте глобална заглавка с темата Divi Builder

Цвят на фона на социалните мрежи

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

  • Цвят на фона: rgba (0,0,0,0)
създайте глобална заглавка с темата Divi Builder

подравняване

Върнете се към нормалните настройки на модула и след това променете пълното подравняване на модула.

икона

Променете и настройките на иконите.

  • Цвят на иконата: #FFFFFF
  • Използвайте персонализиран размер на икона: Да
  • Размер на шрифта на иконата: 16px (компютър и таблет), 12px (телефон)

разстояние

Добавете горно поле.

Добавете модула Button в колона 3

Преминете към третата колона и добавете модул Button, съдържащ текст по ваш избор.

подравняване

Променете подравняването на бутона в раздела Стил.

Настройки на бутоните

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

  • Използвайте персонализирани стилове за бутона: Да
  • Размер на текста на бутона: 12px (настолен компютър), 10px (таблет), 8px (телефон)
  • Цвят на текста на бутона: #ffffff
  • Фонов бутон: #ffae25
  • Ширина на рамката на бутона: 0 пиксела
  • Бутон за радиус на границата: 0 пиксела
  • Разстояние между буквите на бутоните: 5 px (настолен компютър), 3 px (таблет и телефон)
  • Бутон за шрифт: Отвори Няма
  • Бутон за мека светлина: Удебелен текст
  • Стил на бутона за копиране: TT

разстояние

Персонализирайте стойностите на маржовете.

Посветете нов ред на лентата с менюта

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

Настройки на линията

оразмеряване

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

разстояние

След това премахнете всички долни и горни полета.

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

Изберете Меню

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

разпореждане

Превключете към раздела Стил и променете настройките на оформлението, както следва:

Връзки

Също така променете цвета на активната връзка в раздела Стил.

  • Цвят на активната връзка: #ffae25
създайте глобална заглавка с темата Divi Builder

Падащо меню

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

  • Цвят на падащия ред: #ffae25

икона

  • Цвят на иконата на менюто за хамбургер: #ffae25

Текст на менюто

С настройки за текст на менюто.

  • Шрифт на менюто: Prata
  • Цвят на текста на менюто: #000000

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

Отворете настройките на секцията

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

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

След това ще отидем в раздела за разширени и ще добавим няколко реда CSS код към основния елемент на секцията.

01 position: fixed;

02 top: 0;

03 left: 0;

04 right: 0;

Запазете опциите за глобална заглавка и създател на теми

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

изследване

Сега, след като преминахме през всички стъпки, нека да разгледаме за последно резултата.

създайте глобална заглавка с темата Divi Builder

Заключение

В тази статия ви показахме как да създадете персонализирана глобална заглавка с новия създател на теми на Divi. Този урок показва колко лесно е да създадете красиви заглавки и да ги приложите към целия си уеб сайт или конкретни потребителски типове публикации. 

Надяваме се, че ще ви помогне да персонализирате уебсайта си с Theme Builder.

Ако имате въпроси или предложения, моля, оставете ни коментар в секция за коментари по-долу.

...

Тя ПИН на Pinterest