Трябва да създадете прозрачно плаващо меню в Divi?
Търсите ли начин да поставите цялостната си заглавка над основните секции на страниците си? В днешния урок за Divi ще ви покажем как точно да направите това.
Ще създадем зашеметяващ глобален хедър от нулата (с помощта на конструктора на теми от Divi) и ще приложим плаващ ефект към лентата с менюта.
Да вървим.
изследване
Преди да се потопим в този урок, нека хвърлим бърз поглед на резултата, който искаме да постигнем.
Отидете на Divi's Theme Builder и добавете нов шаблон
Allez на Divi > Създател на теми.
Създайте глобалната заглавка с Divi Theme Builder
Щракнете върху „Добавяне на глобална заглавка“ и продължете, като изберете „Изграждане на глобална заглавка“.
Настройки на секцията
Цвят на фона
След като влезете в редактора на шаблони, ще забележите раздел на страницата. Отворете този раздел и променете цвета на фона на напълно прозрачен цвят. Това ще позволи да се покаже всичко под секцията.
- Фон: rgba(0,0,0,0)
оразмеряване
След това отидете в раздела Стил на раздела и променете максималната ширина.
- Максимална ширина (Вижте екранната снимка): 100%
разстояние
Също така премахнете всички горни и долни вътрешни полета по подразбиране.
- Върх на вътрешен марж: 0px
- Долно вътрешно поле: 0px
Z-индекс
И за да сте сигурни, че разделът остава на върха на всичко съдържание от секцията hero ще трябва да увеличим z индекса в настройките на видимост.
- Z-индекс: 99999
Добавете нов ред
Структура на колоната
След като завършите настройките на секциите, можете да добавите нов ред, като използвате следната структура на колоните:
оразмеряване
Без да добавяте никакви модули, отворете настройките на реда и променете настройките за оразмеряване, както следва:
- Хармонизиране на височините на колоните: Да
- Максимална ширина: 100%
- Максимална ширина: 100%
разстояние
След това добавете персонализирани вътрешни полета (отгоре и отдолу).
- Пиков вътрешен марж: 2vw
- Долно вътрешно поле: 0vw
Основен елемент
След това отидете в раздела Разширени и се уверете, че колоните остават една до друга на по-малки размери на екрана, като добавите един ред CSS код към основния елемент на реда.
display: flex;
Колона 2
Цвят на фона
Продължете, като отворите настройките на колона 2 и сменете цвета на фона на полупрозрачен цвят.
- Цвят на фона: rgba (255,255,255,0.71)
граница
Също така добавете долна граница към колоната.
- Ширина на долната граница: 2px
- Цвят на бутона и долната граница: #f4583f
Кутия за сянка
И създайте плаващ ефект, като добавите фина кутийка.
- Shadow Box: [Преглед на заснемането]
- Начална позиция: 20px
- Bow Shadow Blur Strength: 50px
- Сила на разпръскване на сянка в кутия: -20px
- Цвят на шрифта на субтитрите: rgba(0,0,0,0.23)
Добавете модул Image към колона 1
Изтеглете логото
След като завършите настройките на реда и колоната, е време да добавите модулите, като започнете с модул Изображение в колона 1. Качете лого с прозрачен фон.
подравняване
Превключете към раздела Module Style и променете подравняването.
- Подравняване на изображението: Центрирано
оразмеряване
Също така променете ширината на модула в настройките за оразмеряване.
- Максимална ширина: 8 vw (десктоп), 14 vw (таблет), 21 vw (телефон)
Добавете модул от менюто към колона 2
Изберете меню
Да преминем към следващата колона. Там единственият модул, от който се нуждаем, е модул Меню. Изберете меню по ваш избор.
Премахнете цвета на фона
След това отидете на настройките на фона и премахнете цвета на фона.
разпореждане
Превключете към раздела Стил на модула и променете оформлението.
- Стил: Центриран
- Падащо меню: надолу
Текст на менюто
Също така стилизирайте настройките на текста на менюто.
- Шрифт на менюто: Mulish
- Цвят на текста на менюто: #6f6666
- Меню за размер на текста: 1vw (десктоп), 2vw (таблет), 3vw (телефон)
Падащо меню
След това променете настройките от падащото меню.
- Цвят на падащия ред: #f4583f
икони
Използвайте същия цвят за цвета на иконата на менюто за хамбургер в настройките на иконата.
- Цвят на иконата на менюто за хамбургери: #f4583f
разстояние
Завършете настройките на модула, като добавите подложка отгоре и отдолу в настройките за разстояние.
- Пиков вътрешен марж: 1,5 vw
- Долно вътрешно поле: 1,5 vw
Добавете модула Button към колона 3
Добавете текст към бутона
Да преминем към следващата и последна колона. Добавете модул Button с текст по ваш избор.
подравняване
След това променете подравняването на модула.
- Подравняване на бутоните: центрирано
Настройки на бутона
Продължете, като персонализирате бутона по съответния начин:
- Използвайте персонализирани стилове за Бутон: Да
- Размер на текста на бутона: 0,9 vw (десктоп), 1,5 vw (таблет), 2,5 vw (телефон)
- Цвят на текста на бутона: #ffffff
- Бутон за фон: #f4583f
- Ширина на рамката на бутона: 0 пиксела
- Цвят на рамката на бутона: #f4583f
- Бутон за радиус на границата: 0 пиксела
- Шрифт на бутона: Mulish
- Бутон за приглушена светлина: удебелен текст
разстояние
Завършете настройките на модула, като добавите персонализирана подложка на различни размери на екрана.
- Горно и долно вътрешно поле: 1vw (десктоп), 2vw (таблет), 3vw (телефон)
- Ляво и дясно вътрешно поле: 2vw (десктоп), 3vw (таблет), 4vw (телефон)
Допълнителни параметри на раздела
Основен елемент по подразбиране
След като завършите общата персонализация, има още едно нещо, което трябва да направите; поставете секцията над съдържание на вашата страница. За да направим това, ще трябва да добавим два реда CSS код към основния елемент на секцията.
position: absolute;
top: 0;
Основен елемент при задържане
Не забравяйте да добавите същите тези редове от CSS код към опцията за задържане на курсора на мишката върху основния елемент. Това ще предотврати трептенето на секцията, след като задържите курсора на мишката върху нея.
position: absolute;
top: 0;
Запазете промените в конструктора и вижте резултата
След като завършите секцията, можете да запазите глобалната заглавка и да покажете резултата на вашия сайт!
изследване
Сега, след като преминахме през всички стъпки, нека да разгледаме за последно резултата.
Изтеглете DIVI сега!!!
Заключение
Така че! Това е всичко за тази статия. Показахме ви как да създадете плаваща и прозрачна лента с менюта с Divi Theme Builder. Заглавката се поставя над първата секция на вашата страница или публикация.
За да се запознаете с Divi's Theme Builder, можете също да прочетете нашата статия за Как да създадете глобален хедър с Theme Builder на Divi
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...