Искате ли да създадете хубава прозрачна и лепкава заглавка с Divi?
Когато става въпрос за настройка на глобален хедър за вашия уеб сайт, има много начини да се подходи към него. Един от по-фините подходи е прозрачен хедър.
Ако решите да използвате прозрачен хедър, но трябва да е лепкав при превъртане, този урок ще ви хареса. Преходът между прозрачно и лепкаво е без усилие!
Да вървим.
изследване
Преди да се потопим в урока, нека хвърлим бърз поглед на резултата.
Създайте нов глобален шаблон за заглавка
Отидете на Divi > Theme Builder.
Раздел #1 Настройки
Цвят на фона
След като влезете в редактора на шаблони, ще забележите раздел. Този раздел ще бъде посветен на горната заглавна лента, която можете да забележите в предварителния преглед на тази статия. Отворете настройките на секцията и добавете черен цвят на фона.
- Фон: #000000
разстояние
Превключете към раздела Стил на раздела и премахнете всички вътрешни полета (отгоре и отдолу) по подразбиране.
- Върх на вътрешен марж: 0px
- Долно вътрешно поле: 0px
Добавете нов ред
Структура на колоната
Продължете, като добавите нов ред, като използвате следната структура на колоните:
Добавете текстов модул към колоната
Добавете текстов модул към колоната на реда и въведете съобщение по ваш избор.
Текстови настройки
Превключете към раздела Стил на модула и съответно променете настройките на текста:
- Шрифт на текста: Oswald
- Стил на копиране на текст: TT
- Цвят на текста Текст: #ffffff
- Текст Размер на текста:
- Работен плот: 19px
- Таблет: 18px
- Телефон: 16px
- Подравняване на текста: Центрирано
Добавете раздел №2
разстояние
Точно под първата секция добавете друга обикновена секция. Този раздел ще бъде посветен на нашето прозрачно меню, което ще стане лепкаво при превъртане.
Отворете настройките на секциите и премахнете всички вътрешни полета (отгоре и отдолу) по подразбиране в раздела Стил.
- Върх на вътрешен марж: 0px
- Долно вътрешно поле: 0px
Добавете нов ред
Структура на колоната
Продължете, като добавите нов ред, като използвате следната структура на колоните:
Прозрачен цвят на фона
Отворете настройките на линията и приложете напълно прозрачен фонов цвят към линията.
- Фон: rgba (255,255,255,0)
оразмеряване
Превключете към раздела Стил на линия и променете настройките за оразмеряване.
- Използвайте персонализирана ширина на улука: Да
- Разстояние между колоните: 1
- Максимална ширина: 100%
- Максимална ширина: 100%
разстояние
След това добавете персонализирани вътрешни (ляво и дясно) полета.
- Ляво вътрешно поле: 10%
- Закон за вътрешния марж: 10%
Кутия за сянка
След това нанесете прозрачна кутия сянка. По-късно в урока ще използваме тази кутия сянка в лепкаво състояние с различен цвят на сянка.
- Сила на замъгляване на сянката на кутията: 50px
- Цвят на шрифта на субтитрите: rgba (0,0,0,0)
Позиция
За да сте сигурни, че линията се появява в горната част на съдържание на страницата, с прозрачен фон, ще използваме абсолютна позиция за нашия ред в разширения раздел.
- Позиция: Абсолютна
- Местоположение: горе вляво
Колона 2 Видимост
Ние също така скриваме втората колона от нашия ред на таблет и телефон, за да имаме по-малко сложен дизайн на заглавката на по-малки размери на екрана.
Добавете модул от менюто към колона 1
Изберете меню
Сега, когато настройките ни за редове са налице, е време да добавите модули, като започнете с модул на менюто в колона 1. Изберете менюто по ваш избор.
Изтеглете логото
След това качете лого.
Премахнете цвета на фона
Също така премахнете фоновия цвят от модула.
Настройки на текста в менюто
Превключете към раздела Стил на модула и съответно променете настройките на текста на менюто:
- Меню с шрифтове: Oswald
- Меню за мека светлина: Получер
- Меню за стил на копиране: TT
- Цвят на текста на менюто: #efefef
- Размер на текста на менюто: 18px
- Подравняване на текста: вдясно
Настройки на падащото меню
Също така променете настройките на падащото меню.
- Цвят на падащия ред: rgba(0,0,0,0)
- Мобилно меню Цвят на фона: rgba (0,0,0,0,95)
Настройки на икони
След това променете цветовете на иконата в настройките на иконата.
- Цвят на иконата на количката: #ffffff
- Цвят на иконата за търсене: #ffffff
- Цвят на иконата на менюто за хамбургери: #ffffff
Настройки на логото
Също така променяме цвета на нашето лого в настройките на логото, като променяме филтъра за инверсия на изображението.
- Обръщане на изображението: 90%
оразмеряване
След това ще зададем максимална височина на нашето лого.
- Максимална ширина на логото: 40 пиксела
разстояние
След това ще добавим подложка отгоре и отдолу на малки размери на екрана.
- Пиков вътрешен марж:
- Таблет и телефон: 10px
- Долно вътрешно поле:
- Таблет и телефон: 10px
Добавете модула Button към колона 2
Добави текст към Бутон
В колона 2 единственият модул, от който се нуждаем, е модул Button. Добавете текст по ваш избор.
Подравняване на бутоните
Превключете към раздела Module Style и променете подравняването на бутоните.
- Подравняване на бутоните: дясно
Настройки на бутона
След това персонализирайте бутона.
- Използвайте персонализирани стилове за Бутон: Да
- Размер на текста на бутона: 16px
- Цвят на текста на бутона: #ffffff
- Бутон за фон: #ed4441
- Цвят на рамката на бутона: #ed4441
- Бутон за радиус на границата: 0 пиксела
- Бутоно разстояние между буквите: 4px
- Шрифт на бутона: Oswald
- Бутон за мека светлина: Удебелен текст
- Бутон за копиране на стил: TT
- Показване на икона на бутон: Да
- Цвят на иконата на бутона: #1a1a1a
разстояние
И завършете параметрите на модула, като добавите персонализирани стойности на разстояние.
- Горно поле: -70px
- Горно и долно вътрешно поле: 25 px
Приложете персонализирани лепкави ефекти
Направете раздел #2 лепкав
Сега, след като поставихме основата за нашия хедър, е време да приложим лепкавия ефект! За да направите това, започнете, като отворите настройките във втория раздел и приложете следните лепкави настройки към разширения раздел:
- Залепваща позиция: Придържайте се към върха
- Горно отместване на стик: 0px
- Долен лепкав мимит: Няма
- Отместване от околните лепкави елементи: ДА
- Преход по подразбиране и залепващи стилове: ДА
Цвят на фона на линията
Сега, след като лепкава опция е активирана, можем да правим лепкави промени на всички елементи в секцията. Ще започнем с отваряне на реда, съдържащ нашето меню и прилагане на бял фонов цвят към лепкава опция.
- Цвят на фона: #FFFFFF
Залепващо разстояние между редовете
След това ще променим стойностите на разстоянието на лепкава функция на линията.
- Върх на вътрешен марж: 0px
- Долно вътрешно поле: 0px
Sticky Row Shadow Box
Също така променяме цвета на сянката на кутията в лепкаво състояние.
- Цвят на шрифта на субтитрите: rgba(0,0,0,0.08)
Позициониране на лепкава линия
След това ще върнем позиционирането на реда до относително в лепкаво състояние.
- Длъжност: Роднина
- Начало на отместването: горе вляво
Настройки на текста на менюто за залепващо състояние
След това ще променим цвета на текста на менюто в залепващо състояние.
- Цвят на текста на менюто: #000000
Настройките на падащото меню в неподвижно състояние
С цвят на фона на мобилното меню в настройките на падащото меню.
- Мобилно меню, цвят на фона: #ffffff
Цветовете на иконата на менюто са в залепнало състояние
Също така променяйте цветовете на иконите в залепено състояние.
- Цвят на иконата на количката: #000000
- Цвят на иконата за търсене: #000000
- Цвят на иконата на менюто за хамбургер: #000000
Филтър за лого в залепнало състояние
След това премахнете инвертиращия филтър от изображението на логото в залепнало състояние.
- Инверсия на изображението: 0%
Разстояние между бутоните в залепнало състояние
И завършете урока, като премахнете отрицателното горно поле от бутона, когато е в залепнало състояние.
- Горно поле: 0px
изследване
Сега, след като преминахме през всички стъпки, нека хвърлим последен поглед на крайния резултат.
Изтеглете DIVI сега!!!
Заключение
В тази статия ви показахме как да комбинирате конструктора на теми на Divi с новите лепкави опции. По-конкретно, ние ви показахме как да превключвате от прозрачна заглавка към залепваща заглавка с различен стил, докато превъртате.
Този подход ви позволява да обедините дизайна на страницата си с менюто си, като същевременно поддържате хубава лепкава заглавка при превъртане.
Ако искате да научите повече за Divi, не се колебайте да посетите нашия каталог на Divi уроци. Можете също да се консултирате Как да създадете страницата на блога с модула Divi Blog
Ако имате някакви въпроси или предложения, не се колебайте да оставите коментар в раздела за коментари по-долу.
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...