Бихте ли искали да комбинирате настройките на фоновата маска и опциите за трансформиране на Divi модел, за да създадете уникален фон?
Фоновите шарки са чудесен начин да придадете визуален щрих на уебсайта си и да му помогнете да се открои от тълпата. Новите настройки за фонова маска и трансформация на шарки на Divi могат да се комбинират по различни начини, за да се създадат тези фонови шарки.
В тази статия ще видим как да използваме настройките за фонова маска и трансформация на шаблони на Divi за да създадете интересни фонове за вашите Divi оформления.
Нека да започнем.
изследване
Първо, ето общ преглед на всеки пример на различни размери на екрана (телефон и настолен компютър).
Прочетете още: Divi: Как да използвате ефекти на сянка и задържане на мишката, за да създадете интерактивно съдържание
Пример 1
Версия 1 на десктоп
Версия 1 на телефона
Изтеглете DIVI сега!!!
Версия 2 на десктоп
Версия 2 на телефона
Пример 2
Версия 1 на десктоп
Версия 1 на телефона
Изтеглете DIVI сега!!!
Версия 2 на десктоп
Версия 2 на телефона
Пример 3
Версия 1 на десктоп
Версия 1 на телефон
Изтеглете DIVI сега!!!
Версия 2 на десктоп
Версия 2 на телефона
Опции за фонова маска на Divi и трансформация на шаблон
Новите функции за фонова маска и шарка на Divi включват няколко опции за регулирането им. Тези корекции включват хоризонтално и вертикално обръщане, завъртане и инверсия. За да видите опциите, отидете в настройките на фона на секция или ред и изберете разделите „Фонова шарка“ или „Фонова маска“.
След като добавите шаблон или маска, ще се появят настройките за трансформация. Просто кликнете върху опциите, които искате да използвате. Можем да ги използваме заедно и във всякаква комбинация, която желаем.
Как работят настройките за маска и трансформация на шаблон на Divi
Моделът по-долу е Зиг Заг с настройки по подразбиране.
Добавихме маска на Layer Blog към изображението по-долу. Нека я използваме, за да демонстрираме как работят настройките за маска на фона и трансформация на шаблони.
Хоризонтално обръщане
Това е хоризонталното обръщане. Приложихме параметрите на трансформация както към шаблона, така и към маската.
Вертикално обръщане
Това е вертикалното обръщане за шаблона и маската.
Въртене
Това показва ротация за шаблон и маска.
Обратен
Този пример показва Invert за модел и маска.
Комбинации от фонова маска и трансформация на шаблон
Разбира се, можем да използваме и параметри на трансформация в различни комбинации. Ето няколко примера.
Това завърта шаблона и обръща маската.
Този пример използва вертикално обръщане, завъртане и инверсия за фоновия шаблон. Фоновата маска използва хоризонтално обръщане, вертикално обръщане и завъртане.
За този пример използвахме хоризонтално обръщане и завъртане за фоновия шаблон и вертикално обръщане и завъртане за фоновата маска.
Примери за фонова маска и настройки за трансформиране на шаблони
След това нека видим как тези настройки могат да се използват с оформления на Divi. Ще използваме един раздел като отправна точка и ще създадем три примера. Ще го персонализираме и след това ще използваме настройките за трансформация, за да го променим за всеки пример.
За нашите примери използваме модифицирана версия на секцията Hero на целевата страница на оформлението Имуществено планиране налични в Divi.
Ето предварителен преглед на въпросния раздел. Използван е цвят на фона: #92a5ab.
- Фон: #92a5ab
Пример 1 за параметри на фонова маска и трансформация на шаблон
Първият ни пример ни дава арка, разположена вертикално в центъра на екрана. Едната страна на екрана има кичур шарка. След това ще създадем алтернативна версия с арката, обърната в обратната посока.
фонов модел
Отворете настройките на секцията, превъртете надолу до История и изберете раздела Фонов модел. Изберете Tufted за фоновия шаблон и Inverting за Pattern Transform.
- Фонова шарка: Туфтинг
- Трансформация на модел: Обратно
Фонова маска
Изберете раздела Фонова маска и изберете Арка За фоновата маска променете цвета на маската на #616d72 и задайте трансформацията на маската на Invert. Това завършва първата ни версия на лъка с кичури.
- Фонова маска: Arch
- Цвят на маската: #616d72
- Трансформация на маска: Обръщане
Пример 1 Версия 2
След това нека създадем вариант на нашия дизайн. Просто променете трансформация на маската за фоновия шаблон, като го обърнете хоризонтално и вертикално. Това променя арката, за да е обърната в другата посока, и измества шаблона, така че да не изглежда просто като огледален образ.
- Трансформация на маската: хоризонтално обръщане, вертикално обръщане
Пример 2 за параметри на фонова маска и трансформация на шаблон
За втория ни пример ще създадем овал в центъра на екрана с шарка вътре в овала. След това ще променим разположението на шарката. Ще я модифицираме и за различни размери на екрана.
Фонов модел
В настройките на фона изберете раздела Фонов шаблон и изберете Shippo за мотива. Задайте трансформацията на шаблона на Инвертиране.
- Фон на модела: Shippo
- Трансформация на модел: Обратно
Фонова маска
След това изберете раздела Фонова маска и променете следните настройки.
- Фонова маска: елипса
- Цвят: #758489
- Трансформация на маската: хоризонтално обръщане, завъртане
Таблет и телефон
Таблетът и телефонът ще използват едни и същи настройки, така че трябва да променим само настройките на таблета. Изберете Таблет раздел и модифицирайте трансформация на маска в хоризонтално обръщане.
- Трансформация на маската: хоризонтално обръщане, обръщане
Пример 2 Версия 2
След това ще създадем варианта за втория ни пример. Първо, изберете раздела Фонов шаблон и задайте цвета на шаблона на rgba(0,0,0,0.06).
- Цвят на шаблона: rgba(0,0,0,0.06)
След това изберете раздела Фонова маска и изберете Flip Horizontal, Rotate и Invert за трансформацията на маската.
- Трансформация на маска: хоризонтално обръщане, завъртане, обръщане
Таблет и телефон
За опции за таблети и телефони изберете иконата на Таблетка. Променете трансформация на маска при хоризонтално обръщане и обръщане. Алтернативната версия на пример две вече е завършена.
- Трансформация на маската: хоризонтално обръщане, обръщане
Пример 3 за параметри на фонова маска и трансформация на шаблон
За третия ни пример за параметри на маска и трансформация на шаблон ще използваме шаблон тип „пчелна пита“ с маска за рисуване. Ще създадем и негова мобилна версия.
фонов модел
Първо, изберете раздела с настройки на устройството и изберете иконата на офис. Изберете раздела Фонов шаблон и изберете Honeycomb за фоновия шаблон. Променете цвета на rgba(0,0,0,0.42). За този пример ще оставим опциите Трансформация на шаблон деактивиран. Ще ги добавим за алтернативната версия.
- Фонов модел: пчелна пита
- Цвят на шаблона: rgba(0,0,0,0.42)
- Трансформация на шаблон: няма
Фонова маска
След това изберете раздела BackgroundMask. Избирам Боя За фоновата маска променете цвета на #697b82. Изберете Vertical Flip (Вертикално обръщане) за трансформацията на маската.
- Фонова маска: боя
- Цвят на маската: #697b82
- Трансформация на маска: вертикално обръщане
След това изберете Покрийте за размер. Това отваря още няколко възможности. Избирам Долу вдясно Това е всичко за позиционирането. Това е всичко за версията за десктоп. След това ще създадем мобилната версия.
- Размер на маската: Капак
- Позиция на маската: Долу вдясно
Таблет и телефон
След това изберете раздела таблет и модифицирайте трансформацията на маска Фонът е обърнат и завъртян вертикално. Това завършва стилизирането на третия ни пример. След това ще създадем алтернативната версия.
- Трансформация на маска: вертикално обръщане, завъртане
Пример 3 Версия 2
За алтернативната версия на този пример ще коригираме както фоновия шаблон, така и фоновата маска.
фонов модел
За фоновия шаблон променете цвета на rgba(0,0,0,0.11). Променете трансформацията на шаблона на хоризонтално обръщане, вертикално обръщане и завъртане.
- Цвят на маската: rgba(0,0,0,0.11)
- Трансформация на маска: хоризонтално обръщане, вертикално обръщане, завъртане
фонова маска
След това изберете раздела BackgroundMask. Променете цвета на бяло и трансформацията на маската в хоризонтално обръщане, вертикално обръщане и обръщане.
- Цвят на маската: #ffffff
- Трансформация на маската: хоризонтално обръщане, вертикално обръщане, обръщане
След това променете размера на маската за покриване, след което изберете Център за позицията на маската.
- Размер на маската: Капак
- Позиция на маската: Център
Таблет и телефон
Накрая изберете раздела представлява таблетка За да създадете мобилната версия, изберете раздела. фонова маска и изберете четирите опции за трансформиране на маската. Това завършва алтернативната версия на третия пример.
- Трансформация на маска: хоризонтално обръщане, вертикално обръщане, завъртане, обръщане
Крайни резултати
Ето предварителен преглед на всеки пример на различни размери на екрана (настолен компютър и телефон)
Пример 1
Версия 1 на десктоп
Версия 1 на телефон
Версия 2 за настолен компютър
Версия 2 на телефона
Пример 2
Версия 1 за настолен компютър
Версия 1 на телефон
Версия 2 за настолен компютър
Версия 2 на телефон
Пример 3
Версия 1 на десктоп
Версия 1 на телефон
Версия 2 за настолен компютър
Версия 2 на телефон
Изтеглете DIVI сега!!!
Вижте също: Divi: Как да създадете раздел за членове на екипа като въртележка
Заключение
Това е нашият поглед върху това как да използвате настройките за фонова маска и трансформация на шарки на Divi, за да създадете много интересни фонови шарки.
Тъй като шарките и маските могат да се използват заедно, техните настройки за трансформация също могат да се използват заедно. Това отваря множество опции за дизайн, давайки ви още повече инструменти, за да добавите елегантност към вашите Divi фонове.
Най-добрият начин да се научите как да ги използвате е да експериментирате с настройките и да видите какво можете да създадете.
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...