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