Искате ли да създадете лента за навигация в Divi, която да е лепкава от долната до горната част на страницата?
В урока Divi Днес ще ви покажем стъпка по стъпка как да създадете лепкава лента за навигация отдолу нагоре в Divi.
Това ще позволи на навигационната лента първоначално да остане в долната част на страницата за уникално оформление на видимата на екрана част от страницата. След това, след като превъртите секцията над сгъвката на страницата, лентата за навигация ще остане в горната част на страницата и ще остане там през цялата страница.
Може да се каже, че страницата ще „превземе“ менюто в долната част на екрана и ще донесе приятен ефект на взаимодействие към главното ви меню и уеб сайт.
Да започнем!
изследване
За да ви помогнем да визуализирате резултата, който се опитваме да постигнем, нека да разгледаме крайния резултат:
Изтеглете DIVI сега!!!
Нека започнем, като създадем нова страница с Divi Builder
За да започнете, ще трябва да направите следното:
От таблото за управление на WordPress отидете на Страници> Добавяне на ново за да създадете нова страница.
Дайте му заглавие, което има смисъл за вас, и щракнете Използвайте Divi Builder
След това кликнете Започнете да строите (Изграждане от нулата)
След това ще имате празно платно, за да започнете да проектирате в Divi.
Създайте лепкава навигационна лента отдолу нагоре в Divi
Част 1: Създаване на секцията и горния колонтитул над водната линия
В първата част на този урок ще създадем секцията и заглавката над сгъвката, която ще служи като основна секция за заглавка на нашата страница. Разделът ще бъде на цял екран на работния плот, за да се гарантира, че разделът заема целия прозорец на дисплея.
Прочетете още: Divi: Изберете между решетката и оформлението с пълна ширина на модула Filterable Portfolio
Добавете ред
За да започнете, добавете ред в колона към секцията по подразбиране.
Настройки на секцията
Преди да добавите модул, отворете настройките на раздела и добавете фон, както следва:
- Цвят на фона: #e9f9ff
- Фоново изображение: [добавете изображение]
Под раздела Дизайн, актуализирайте минималната височина и подложка.
- Минимална височина: 100vh (десктоп), автоматично (таблет и телефон)
- Подложка: 20vh (отгоре и отдолу)
Заглавен текст
За да създадете заглавния текст, добавете нов текстов модул към реда.
След това актуализирайте съдържание със следната заглавка H1:
<h1>Above the Fold</h1>
Текстови настройки
Под раздела Дизайн в настройките на текстовия модул актуализирайте стиловете на шрифта на заглавката, както следва:
- Заглавие:
- Шрифт: Ruby
- Тегло на шрифта: Полудебел
- Стил: TT
- Подравняване на текста: центрирано
- Цвят на текста: #302ea7
- Размер: 130px (десктоп), 70px (таблет), 40px (телефон)
- Разстояние между буквите: 2px
- Височина на реда: 1,3 em
Част 2: Създаване на секцията под водолинията
За да демонстрираме функционалността на залепващата лента за навигация, трябва да добавим раздел под видимата на екрана част от страницата, за да можем да имаме място за превъртане.
За да създадете секцията, дублирайте секцията над гънката, която току-що направихме.
Актуализирайте фона на дублиращия се раздел.
- Цвят на фона: #f4def1
След това дайте на раздела голяма минимална височина, така че да имаме място за превъртане надолу по страницата. Това е просто раздел, който трябва да бъде попълнен вместо съдържание истинска една страница.
- Минимална височина: 200vh
След това актуализирайте съдържание на модул Текст чрез замяна на думата "По-долу" равенство „Отгоре“.
Част 3: Създайте лепкава лента за навигация
За да създадем лепкава лента за навигация отдолу нагоре, първата ни стъпка е да създадем нова секция с един ред към една колона.
Добавен нов раздел и линия
Първо, нека добавим нова обикновена секция директно под секцията над сгъвката.
След това нека добавим ред с една колона към секцията.
Фон на раздела и подложка
Отворете настройките на раздела и актуализирайте цвета на фона.
- Цвят на фона: #302ea7
След това премахнете горната и долната подложка, така че навигационната лента да има по-малка височина.
- Подплата: 0px (отгоре и отдолу)
Добавете видимо преливане
За да сте сигурни, че падащите менюта остават видими, актуализирайте падащите опции видимост както следва :
- Хоризонтално преливане: видимо
- Вертикално преливане: видимо
Дайте на секцията абсолютна позиция на мобилни устройства
Мобилното падащо меню ще се отвори по подразбиране под иконата на хамбургер. Ако запазим навигационната лента в долната част, тя ще скрие падащото меню, ако потребителят щракне върху него.
За по-добро потребителско изживяване искаме лентата за навигация да започва в най-горната част на страницата на екрана на таблета и телефона.
За целта дайте на раздела абсолютна позиция на таблет и телефон.
- Позиция: относителна (десктоп), абсолютна (таблет и телефон)
Добавете лепкава позиция за настолен компютър и мобилно устройство
За да добавите лепкава позиция към секцията на лентата за навигация, актуализирайте следното:
- Залепваща позиция: Прилепване към горната и долната част (настолен компютър), Прилепване към горната част (таблет и телефон)
Актуализирайте подреждането на редовете
След като залепващата секция е завършена, отворете настройките на реда вътре в секцията и актуализирайте подложката, както следва:
- Подплата: 10px (отгоре и отдолу)
Създайте навигационно меню
С раздела и реда на място сме готови да създадем навигационното меню.
Започнете с добавяне на модул Меню към реда с една колона.
Съдържание на менюто
Актуализирайте съдържанието на менюто, както следва:
- изберете менюто от падащия списък
- добавете изображение на лого
- премахнете цвета на фона по подразбиране
Под раздела Дизайн, актуализирайте следния текст на менюто и настройките на иконите:
- Цвят на активната връзка: #fff
- Шрифт на менюто: Ruby
- Стил на шрифта на менюто: TT
- Цвят на текста: #fff
- Размер на текста на менюто: 16px
- Подравняване на текста: дясно
- Цвят на линията на падащото меню: #e19dff
- Цвят на текста на мобилното меню: #302ea7
- Цвят на иконата на пазарската количка: #fff
- Цвят на иконата за търсене: #fff
- Цвят на иконата на менюто за хамбургери: #fff
Използване на рамка за компенсиране на абсолютната позиция на навигационната лента на мобилен телефон
Тъй като секцията на лентата за навигация има абсолютна позиция на мобилно устройство, лентата ще стои над (и отрязва) горната част на страницата. За да коригираме това, трябва да изместим горната секция, като използваме горна граница със същата височина като навигационната лента/секция.
Проверете височината на секцията на навигационната лента на мобилен телефон
За да определите височината на лентата за навигация на мобилно устройство, отворете версия на живо на страницата в нов прозорец на браузъра. След това можете да намалите ширината на браузъра под 980px, за да видите мобилното меню.
Можете също така да се консултирате с: Divi: Как да създадете лепкава лента за навигация
Щракнете с десния бутон върху секцията, съдържаща менюто, и изберете опцията инспектирайте елемента в контекстното меню на браузъра. Трябва да видите кутия с инструменти под секцията, показваща размерите (включително височината) на секцията.
За този пример височината на секцията на навигационната лента е 72 пиксела.
Добавете отместване на горната граница към секцията над гънката
Сега, след като определихме височината на секцията, отворете настройките за горната секция (над гънката).
Под раздела Дизайн, добавете следната горна граница на таблет и телефон:
- Ширина на горната рамка: 72 пиксела (таблет и телефон)
- Цвят на горната граница: #302ea7
Тъй като границата е на същата височина като секцията с абсолютна позиция, няма да можете да видите границата, защото тя служи само за натискане на секцията надолу, за да не бъде изрязана.
Краен резултат
Открийте крайния резултат!
Изтеглете DIVI сега!!!
Заключение
Създаването на лепкава лента за навигация отдолу нагоре може лесно да се направи с помощта на вградената позиция на Divi и лепкави опции.
Ключът е да дадете на секцията над сгъването височина 100vh, след което да добавите секцията на навигационната лента отдолу, която се придържа към долната и горната част на браузъра. Надяваме се, че това ще ви помогне да добавите по-уникален и ангажиращ вид на видимата на екрана част от страницата към вашия уеб сайт.
Тази лепкава навигационна лента работи най-добре за дизайн на една страница, а не за цялостен шаблон. Въпреки това можете лесно да изберете да използвате това като дизайн на началната си страница и да използвате глобална заглавка за останалите страници, като използвате Генератор на теми Divi .
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове.
Не се колебайте да се консултирате и с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...