Бихте ли искали да използвате маските и шаблоните за вашия раздел Hero в Divi ?
Новите маски и фонови модели на Divi са една от нашите най-готини нови дизайнерски функции досега. Всяка от маските и моделите може да се комбинира с други фонови елементи (като цветове, изображения и градиенти) за безброй уникални комбинации само с няколко кликвания.
Днес ще ви покажем как да използвате Divi и неговите нови маски и модели на фона за проектиране на секция герой.
В този урок ще разгледаме важните стъпки, необходими за създаване на маски и фонови модели.
Дори ще покажем как да позиционирате фонови изображения, за да отговарят на дизайн на маска. Това трябва да ви даде OUTILS трябва да създадете перфектната секция Hero за вашия сайт за минути.
изследване
Ето един бърз поглед върху дизайна, който ще създадем в този урок.
Прочетете още: Divi: Как да създадете адаптивна решетка с изображения с връзки и ефекти при задържане
Примерна секция на герой с бяла маска и шарка.
Ето тъмна версия на същата секция Hero с черна маска и шарка.
С този дизайн можете лесно да променяте маските и позициите на маските само с няколко кликвания!
Създайте нова страница с Divi Builder
От таблото за управление на WordPress отидете на Страници> Добавяне на ново за да създадете нова страница.
Дайте му заглавие, което има смисъл за вас, и щракнете употреба Divi Строител
След това кликнете Започнете да строите (Изграждане от нулата)
След това ще имате празно платно, в което да започнете да проектирате Divi.
Как да използвате маските и фоновите модели на Divi в раздела за вашия герой
1. Създайте структурата на оформлението
За този герой раздел ще използваме класическа структура на оформлението със заглавие и призив за действие отляво и изображение (или визуален дизайн) отдясно.
За този пример нашият визуален дизайн ще бъде създаден с помощта на опциите за фон на Divi. Но преди да стигнем до най-важното, трябва да създадем ред с две колони, за да спестим място от дясната страна на страницата, за да покажем нашите фонови маски на секции и дизайн на шарки.
2. Добавете заглавие и призив за действие
В лявата колона (колона 1) добавете текстов модул за вашето основно заглавие, текстов модул за вашия текст на субтитрите и модул бутон за вашия бутон.
3. Добавете вертикално разстояние към секцията
За да направим нашия фонов дизайн да изглежда висок и красив, трябва да добавим вертикална височина към секцията. Лесен начин да направите това е да добавите подложка в горната и долната част на секцията. Имайте предвид, че трябва да коригираме подложката на екрана на таблета и телефона, за да освободим място за нашия фонов дизайн, след като колоните са подредени вертикално.
Отворете настройките на секцията. В раздела дизайн актуализирайте подложката, както следва:
- Подплата:
- Настолен компютър: Горен 20vw, Долен 20vw
- Таблет: Горен 8vw, Долен 48vw
- Телефон: Горен 8vw, Долен 70vw
4. Добавете фоново изображение и градиент
След това можем да добавим фоново изображение и градиент към секцията. Имайте предвид, че основната фокусна точка на фоновото изображение ще се разкрие от дясната страна на секцията, така че използвайте изображение, което има това, което искате да видите от дясната страна.
За този пример използваме изображение с градски силует. Дясната страна на изображението има по-близки и по-добре изглеждащи сгради, така че работи много добре.
Под раздела Фоново изображение, качете изображението във фона на секцията.
В Divi можете лесно да добавите цветен градиент към фоновото изображение. Под раздела Градиент на фона, добавете следния градиент към фона на секцията:
- Градиентни стопове:
- 0%: #3e22ff
- 100%: Ясно
- Квадратен градиент над фоновото изображение: ДА
5. Създайте фонов шаблон за секцията
Сега, когато имаме готово фоново изображение и градиент, можем да добавим фонов модел, за да завършим дизайна.
В този пример ще използваме фин модел, който просто добавя малко текстура, за да му придаде по-уникален вид.
Под раздела Фон модели, актуализирайте следното:
- Фонова шарка: Туфтинг
ТРИК: При фоновите шарки обикновено е най-добре да са финни. Опитайте да използвате персонализирани размери за по-малки дизайни, след което намалете непрозрачността на цвета.
6. Създайте фонова маска за секцията
С нашия фонов модел на място, най-накрая сме готови да изпробваме чисто нова фонова маска за нашия дизайн. Има куп опции и вариации, от които да избирате. За този пример ще използваме маската с пчелна пита.
Под раздела Фонова маска, актуализирайте следното:
- Маска: пчелна пита
- Цвят на маската: #ffffff
- Размер: Карица
7. Коригирайте позицията на фоновото изображение
Тъй като използваме фонова маска, част от нашето фоново изображение е маскирано (или „маскирано“).
В този пример ще се уверим, че долният десен ъгъл на изображението е най-видим и ще го преместим малко надясно, за да покажем повече сгради.
В раздела Изображение актуализирайте следното:
- Позиция на фоновото изображение: Долу вдясно
- Хоризонтално отместване на фоновото изображение: -4vw
8. Използвайте режим на смесване
Един от начините да станете креативни с всички тези фонови елементи е да добавите режим на смесване. Режимите на смесване могат да се добавят към всяка от опциите за фон и могат да се използват за смесване на множество фонови слоеве (изображение, градиент, маска и т.н.) по творчески начини.
За този пример ще смесим фоновото изображение с цвета на градиента. За да направите това, щракнете върху раздела Фоново изображение и добавете режим на смесване, за да смесите цвета на градиента с фоновото изображение, както следва:
- Смесване на фоново изображение: Умножение
9. Коригирайте фоновата маска за мобилно устройство
Важно е да се гарантира, че дизайнът на фоновата маска изглежда страхотно и на мобилни устройства. За щастие вградените опции улесняват този процес.
Не забравяйте, че вече сме добавили допълнителната подложка на таблета и телефона, за да освободим място за нашия фонов дизайн.
Сега всичко, което трябва да направим, е да използваме опциите за трансформация на фона и пропорциите, за да коригираме маската за мобилно устройство.
Под раздела Фонова маска, активирайте опциите за реагиране и актуализирайте следното:
Версия за таблет
- Трансформация на маска: Обръщане вертикално, Обръщане хоризонтално, Завъртане
- Съотношение на маската: квадрат
Версия за телефон
- Трансформация на маска: Обръщане вертикално, Обръщане хоризонтално, Завъртане
- Съотношение на маската: Портрет
Резултатът
Вижте дизайна, който сме създали досега.
Настолен компютър
Версия на таблет
Издание за телефон
10. Създайте тъмна версия
Ако искате тъмна версия на този дизайн, просто променете цвета на фоновата маска на тъмен цвят (като черен).
След това променете цвета на шаблона на черен.
След това променете заглавието и текста на субтитрите на бяло. Може да искате да актуализирате и цвета на бутона.
Ето как изглежда тъмната версия.
Крайни резултати
Вижте също: Divi: Как да персонализирате връзката „Прочетете повече“ на блог
Ето още един поглед към крайните ни резултати.
Изтеглете DIVI сега!!!
Заключение
Създайте раздел Hero за вашия уеб сайт е много забавно с маски и фонови модели от Divi. Опциите за фон се променят лесно, за да получите перфектния дизайн. Има и много други опции, които можете да използвате (като режими на смесване), за да създадете още по-уникални фонове.
Освен това можете да добавяте маски и шарки към всеки Divi елемент, не само към секции. Така че забавлявайте се да експериментирате!
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...