Искате ли да проектирате фон 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 за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...