Искате ли да проектирате уникален фон с помощта на шаблонни маски? Divi ?
Новите фонови шаблони маски от Divi отвориха много опции за дизайн на фонове. Те работят чудесно с фонови цветове и шарки, за да създадат много уникални дизайни.
В тази статия ще видим как да създадете фини фонови шарки маски с Divi . Ще обсъдим също ползите от използването на фина маска и ще създадем три примера.
Нека да започнем.
Визуализация на маска на фонов модел
Преди да започнем да проектираме, ето преглед на това, което ще изграждаме в този урок Divi.
Пример 1
Прочетете още: Divi: Как да промените градиента на фон при задържане
Пример 2
Пример 3
Как да създадете фонова маска
Фоновата маска ще покрие фоновия шаблон и ще разкрие части от шаблона. Работи много добър с фонови цветове и шарки. Можете да регулирате фона, за да пасне на съдържание, коригирайте съдържание за да пасне на фона или да коригирате и двете.
Вижте също: Divi: Как да използвате "Gradient Builder", за да разкрасите вашите изображения
Първо отворете параметри на раздела където искате да добавите фоновата маска.
След това ще трябва да изберете цвят на фона за секцията. Превъртете до История. С избрания раздел Фон, изберете вашия цвят фон в инструмента за избор на цвят.
След това ще трябва да изберете фонов шаблон и да зададете неговия размер и местоположение. Изберете раздел Фонов шаблон и кликнете върху Добавяне на фонов модел.
Това отваря списък с опции на модела. Изберете своя модел в списъка. Ще завърши раздела.
След това ще трябва да изберете фонова маска и да коригирате нейния цвят и настройки, за да отговарят на вашия дизайн. Изберете раздел Фонова маска и кликнете върху Добавяне на фонова маска.
Друг модал ще се отвори с опции за маска. Изберете своята маска фон в списъка. Маската ще бъде бяла, докато не изберете цвят.
Коригирайте ги настройки на фоновата маска за постигане на желания вид. Можете да промените размера, позицията, посоката на маската, въртенето и т.н. Играта с тези настройки може да ви помогне да създадете интересни дизайни.
Ето преглед на фона, който току-що създадохме без никакви модули. Цветовете са подобни, но са достатъчно различни, за да се открояват малко. Това го предпазва от прекалено разсейване.
Примери за фина маска на фона
Сега нека разгледаме три примера за маска на фонов модел.
Добавяме фонова маска към секцията Hero на безплатна корпоративна целева страница налични в Divi.
Ето визуализация на оригиналната страница, преди да добавите маските на шаблона на фона.
Ще променим и цветовете на фона на бутоните. Използвайки същите фини дизайнерски концепции, ние ще ги направим да се открояват повече, отколкото на заден план.
Разделителят е друг елемент, който ще видим да променя цвета си, но този елемент използва прозрачност, за да получи цвета си от фона, така че няма да е необходимо да променяме цвета му.
Пример 1
Този пример ще използва оригиналните цветове на фона и бутоните.
Цвят на фона
За нашия първи пример използваме оригиналния цвят на фона за това оформление – #1d1d25. Ще запазим и оригиналния цвят на бутона – #4c594c
- Цвят на фона: #1d1d25
- Цвят на бутона: #4c594c
Фонов модел
Изберете раздела Фонов модел и изберете Диагонални ленти 2. Променете цвета на шаблона на #383838.
- Фонов модел: диагонални ивици 2
- Цвят на шаблона: #383838
- Размер: Действителен размер
- Повторете началото: горе вляво
- Повторение на модела: Повторете
Фонова маска
След това изберете раздел BackgroundMask. Избирам Карет и задайте цвета на #383838.
- Маска: Caret
- Цвят на маската: #383838
Под цвета на маската изберете опцията за хоризонтална трансформация и съотношение портрет. Затворете настройките на секцията и запазете работата си.
- Трансформация на маска: хоризонтално
- Съотношение на маската: голямо (портрет)
Пример 2
За нашия втори пример ще променим цветовете на фона и бутоните на лилаво.
Цвят на фона
Отворете ги параметри на раздела . уверете се че ти са в раздела Цвят на фона и го смени Цвят в #483c56.
- Фон: #483c56
Фонов модел
След това изберете раздел Десен на гърба фон и изберете Tufted за шаблон на фона. Променете цвета на шаблона на #635c84.
- Фонова шарка: Туфтинг
- Цвят на шаблона: #635c84
След това изберете персонализиран размер . Това отваря друг набор от опции. Променете го широчина в 10vw.
- Размер на модела: Персонализиран размер
- Ширина на модела: 10vw
- Повторение на произхода: горе вляво
- Повторение на модела: Повторете
Фонова маска
Сега е време да конфигурираме нашата фонова маска.
Изберете раздел Фонова маска и изберете маската с име Arch. Променете цвета му на #67557a.
- Маска: Арх
- Цвят на маската: #67557a
След това задайте опциите му трансформация по хоризонтала, вертикала и ротация. За съотношение, изберете широка или пейзажна опция. Затворете настройките на секцията.
- Трансформация на маска: хоризонтална, вертикална и ротация
- Съотношение на маската: широк (пейзаж)
бутон
И накрая, нека коригираме бутона CTA в този раздел Hero. Искаме да се слее с дизайна, но също така искаме да се откроява.
Отворете ги настройки на бутоните. Ще трябва само да променим цвета на фона. Може да бъде подобен на цвета на фона, но достатъчно различен, за да не се изгуби на страницата. Ще изберем по-ярък цвят за фон. Ще оставим същия цвят на текста.
Изберете раздела Дизайн , превъртете до История и модифицирайте Цвят на фона на бутона в #8b4dc1. Дава ни желания контраст и работи чудесно с лилав фон. Затворете настройките на бутона и запазете страницата си.
- Фон на бутона: #8b4dc1
Пример 3
За нашия трети пример ще променим цветовете на фона и бутоните на зелени, като използваме същите концепции като в предишните два примера.
Цвят на фона
Първо отворете параметри на раздела . С табл Цвят на фона.
- Фон: #497762
Фонов модел
След това изберете раздела Фонов шаблони променете следващите параметри на сумата.
- Фонов модел: Квадратчета
- Цвят на шаблона: #3a604e
- Размер: Действителен размер
- Начало на повторение на шаблона: горе вляво
- Повторение на модела: Повторете
Фонова маска
След това изберете раздела BackgroundMask.
- Маска: диагонални линии
- Цвят: #3a604e
След това задайте следните параметри:
- Трансформация на маска: хоризонтално
- Съотношение на маската: пейзаж
- Размер: Карица
- Позиция на маската: Горен център
бутон
Накрая отворете настройки на бутоните и изберете раздела Дизайн. Превъртете надолу и променете цвят на фона на бутона в #61a380. Затворете настройките на модула и запазете работата си.
- Фон на бутона: #61a380
Крайни резултати
Вижте също: Divi: Как да персонализирате кошницата и иконите за търсене на модула „Меню с пълна ширина“
Ето как изглеждат маските ни с шаблони на фона в раздела за герои на нашето оформление.
Пример 1
Пример 2
Пример 3
Изтеглете DIVI сега!!!
Заключение
Това е нашият поглед към това как да създадете фини фонови шаблони с Divi. Една фина маска се откроява достатъчно, за да придаде визуална текстура на фона. Те изглеждат страхотно, без да отвличат вниманието от вашите CTA и други елементи.
Фоновите шарки на Divi са лесни за използване и техните настройки ви позволяват да създадете нещо уникално. Експериментирайте с настройките, за да създадете свои собствени маски за шаблони на фона.
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...