Искате ли да използвате маски и шаблони за вашата секция „Герой“ в Divi?
Новите маски и фонови шарки на Divi Това са едни от най-вълнуващите нови дизайнерски функции до момента. Всяка маска и шарка могат да се комбинират с други фонови елементи (като цветове, изображения и градиенти) за безброй уникални комбинации само с няколко кликвания.
Днес ще ви покажем как да използвате Divi и новите му маски и фонови шарки за проектиране на секция за герои.
В този урок ще разгледаме важните стъпки, необходими за създаване на фонови маски и шарки.
Дори ще ви покажем как да позиционирате фоновите изображения, за да паснат на дизайна на маска. Това би трябвало да ви даде инструментите, от които се нуждаете, за да създадете перфектната секция Hero за вашия сайт за минути.
изследване
Ето един бърз поглед върху дизайна, който ще създадем в този урок.
Прочетете още: Divi: Как да създадете адаптивна решетка с изображения с връзки и ефекти при задържане
Примерна секция на герой с бяла маска и шарка.
Ето тъмна версия на същата секция Hero с черна маска и шарка.
С този дизайн можете лесно да променяте маските и позициите на маските само с няколко кликвания!
Създайте нова страница с Divi Builder
От таблото за управление на WordPress отидете на Страници> Добавяне на ново за да създадете нова страница.
Дайте му заглавие, което има смисъл за вас, и щракнете Използвайте Divi Builder
След това кликнете Започнете да строите (Изграждане от нулата)
След това ще имате празно платно, за да започнете да проектирате в 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 за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...