Наличието на впечатляващо заглавие ви гарантира шанс да привлечете вниманието на посетителите си. Заглавията обикновено не остават незабелязани поради размера и централната си позиция, но ако искате да направите още една крачка напред и да направите заглавието буквално да изпъква, сте попаднали на правилното място.
В този урок ще комбинираме настройките за анимация на Divi, за да създадем заглавие, което се откроява и грабва вниманието на посетителите ви.
Краен резултат
Част първа: Дизайн
Конфигурация на раздел
Цвят на фона
Да започнем да проектираме! Създайте нова страница и добавете към нея редовен раздел. Отворете настройките на раздела и променете цвета на фона.
- Цвят на фона: #EEE
разстояние
След това отидете на настройките за разстояние между секциите и добавете персонализирани маржове на запълване.
- Подложка отдолу: 10vw
Добавете ред 1
Структура на колоната
Продължете да добавяте нов ред, като използвате следната структура на колоната:
Цвят на фона
Без още да добавяте модули, отворете настройките на реда и променете цвета на фона на реда.
- Цвят на фона: #DDD
оразмеряване
След това отидете на настройките за оразмеряване и оставете реда да запълни цялата ширина на екрана.
- Направете тази линия пълна ширина: Да
- Използвайте персонализирана ширина на улука: Да
- Ширина на улука: 1
разстояние
Отстранете също горната и долната вътрешна подложка за линията по подразбиране.
- Подложката отгоре: 0px
- Запълване на дъното: 0px
Добавете текстов модул
Време е да започнем да добавяме модули! Първият модул, от който се нуждаем, е текстов модул. Въведете първата част на заглавието си в областта за съдържание, използвайки стила на абзацния текст.
Цвят на фона
След това отидете на настройките на фона на модула и добавете цвят на фона.
- Цвят на фона: #ccc
Текстови настройки
Променете и текстовите настройки в раздела Дизайн.
- Текст на шрифта: Didact Gothic
- Тегло на шрифта на текста: удебелен
- Цвят на текста: #000000
- Размер на текста: 10vw
- Височина на реда на текста: 0.9em
- Ориентация на текста: Център
разстояние
След това създайте произволна форма, която харесвате, като използвате персонализирана подложка отгоре и отдолу.
- Подложка в горната част: 10vw
- Подложка отдолу: 3vw
Анимация
Не на последно място ще добавим малко анимация. Важно е да се уверите, че продължителността на анимацията и началната непрозрачност са нула. Това ще позволи текстовият модул да се покаже със светкавичен ефект.
- Стил на анимация: Fade
- Повторете Анимация: Веднъж
- Продължителност на анимацията: 0ms
- Забавяне на анимацията: 1000ms
Клонирайте текстовия модул x4
След като приключите с редактирането на първия текстов модул, можете да продължите и да го клонирате колкото пъти искате, в зависимост от дължината на заглавието ви. За всяка част от заглавието, която искате да покажете със светкавичен ефект, ще ви е необходим отделен текстов модул. За този пример ще се нуждаем от допълнителни модули 4.
Цвят на фона
С цвета на фона.
- Копие 1 = Цвят на фона: # 5900ff, цвят на текста: #FFF
- Копиране 2 = оставете както е, променете продължителността на анимацията (забавяне на анимацията): 1500ms
- Копиране 3 = Цвят на фона: # ffb200, цвят на текста: #FFF, промяна на продължителността на анимацията: 2000ms
- Копиране 4 = Цвят на фона: # 000, цвят на текста #FFF, промяна на продължителността на анимацията: 2500ms
Добавете отрицателен марж към всеки текстов модул с изключение на първия
След като приключите с персонализирането на всички текстови модули, можете да продължите и да създадете припокриване. За да създадем това припокриване, ще добавим отрицателен горен марж към всеки от дублиращите се текстови модули. С други думи, ние се уверяваме, че всички модули, които следват първия модул, се показват над този първи текстов модул.
- Горна граница: -31.98vw
Линия на трансформация
Transform Translate
Продължете, като трансформирате целия ред, като започнете с параметрите на трансформацията.
- Отдолу: -35vw
Преобразуване на въртене
Също така променете стойностите на въртене на трансформацията.
- Ляво: 320deg
Добавете линията 2
Структура на колоната
На второ място! Сега, когато ефектът на заглавието е налице, можем да започнем да добавяме останалите модули. Добавете нов ред, като използвате следната структура на колоните:
оразмеряване
Без още да добавяте модули, отворете настройките на реда и оставете реда да заема цялата ширина на екрана в настройките за оразмеряване:
- Направете тази линия пълна ширина: Да
- Използвайте персонализирана ширина на улука: Да
- Ширина на улука: 1
разстояние
Премахва първоначалното попълване по подразбиране от следващия ред.
- Горна подложка: 0px
Добавете текстов модул за описание в колоната 2
Добавете H1 съдържание
Време е да добавим модули. Първият модул ще бъде текстов модул. Можете да добавите каквото съдържание желаете.
Настройки за текст на H1
След това отидете в раздела за проектиране и променете настройките на H1.
- Шрифт на заглавието: Didact Gothic
- Заглавие Тегло: Bold
- Размер на шрифта: 1.8vw (компютър), 3.8vw (таблет), 4vw (телефон)
разстояние
Добавете персонализирани маржове в раздела за разстояние.
- Горна граница: -4vw
- Долен марж: 2vw
- Ляв поле: 30vw
- Десен поле: 30vw (компютър), 15vw (таблети и телефон)
Добавете разделителен модул към колоната 2
видимост
Следващият модул е разделителният модул. Уверете се, че опцията „Показване на разделител“ е активирана.
- Показване на сепаратор: Да
Цвят
След това отидете в раздела "Дизайн" и променете цвета на сепаратора.
- Цвят: #000000
Dimentionnement
Променете и опциите за разстояние.
- Тегло на разстоянието: 8px
- Ширина: 7%
разстояние
Винаги с опции за оразмеряване.
- Нисък марж: 1vw
- Ляв поле: 30vw
Добавете текстов модул в колоната 2
Добавете съдържание
Следващият модул ще бъде друг текстов модул. Трябва да предоставите съдържанието по ваш избор.
Настройка на текста
След това трябва да промените настройките на текста в раздела "Дизайн".
- Размер на текста: 0.8vw (компютър), 1.3vw (таблет), 1.6vw (телефон)
- Височина на линията: 2.2em
разстояние
Добавете и някои полета в разстоянието.
- Нисък марж: 3vw
- Ляв марж: 30vw
- Десен марж: 30vw (компютър), 15vw (таблети и телефони)
Добавете модул с бутони към колоната 2
Настройки на модулния бутон
За последния модул, който ще бъде модул с бутони. Ще добавите избраното от вас съдържание и ще промените настройките, както следва:
- Използвайте персонализиран стил: Да
- Размер на шрифта: 1vw (компютър), 1.5vw (таблет), 2vw (телефон)
- Ширина на границата на бутона: 0px
- Бутон за шрифт: Poppins
- Тегло на текста: Удебелен
- Стил на шрифта: Големи букви
разстояние
Отидете в настройките за разстоянието и добавете персонализиран външен поле, както и вътрешно поле и това е всичко.
- Ляв външен марж: 30vw
- Вътрешен висок марж: 1vw
- Вътре нисък марж: 1vw
- Ляв вътрешен ръб: 3vw
- десен вътрешен марж: 3vw
Завърши
В този урок видяхме как да проектираме заглавие с анимиран текст, използвайки само вътрешните опции на Divi. Това е отлична техника, която ще ви позволи да привлечете вниманието на посетителите си по много оригинален начин.
Здравейте. Страхотен вашият урок, благодаря ви. Направих, но имам малък проблем. Анимацията се провежда само веднъж и след това не се повтаря.