Когато създавате своя глобален хедър, има много неща, които трябва да имате предвид. Елементите, които поставяте в заглавката си, трябва да ви помогнат посетители за да навигирате лесно. За да намалят времето, което хората прекарват в сърфиране, много уеб дизайнери избират фиксиран горен хедър, което позволява посетители за незабавен достъп до други страници или публикации. Това е наистина удобно, но когато създавате фиксиран хедър, голяма част от височината на прозореца за изглед посетители е заето, което позволява показването на по-малко съдържание наведнъж. Ако не сте готови да направите тази жертва, знайте, че не е нужно. Можете да се възползвате от предимствата на фиксирана заглавка, като позволите на общата ви заглавка да разкрива, когато посетителите ви превъртат нагоре, и да я скривате, когато превъртат надолу. Днес ще ви преведем през скриването и разкриването на вашия глобален хедър с помощта на Theme Builder на Divi.

изследване

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

1. Отидете на Divi Theme Builder и добавете нов шаблон

Започнете, като отидете на Divi Builder на теми.

Започнете да създавате глобален заглав

Там кликнете върху „Добавяне на глобално заглавие“ и изберете „Създаване на глобално заглавие“.

2. Започнете да създавате глобално заглавие

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

Цвят на фона

Вътре в редактора на шаблони ще забележите раздел. Отворете този раздел и променете цвета на фона му.

• Цвят на фона: #ffffff

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

Отидете в раздела за проектиране и задайте 100% ширина на следващия раздел.

• Ширина: 100%

разстояние

Освен това добавете персонализирани горна и долна подплънка.

• Горна подложка: 2vw
• Подложка отдолу: 2vw

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

Ние също ще приложим фин нюанс към нашия раздел.

• Сила на размазване на кутията: 50px
• Цвят на сенките: rgba (0,0,0,0,08)

CSS ID

По-късно в този урок ще ни е необходим персонализиран код, за да се получи ефектът на превъртане. За да се подготвим за това, добавяме CSS ID към раздела.

• CSS ID: секция за глобален заглавка

Основен елемент

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

position: fixed;top: 0;

Z индекс

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

• Z индекс: 99999

Добавете нов ред

Структура на колоната

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

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

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

• Използвайте персонализирана ширина на улука: Да
• Ширина на улука: 1
• Изравнете височините на колоните: Да
• Ширина: 100%
• Максимална ширина: 100%

разстояние

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

• Горна подложка: 0px
• Подложка отдолу: 0px

Основен елемент

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

display: flex;align-items: center;

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

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

Време е да добавите модули, като започнете с модул за проследяване на социални медии в колона 1. Добавете социалните мрежи, които искате да покажете.

Нулирайте отделните стилове на социалните медии

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

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

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

• Подложка отдолу: 0.5vw

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

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

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

Настройки по подразбиране на иконата

Също така променете цвета на иконата в настройките на иконата.

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

Настройки на иконата на мишката

И променете цвета на иконата на мишката.

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

граница

Завършете параметрите на модула, като добавите долна граница в параметрите на границата.

• Ширина на долната граница: 1px
• Цвят на долната граница: # 000000

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

Изберете менюто

Нека да преминем към следващата колона! Добавете модул от менюто и изберете меню по ваш избор.

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

След това качете лого в модула.

Премахнете цвета на фона

И премахнете цвета на фона.

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

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

• Стил: в центъра
• Посока на падащото меню: надолу

Текст от менюто по подразбиране

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

• Цвят на активната връзка: # c2ab92
• Шрифт на менюто: Cormorant Garamond
• Цвят на текста: # 000000
• Размер на текста на менюто: 1vw (десктоп), 2vw (таблет), 3vw (телефон)

Задръжте курсора на менюто

Промяна на текста на менюто при задържане на курсора.

• Цвят на текста на менюто: # c2ab92

Падащо меню

След това променете цвета на реда на падащото меню в настройките на падащото меню.

• Цвят на реда от падащото меню: # 000000

икони

Също така променяме цвета на иконата на менюто за хамбургер в настройките на иконата.

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

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

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

• Максимална ширина на логото: 5vw (бюро), 10vw (таблет), 13vw (телефон)

CSS Меню за връзки

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

padding-bottom: 1vw;border-bottom: 1px solid #000;

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

Добавете копие

Нека да преминем към последния модул! Там единственият модул, от който се нуждаем, е текстов модул.

Добави линк

Този модул ще служи като CTA. Добавете линк по ваш избор.

• URL адрес на връзка за модул: #

Текстови настройки по подразбиране

Преминете към раздела за дизайн на модула и променете съответно настройките на текста:

• Шрифт на текст: Cormorant Garamond
• Цвят на текста: # 000000
• Размер на текста: 1vw (десктоп), 2vw (таблет), 3vw (телефон)

Задръжте курсора на текстовите настройки

Променете цвета на текста при движение с курсора на мишката.

• Цвят на текста: # c2ab92

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

Продължете, като промените параметрите за оразмеряване на модула на различни размери на екрана.

• Ширина: 12vw (десктоп), 18vw (таблет), 22vw (телефон)
• Подравняване на модула: център

разстояние

И добавете малко подложка отдолу в настройките на разстоянието.

• Подложка отдолу: 0.5vw

граница

Попълнете параметрите на модула, като добавите долна граница.

• Ширина на долната граница: 1px
• Цвят на долната граница: # 000000

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

Вмъкнете JQuery и CSS код

След като оформите всички модове в реда, е време да направите ефекта разкриване / скриване. За целта ще трябва да добавим персонализиран код към кодов модул, който ще поставим в колона 2. Този код ще работи във всеки раздел, който добавите, без значение как проектирате заглавката или модулите. които използвате, просто се уверете, че сте добавили CSS ID към вашия раздел. Поставете кода на JQuery между маркерите на скрипта и CSS кода между маркерите на стила, както е показано на екрана за печат по-долу.

jQuery(function($){ var topPosition = $(window).scrollTop(); $(window).scroll(function() {var scrollMovement = $(window).scrollTop();if(scrollMovement > topPosition) {$('#global-header-section').slideUp();} else {$('#global-header-section').slideDown();}topPosition = scrollMovement;}); });

main-content{margin-top: 7vw;}

3. Запазете модификациите на генератора и покажете резултата

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

изследване

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

Заключителни мисли

В тази статия ви показахме как да направите вашия Global Header да се показва при превъртане нагоре и да го скриете при превъртане надолу. Това е популярен и ефективен начин да помогнете на посетителите си да се ориентират лесно, без да заемат част от височината на прозореца си. Можете също така да изтеглите безплатно JSON файла! Ако имате въпроси или предложения, не се колебайте да оставите коментар в раздела за коментари по-долу.