Искате ли да създадете уникални фонови изображения, като използвате режима на смесване на шаблони на Divi ?
Вградените настройки за фонов модел на Divi ви позволяват да създавате привлекателни дизайни и да добавяте стил към фоновите изображения на вашия уеб сайт. Можете да използвате настройките на режима на смесване, за да настроите фино как шаблонът се смесва с фоновото изображение.
В този урок ще ви покажем някои примери за това как да добавите режим на смесване на шарки към фоновите изображения на вашата страница. Следвайте ги, за да пресъздадете тези визии сами или ги използвайте като вдъхновение, за да създадете свои собствени персонализирани дизайни.
Нека да започнем!
изследване
Ето предварителен преглед на това, което ще проектираме в този урок.
Първо оформление
Второ оформление
Трето оформление
Как да използвате режими на смесване на шаблони на вашите Divi фонови изображения
Създайте нова страница с предварително дефинирано оформление
Ще започнем с използване на предварително дефинирано оформление от библиотеката Divi. За този дизайн ще използваме « Целева страница на Марина "на Пакет за оформление на Марина .
Добавете нова страница към вашата уеб сайт и му дайте заглавие, след което изберете опцията Използване на Divi Builder.
Ще използваме предварително направено оформление от Divi Library за този пример, така че изберете Преглед на оформления.
Намерете и изберете оформлението Целева страница на Марина.
Изберете Използвайте това оформление за да добавите оформлението към вашата страница.
Вече сме готови за проектиране.
Първо оформление
За нашия първи дизайн ще добавим шаблон на шеврон към първото заглавно изображение. Това ще добави визуален интерес към заглавката.
Прочетете още: Divi: Как да персонализирате модула „Таймер за обратно отброяване“ с GIF
Благодарение на режима на смесване, който ще приложим, моделът ще бъде по-фин и ще позволи фоновото изображение да бъде видимо.
Първо отворете настройките на секцията и отидете на секцията История. Кликнете върху раздела Фонов шаблон и изберете Добавяне на фонов модел.
След това изберете типа модел. Както можете да видите, има много различни шаблони за избор и всички те могат да бъдат допълнително персонализирани чрез настройките на шаблона по-долу.
- Тип шарка: обърната рибена кост 2
Добавен режим „Смесване на шаблони“.
Накрая задайте режима на смесване на шаблона. Ще използваме режим на смесване Мека светлина за този пример. Този режим на смесване прави шаблона по-фин, така че да не отвлича вниманието от фоновото изображение.
- Режим на смесване на шаблони: Мека светлина
резултат
Ето окончателния дизайн на нашия първи пример.
Ето и мобилната версия.
Второ оформление
За второто оформление ще използваме вълнообразен модел, насложен върху фоновото изображение и градиента, който върви добре с морската тема на страницата.
Първо отидете до секцията "Как работи" и отворете настройките на секцията.
Отворете настройките История, след това изберете раздела Фонов шаблон, след което щракнете върху Добавяне на фонов модел.
За този дизайн ще използваме тип модел Вълни.
- Тип модел: Вълни
След това променете цвета на шаблона на бял.
- Цвят на шаблона: #FFFFFF
Добавен режим на смесване на шаблони
Сега можем да добавим режима на смесване към нашия модел. Задайте режима на смесване на шаблони на Подложка.
Открийте също: Divi: Как да персонализирате кошницата и иконите за търсене на модула „Меню с пълна ширина“
Този режим на смесване потъмнява тъмните цветове във фоновото изображение и изсветлява светлите цветове.
- Режим на смесване на шаблони: наслагване
резултат
Ето крайния резултат от втория пример, приложен към секцията "Как работи".
А ето и мобилната версия.
Трето оформление
Нека започнем третото си оформление.
За това оформление ще добавим непрозрачни диагонални ивици към фона на " Призив за действие".
Започнете, като отворите настройките на раздела и отидете на раздела История. Кликнете върху раздела Фонов шаблон, след това изберете Добавяне на фонов шаблон.
Изберете модел Диагонални ивици.
След това задайте цвета на шаблона.
- Цвят на шаблона: rgba(255,255,255,0.25)
Обърнете шаблона хоризонтално, като използвате настройките на Transform Pattern. Това е друг параметър, който може да ви помогне да прецизирате модела според вашите предпочитания.
- Трансформация на модела: хоризонтална
Добавен режим на смесване на шаблони
Накрая задайте режима на смесване на шаблона. За този дизайн ще използваме режима на смесване сияйност.
Прочетете и нашето ръководство на: Divi: Как да използвате "Gradient Builder", за да разкрасите вашите изображения
Това, комбинирано с нашия цвят на модела, добавя ярък екран към изображението, като същевременно позволява на снимката да се вижда. С този дизайн изображението на лодката се откроява повече от фона, тъй като шарката добавя отличителен контраст.
- Режим на смесване на шаблони: Яркост
резултат
Ето окончателния дизайн за този раздел.
А ето и мобилната му версия.
Краен резултат
Сега нека да разгледаме дизайна на цялата страница с режими на смесване на шарки.
Изтеглете DIVI сега!!!
Заключение
Добавянето на шаблон може да бъде чудесен начин да добавите визуален интерес към вашето фоново изображение, но понякога шаблонът може да надделее над фоновото изображение. За щастие, Divi идва с много режими на смесване, така че можете да персонализирате моделите колкото искате.
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове.
Не се колебайте да се консултирате и с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...