Искате ли да проектирате фон Divi Искате да създадете анимирано превъртане на страници, използвайки маски и шаблони? Този урок е за вас...
Добавяне на анимация за превъртане към Divi и неговите фонови маски и шарки е полезен дизайнерски трик, който може да вдъхне нов живот на фоновите дизайни на вашия уебсайт.
В този урок ще ви покажем как да създавате и анимирате фонови маски и шарки, използвайки опциите за превъртане на Divi (не се изисква персонализиран код).
За да направим това, ще създадем плаващ фонов слой, използвайки Divi линия, която ще използваме за анимиране на фонови маски и шарки, когато потребителят превърта през раздел със съдържание.
Смятаме, че резултатът ще ви хареса.
Нека да започнем!
изследване
Ето една бърза илюстрация на това как ще изглежда анимацията на фоновото превъртане в този урок.
Концепцията
Концепцията на този дизайн не трябва да е твърде трудна за разбиране. Започваме със секция, която има градиентен фон.
След това създаваме линия, която е позиционирана (абсолютно) така, че да покрива изцяло секцията (като наслагване). Можем да добавим фонов шаблон към реда.
След това можем да добавим фонова маска към колоната.
След това добавяме ефекти на превъртане към реда и колоната (като мащабиране и завъртане), което ще анимира шарката и маската отделно на фона на секцията.
Когато скрием препълването на секцията, виждаме само анимацията, съдържаща се в секцията.
Нека започнем, като създадем страница с Divi Builder
За да започнете, ще трябва да направите следното:
От таблото за управление на WordPress отидете на Страници> Добавяне на ново за да създадете нова страница.
Дайте му заглавие, което има смисъл за вас, и щракнете Използвайте Divi Builder
След това кликнете Започнете да строите (Изграждане от нулата)
След това ще имате празно платно, за да започнете да проектирате в Divi.
Прочетете още: Divi: Как да използвате "Gradient Builder", за да разкрасите вашите изображения
Как да създадете анимирани маски и шарки за фон за превъртане с Divi
Фонов дизайн на секцията
Първо, ще игнорираме създаването на нов ред и ще преминем директно към промяна на съществуващата секция по подразбиране в конструктора на теми.
За да може фонът ни да запълни браузъра, трябва да добавим вертикална височина към секцията. Един лесен начин да направим това е да добавим минимална височина към секцията.
Отворете настройките на секцията. Под раздела Дизайн, актуализирайте минималната височина и премахнете подложката, както следва:
- Поле: 80 vh (отгоре и отдолу)
- Подплата: 0px (отгоре и отдолу)
Проектиране на градиентен фон за секцията
Вече можем да добавим персонализиран градиент на фона към секцията.
За да добавите първите градиентни точки, уверете се, че настройките на секцията са отворени в раздела съдържаниеСлед това изберете раздела Градиент на фона и щракнете, за да добавите нов градиент. Това ще добави два градиентни цвята по подразбиране. Добавете следните градиентни стопове с цвят и позиция, както следва:
- Градиентни стопове:
- 0%: #4158d0
- 50%: #c850c0
- 100%: #ffcc70
След това променете посоката на линейния градиент:
- Посока на градиента: 270 градуса
Добавете редове към раздела
След като нашата секция е на мястото си, добавете ред с една колона към нея. Този ред ще бъде използван за нашата фонова маска и анимация на превъртане с шарка.
След това дублирайте реда, който току-що създадохте. Този втори (дублиран) ред ще бъде използван за нашето съдържание, както обикновено.
Вече би трябвало да имате горен ред за анимацията на превъртане на фона и ред за нормалното съдържание.
Персонализирайте линията
След като градиентът на фона на нашата секция е готов, можем да насочим вниманието си към линията, която ще използваме за нашата анимация на превъртане на фона.
Отворете настройките на линията. Под раздела Подробно, актуализирайте следното:
- Позиция: Абсолютна
Това ще позволи на линията да се припокрива със секцията, без да заема реално място в документа.
Сега всичко, което трябва да направим, е да актуализираме височината и ширината, така че да покриват цялата ширина и височина на секцията. Това ще създаде необходимото наслагване и втория ни фонов дизайн слой.
Под раздела Дизайн, актуализирайте опциите за оразмеряване, както следва:
- Aquasize Височини на колони: ДА
- Ширина: 100%
- Максимална ширина: 100%
- Височина: 100%
- Подплата: 0px (отгоре и отдолу)
Сега може да не виждате линията, но тя вече перфектно покрива фона на целия раздел.
Създайте фонов шаблон за линията
В този пример ще добавим модела Конфети като фон на линията.
Отворете настройките на линията. Под опцията История, изберете раздела Фонов шаблон и актуализирайте следното:
- Фонов модел: конфети
- Модел:
- Цвят: #f6bef7
- Размер: Персонализиран размер
- Ширина: 35 vw
- Повторение на произхода: център
ЗАБЕЛЕЖКА Използването на мерната единица за дължина VW гарантира, че шаблонът ще се мащабира заедно с браузъра, запазвайки дизайна последователен и адаптивен.
Добавете ефекти на превъртане към линия
След като нашият фонов шаблон е на мястото си, можем да добавим ефекти на превъртане към линията.
Отидете в раздела ПодробноПод опцията Ефекти на превъртане, актуализирайте следното:
Изберете раздел Хоризонтално движение и актуализирайте следното:
- Разрешаване на хоризонтално движение: ДА
- Начално отместване: 0,5 (при 0%)
- Средно отместване: 0 (от 40% до 60%)
- Краен офсет: -0,5 (при 100%)
Това ще премести фоновия шаблон на линията от 50 пиксела наляво и ще завърши с 50 пиксела надясно.
Изберете раздела „Мащабиране нагоре и надолу“ и актуализирайте следното:
- Разрешаване на мащабиране нагоре и надолу: ДА
- Начална скала: 150% (при 0%)
- Средна скала: 100% (от 40% до 60%)
- Крайна скала: 150% (при 100%)
Това ще мащабира фоновия шаблон на линията, докато превъртате.
Изберете раздел "Завъртането " и актуализирайте следното:
- Активиране на въртене: ДА
- Начална ротация: 10 градуса (при 0%)
- Средна ротация: 0 градуса (от 40% до 60%)
- Крайна ротация: -10 градуса (при 100%)
КЛЮЧОВ СЪВЕТ: Трябва да сведете завъртането до минимум, в противен случай рискувате да се появят празнини там, където линията не се простира извън секцията. Добро правило е да увеличите мащаба, ако искате да увеличите завъртането. Това ще позволи на линията да се завърти над секцията, без да се показват краищата.
Добавете фонова маска с ефекти на превъртане към колоната
След като редът ни е завършен, сме готови да добавим фонова маска с ефекти на превъртане към колоната в същия ред. За да започнем, нека добавим фонова маска.
За да направите това, отворете настройките на колоната. Под раздела Фонова маска, актуализирайте следното:
- Маска: петно на слоя
- Цвят: #ffffff
- Трансформация на маска: хоризонтално обръщане, обръщане
Добавете ефекти на превъртане към колоната
След като фоновата ни маска е на мястото си, можем да добавим ефекти на превъртане към колоната. Имайте предвид, че колоната вече има ефекти на превъртане, наследени от родителския ѝ ред.
Всичко, което ще направим, е да завъртим колоната в обратната посока на реда, за да постигнем по-голямо разделяне на маската и шаблона по време на превъртането.
Отидете в раздела Подробно. Под опции Ефекти на превъртане, изберете раздела Ротатиng и актуализирайте следното:
- Активиране на въртене: ДА
- Начална ротация: -15 градуса (при 0%)
- Средна ротация: 0 градуса (от 40% до 60%)
- Крайна ротация: 15 градуса (при 100%)
Скриване на препълването на секцията
В момента линията остава видима, когато превъртането я разшири извън секцията.
За да почистим това, трябва да скрием препълването на секцията. За да направите това, отворете настройките на секцията. В раздела Подробно, актуализирайте опциите за видимост, както следва:
- Хоризонтално преливане: Скрито
- Вертикално преливане: Скрито
Сега изглежда по-добре.
Вижте също: Divi: 12 комбинации от маски и фонови модели
Добавяне на съдържание към линията, създадена за тази цел
На този етап фоновата маска и анимацията за превъртане на шаблона са завършени. Всичко, което трябва да направим, е да добавим желаното съдържание към реда, който създадохме по-рано за съдържанието.
За този пример добавихме фиктивно заглавие, за да можем да видим как ще изглежда фоновата анимация със статичен текст.
Краен резултат
Нека да разгледаме крайния резултат от нашия дизайн.
Изтеглете DIVI сега!!!
Заключение
Удивително е колко лесно е да се създават толкова красиви фонове с опциите за фон на Divi. Освен това, добавянето на анимация с ефектите на превъртане на Divi вдъхва нов живот на тези дизайни.
За различен вид можете да опитате различни маски и шарки на всеки слой. Ако искате повече вдъхновение за това как да използвате маски и модели За основна информация вижте тези 12 комбинации от фонова маска и шарки
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове.
Не се колебайте да се консултирате и с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...