Искате ли да комбинирате настройките на фоновата маска и опциите за трансформиране на шаблона 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 в изображението по-долу. Нека ги използваме, за да демонстрираме как работят настройките на Background Mask и Pattern Transform.
Хоризонтално обръщане
Това е хоризонталното обръщане. Приложихме настройките за трансформация както към шаблона, така и към маската.
Вертикално обръщане
Това е вертикалното обръщане на шаблона и маската.
Въртене
Това показва ротация за шаблон и маска.
Обратен
Този пример показва Invert за модел и маска.
Комбинации от фонова маска и трансформация на шаблон
Разбира се, можем да използваме и параметри на трансформация в различни комбинации. Ето няколко примера.
Това завърта шаблона и обръща маската.
Този пример използва вертикално обръщане, завъртане и обръщане за фоновия шаблон. Фоновата маска използва хоризонтално обръщане, вертикално обръщане и завъртане.
За този пример използвахме хоризонтално обръщане и завъртане за фоновия модел и вертикално обръщане и завъртане за фоновата маска.
Примери за фонова маска и настройки за трансформиране на шаблони
След това нека видим как тези настройки могат да се използват с оформления на Divi. Ще използваме един раздел като отправна точка и ще създадем три примера. Ще го персонализираме и след това ще използваме настройките за трансформация, за да го променим за всеки пример.
За нашите примери използваме модифицирана версия на секцията Hero на целевата страница на оформлението Имуществено планиране налични в Divi.
Ето преглед на въпросния раздел. Той използва цвета на фона: #92a5ab.
- Фон: #92a5ab
Пример 1 за параметри на фонова маска и трансформация на шаблон
Нашият първи пример ни дава арка, която седи вертикално в центъра на екрана. Едната страна на екрана има шарка на кичури. След това ще създадем алтернативна версия с дъгата, обърната на другата страна.
фонов модел
Отворете настройките на секцията, превъртете надолу до История и изберете раздела Фонов модел. Изберете Tufted за фонов модел и Inverting за Pattern Transform.
- Фонова шарка: Туфтинг
- Трансформация на модел: Обратно
Фонова маска
Изберете раздел Фонова маска и изберете Арка за фоновата маска. Променете цвета на маската на #616d72 и задайте трансформацията на маската на Инвертиране. Това завършва първата ни версия на лъка с кичури.
- Фонова маска: 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. Изберете Flip Vertical за трансформацията на маската.
- Фонова маска: боя
- Цвят на маската: #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 и настройките за трансформиране на шаблони, за да създадете много интересни фонови модели.
Тъй като шаблоните и маските могат да се използват заедно, техните настройки за трансформация също могат да се използват заедно. Това отваря много възможности за дизайн, като ви дава още повечеOUTILS за да добавите елегантност към вашите Divi фонове.
Най-добрият начин да научите как да ги използвате е да си поиграете с корекциите и да видите какво можете да създадете.
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...