Искате ли да подчертаете конкретна част от вашата страница? Днес ще ви покажем как да създадете наслагвания с анимирани граници, за да подчертаете съдържание на вашата страница. Ще създадем тези анимирани рамки, използвайки шаблона App Developer Layout Pack, достъпен от Divi Builder. Въпреки това, можете да използвате тази техника за всякакъв вид уеб сайт които създавате. Определено ще ви помогне да добавите допълнително измерение към вашата страница. Надяваме се, че този урок ще ви вдъхнови да създадете свои собствени наслагвания с анимирани граници.
изследване
Преди да се потопим в урока, нека да разгледаме бързо резултата от тези три примера. Можете да очаквате подобен резултат и на по-малки екрани.
Създайте нова страница, като използвате целевата страница на App Developer Layout Pack
Първото нещо, което трябва да направите, е да създадете нова страница и да използвате App Developer Layout Pack.
Секция "Герой на клониране"
Примерът ни ще бъде създаден в секцията с герои. Като напомняне, ето какво ще създадем:
Добавете нов ред в секцията с герои
Структура на колоната
Нека започнем да пресъздаваме първия пример! Добавете нов ред в специализирания раздел, като използвате следната структура на колоните:
Добавете текстов модул
Оставете съдържанието празно
Добавете нов текстов модул към реда и не забравяйте да оставите текстовото поле съдържание празен. Ние използваме модула за неговите вградени опции за дизайн, а не за показване на съдържание. съдържание писане.
разстояние
Отидете до настройките за интервали на текстовия модул и го оформете, като добавите персонализирани вътрешни и долни полета. Създайте припокриване между този модул и предишните модули, като добавите и отрицателно горно поле.
- Горна граница: -480px
- Най-добра подложка: 223px
- Подложка отдолу: 223px
граница
След това отидете на настройките на границата на модула и добавете рамка по ваш избор.
- Ширина на границата: 9px
- Цвят на рамката: #0ae2ff
- Стил на границата: Начало
Кутия за сянка
Добавете и кутия сянка.
- Сила за размазване на кутия в сянка: 1px
- Дебелина на сянката на кутията: 15px
- Цвят на сенките: rgba (10,226,255,0.59)
Анимация
И си поиграйте с настройките за анимация, за да изведете съдържанието. Трябва да отбележите обаче, че можете да използвате опцията, която ви харесва най-много.
- Анимация на стил: Обръщане
- Повторете Анимация: Веднъж
- Анимация: Надясно
- Продължителност на анимацията: 1500ms
- Забавяне на анимацията: 1500ms
- Анимация за интензивност: 500%
изследване
Сега, след като преминахме през всички стъпки, нека да разгледаме последния резултат от трите примера, които пресъздадохме в този урок.
Заключителни мисли
В този урок ви показахме как да маркирате съдържанието си с помощта на наслагвания с анимирани граници. Това е страхотна техника за привличане на вниманието към конкретна част от вашата страница и то по стилен начин. Можете да използвате тази техника за всеки тип уеб сайт че изграждате. Ако имате някакви въпроси или предложения, не забравяйте да оставите коментар в секцията за коментари по-долу!
