Този урок допълва урок, който създадохме преди няколко дни. Показахме ви как да добавите превъртащ се текст към колона в Divi. Днес ще ви покажем как да използвате същата техника, за да добавите секция „супергерой“ (термин, използван за описание на голяма област от уеб страница, предназначена да привлече вниманието и да подчертае определени елементи).
Нека да започнем.
Добавете предварително определеното оформление
За да добавите оформлението към страницата си, отворете менюто с настройки в долната част на Divi builder-а и щракнете върху символа плюс. В изскачащия прозорец „Зареждане от библиотека“ изберете пакета с оформления „Job Recruiter“. След това щракнете, за да използвате оформлението на началната страница.
Премахнете допълнителното съдържание с оформлението
След като презентацията се зареди на страницата, разгънете изгледа на телена рамка и изтрийте цялото съдържание от презентацията, с изключение на заглавката с пълна ширина и секцията директно под нея.
Създаване на анимация на селекционен текст
Както можете да видите, думата „нает“ вече се използва като голям елемент за текстов дизайн в текстов модул във втория раздел. Ще превърнем този текстов мод в отзивчив елемент за дизайн на високоговорители за текст. Ключът към отзивчивостта на текстовия правоъгълник е да се уверите, че реда и текстовият модул обхващат цялата ширина на прозореца на браузъра. Можем да направим това, като използваме 100% ширина. Тогава можем да използваме единицата за дължина vw за размера на текста. Това ще направи текста подходящ за ширината на браузъра. След това ще приложим същите принципи, които използвахме преди, за да илюстрираме нашия прост пример за превъртане на текст.
Ето как да го направите.
Актуализирайте параметрите на реда
Както бе споменато по-рано, редът трябва да е 100%, за да работи дизайнът на този отзивчив текстов избор. Това позволява на нашия текстов модул да използва единици с дължина vw спрямо ширината на браузъра. Тъй като нашето предварително дефинирано оформление вече има линия със 100% ширина, не е нужно да правим нищо.
Трябва обаче да коригираме останалите настройки по следния начин.
- Марж: -24vw надолу
- Трансформирайте транслиране на оста Y: -24vw
- Хоризонтално преливане: скрито
- Вертикално преливане: скрито
Отрицателното долно поле е да премахнете отрицателното пространство, което остава всеки път, когато преместваме реда с помощта на командата за преобразуване на превод. И ние трябва да скрием препълването на реда за нашия текстов ефект на селекция.
Актуализирайте дизайна на текста на текстовия модул
Сега всичко, което трябва да направите, е да актуализирате текстовия модул, за да го преобразувате в голям елемент за текстов дизайн.
Отворете текстовия модул и актуализирайте следното:
- Цвят на текста на текст: rgba (255,255,255,0.16)
- Размер на текста на текста: 36vw
- Марж: -100% вляво, 100% вдясно
Размерът на текста използва единица дължина vw, така че текстът отговаря добре на ширината на браузъра.
Добавете анимация към текстовия модул
- Анимационен стил: Слайд
- Посока на анимация: вляво
- Продължителност на анимацията: 10000ms
- Интензивност на анимацията: 100%
- Анимация на кривата на скоростта: линейна
- Повторете анимацията: Loop
Окончателен дизайн
Сега проверете окончателния дизайн.
Заключителни мисли
Текстовите полета могат да бъдат удобен инструмент за уеб дизайн. Те не се ограничават само до това да действат като тикери. Те могат също така да добавят интересен анимиран елемент към вашия уеб дизайн. А най-хубавото е, че Divi улеснява създаването и проектирането на всякакви красиви неща. Надявам се, че този урок ще ви помогне да създавате прости текстови полета, когато имате нужда от тях.
Надявам се да се чуем от вас в коментарите.
За вашето здраве!