Divi: 5 наслагвания на маски и модели, приложими към фоново изображение

Искате ли да използвате наслагването на маска и фонов шаблон на Divi?

С последното версия на фонова маска и функция за фонов модел на Divi, можете да създадете уникални секции Hero за вашите уеб сайт. Разделът за герои е първият раздел от вашия уеб сайт и това е първото ти нещо посетители вижте, преди да превъртите вашия уеб сайт, така че е важно да привличате вниманието!

Тази статия ще ви покаже как да създадете пет уникални фонови маски и наслагвания на шаблони, които можете да приложите към фоново изображение, за да създадете наистина зашеметяващи геройски секции. 

Този урок ще обхване основните стъпки, необходими за създаване на всеки Hero раздел и ще ви даде инструментите, от които се нуждаете, за да създадете впечатляващ Hero раздел за вашия уебсайт за минути.

Да започнем!

изследване

Ето кратък преглед на петте геройски секции, които ще създадем в тази статия днес.

Изтеглете DIVI сега!!!

Дизайните са фини, прости и същевременно въздействащи.

Прочетете още: Divi: Как да използвате "Gradient Builder", за да разкрасите вашите изображения

Създайте нова страница с Divi Builder

За да започнете, ще трябва да направите следното:

От таблото за управление на WordPress отидете на Страници> Добавяне на ново за да създадете нова страница.

Дайте му заглавие, което има смисъл за вас, и щракнете Използвайте Divi Builder

След това кликнете Започнете да строите (Изграждане от нулата)

След това ще имате празно платно, за да започнете да проектирате в Divi.

Пет примера за наслагвания на фонова маска и шарки, които да се приложат към фоново изображение

Първо, нека създадем секцията Hero

Всички наши примерни проекти използват една и съща структура на секция, ред и колона, така че нека ги настроим сега.

1. Създайте структура на оформлението

Добавете ред към страницата си, след което щракнете върху зелената икона „+“, за да покажете структурата на колоните и изберете първата колона, колоната с пълна ширина.

2. Добавете Разстояние между разделите

Сега, след като дефинирахме нашия ред и колона, е време да добавим малко разстояние към секцията.

В раздела Разстояние актуализирайте следното:

• Работен плот: 400 пиксела (отгоре и отдолу)
• Таблет: 200 пиксела (отгоре и отдолу); 25px (ляво и дясно)
• Телефон: 50 пиксела (отгоре и отдолу); 25px (ляво и дясно)

Дизайн на геройска секция #1

Нека проектираме първия раздел Hero.

Изтеглете DIVI сега!!!

1. Добавете заглавен текст

Кликнете върху сивата икона „+“, за да изведете библиотеката на модула. Превъртете до текста и щракнете за зареждане.

Въведете текста на заглавието, след това под раздела Текст на заглавието, конфигурирайте тези настройки:

• Шрифт на заглавието: Work Sans
• Цвят на текста: бял #ffffff
• Размер на текста на заглавието:
  • Работен плот: 3 ем
  • Таблет: 2,2 em
  • Телефон: 1.4ем

2. Добавяне на модул с бутони

Добавете бутон и конфигурирайте тези настройки:

• Под раздела Съдържание наs: Научете повече
• Под раздела Подравняване, изберете: Център
• Кликнете върху Използвайте персонализирани стилове за бутон след това конфигурирайте:
  • Размер на текста на бутона:
    • Работен плот: 20px
    • Таблет: 16px
    • Телефон: 14px
  • Цвят на текста на бутона: #ffffff
  • Фон: #1d1d1d
  • Ширина на рамката на бутона: 0
  • Радиус на границата: 0
  • Разстояние между буквите: 3 точки
  • Шрифт на бутона: Work Sans
  • Стил на шрифта: TT

3. Добавете фоново изображение

Сега, когато нашите съдържание е конфигуриран, време е да започнете да проектирате фона на секцията.

• Отидете до превключвателя на фона и щракнете върху 3-тия раздел, раздела за изображение, след което щракнете върху „Добавяне на фоново изображение“.
• Това ще покаже вашата медийна библиотека, където можете да изберете снимка или да качите нова.
• След като изберете снимката си, щракнете върху бутона „Качване на изображение“ в долния десен ъгъл.

4. Добавете фонов модел

Сега, след като настроихме нашето фоново изображение, нека добавим модел.

• В раздела История, отидете до 5-ия раздел, раздела Фонов шаблон, след което щракнете върху „Добавяне на фонов модел“.
• Изберете качулат от падащото меню и конфигурирайте тези настройки:
  • Цвят на модела – rgba(255,255,255,0.31)
  • Трансформация на шаблон: няма
  • Размер: Действителен размер
  • Произход на повторение на шаблона: отгоре отдолу
  • Повторение на модела: Повторете
  • Режим на смесване: нормален

5. Добавете фонова маска

Сега, след като настроихме нашето фоново изображение и модел, нека добавим фонова маска.

• В раздела История, отидете до 6-ия раздел, раздела Фонова маска, след което щракнете върху „Добавяне на фонова маска“.
• Изберете Боб от падащото меню и конфигурирайте тези настройки:
  • Цвят на маската: rgba(0,0,0,0.36)
  • Съотношение на маската: хоризонтален правоъгълник
  • Размер: Разтягане за запълване

Така ! Вече имате красиво проектирана секция за герои.

Дизайн на Section Hero #2

Сега нека проектираме втория герой раздел.

1. Добавете фоново изображение и задайте режима на смесване на Overlay

Изберете вашето фоново изображение, задайте режима на смесване на Overlay и добавете цвят на наслагване на rgba (10,10,10,0.64).

2. Добавете фонов модел

Сега, след като настроихме фоновото изображение, нека добавим фонов модел.

• В раздела Фон отидете на 5-ия раздел, раздела Фонов шаблон, след което щракнете върху „Добавяне на фонов модел“.
• Изберете качулат от падащото меню и конфигурирайте тези настройки:
  • Цвят на модела – rgba(255,255,255,0.09)
  • Трансформация на шаблон: няма
  • Размер: Карица
  • Начало на повторение на шаблона: горе вляво
  • Повторение на модела: Повторете
  • Режим на смесване: нормален

3. Добавете фонова маска

Сега, след като настроихме нашето фоново изображение и модел, нека добавим фонова маска.

• В раздела История, отидете до 6-ия раздел, раздела Фонова маска, след което щракнете върху „Добавяне на фонова маска“.
• Изберете Карет от падащото меню и конфигурирайте тези настройки:
  • Цвят на маската: rgba(0,0,0,0.36)
  • Трансформация на маска: Няма
  • Съотношение: хоризонтален правоъгълник
  • Размер на маската: Разтягане за запълване
  • Режим на смесване на маската: нормален

Дизайн на Section Hero #3

Сега нека проектираме третия раздел Hero.

1. Добавете фоново изображение и задайте режима на смесване на Overlay

Изберете вашето фоново изображение, задайте режима на смесване на Overlay и добавете цвят на наслагване на rgba (10,10,10,0.39).

2. Добавете фонов модел

Сега, след като настроихме нашето фоново изображение, нека добавим фонов модел.

• В раздела История, отидете до 5-ия раздел, раздела Фонов шаблон, след което щракнете върху „Добавяне на фонов модел“.
• Изберете Диагонални ленти 2 от падащото меню и конфигурирайте тези настройки:
  • Цвят на модела – rgba(0,0,0,0.06)
  • Трансформация на шаблон: няма
  • Размер: Действителен размер
  • Начало на повторение на шаблона: горе вляво
  • Повторение на модела: Повторете
  • Режим на смесване: нормален

3. Добавете фонова маска

След като добавихме фоново изображение и шарка, нека добавим фонова маска.

• В раздела История, отидете до 6-ия раздел, раздела Фонова маска, след което щракнете върху „Добавяне на фонова маска“.
• Изберете Триъгълници от падащото меню и конфигурирайте тези настройки:
  • Цвят на маската: rgba(10, 10, 10, 0,61)
  • Трансформация на маска: няма
  • Съотношение: хоризонтален правоъгълник
  • Размер на маската: Разтягане за запълване
  • Режим на смесване на маската: нормален

Дизайн на Section Hero #4

Сега нека проектираме четвъртия раздел на Hero.

1. Добавете фоново изображение

Изберете вашето фоново изображение.

2. Добавете фонов модел

След като добавихме нашето фоново изображение, нека добавим фонов модел.

• В раздела История, отидете до 5-ия раздел, раздела Фонов шаблон, след което щракнете върху „Добавяне на фонов модел“.
• Изберете Усмивки от падащото меню и конфигурирайте тези настройки:
  • Цвят на модела – rgba(0,0,0,0.2)
  • Трансформация на шаблон: няма
  • Размер: Карица
  • Повторение на произхода: горе вляво
  • Повторение на модела: Повторете
  • Режим на смесване на шаблони: нормален

3. Добавете фонова маска

След като вече сме приложили нашето фоново изображение и модел, нека добавим фонова маска.

• В раздела История, отидете до 6-ия раздел, раздела Фонова маска, след което щракнете върху „Добавяне на фонова маска“.
• Изберете Ъглово езеро  от падащото меню и конфигурирайте тези настройки:
  • Цвят на маската: rgba(10, 10, 10, 0,61)
  • Трансформация на маската: хоризонтална
  • Съотношение: Хоризонтален правоъгълник
  • Размер: Карица
  • Позиция на маската: център вляво
  • Режим на смесване на маски: нормален

3. Конфигурирайте параметрите на линията

Преди да тръгнем, този раздел Hero има уникални стилове на линии. Нека да настроим това.

• Размер:
  • Ширина: 80%
  • Максимална ширина: 800px
• Подравняване на редове:
  • Работен плот: По подразбиране
  • Таблет: Център
  • Телефон: Център
• Полета:
  • Ляво: 20vw

Раздел Hero #5 Дизайн

Сега нека проектираме петия раздел Hero.

Изтеглете DIVI сега!!!

1. Добавете фоново изображение

Изберете вашето фоново изображение.

2. Добавяне на модел

Сега, след като настроихме нашето фоново изображение, нека приложим фонов модел.

• В раздела История, отидете до 5-ия раздел, раздела Фонов шаблон, след което щракнете върху „Добавяне на фонов модел“.
• Изберете Кръстове от падащото меню и конфигурирайте тези настройки:
  • Цвят на модела – #ffffff
  • Трансформация на шаблон: няма
  • Размер: Персонализиран размер
  • Ширина на модела: 10px
  • Височина на модела: 10px
  • Повторение на произхода: отгоре отдолу
  • Повторение на модела: Повторете
  • Режим на смесване на шаблони: нормален

3. Добавете фонова маска

Сега, след като имаме приложено фоново изображение и модел, нека добавим фонова маска.

• В раздела История, отидете до 6-ия раздел, раздела Фонова маска, след което щракнете върху „Добавяне на фонова маска“.
• Изберете Диагонални хапчета  от падащото меню и конфигурирайте тези настройки:
  • Цвят на маската: rgba(10, 10, 10, 0,61)
  • Трансформация на маската: хоризонтална
  • Съотношение: Хоризонтален правоъгълник
  • Размер: Карица
  • Позиция на маската: център вляво
  • Режим на смесване на маската: нормален

3. Конфигурирайте параметрите на линията

Преди да тръгнем, този раздел Hero също има уникални стилове на линии. Нека да настроим това.

• Размер:
  • Ширина: 80%
  • Максимална ширина: 800px
• Подравняване на редове:
  • Работен плот: По подразбиране
  • Таблет: Център
  • Телефон: Център
• Разстояние:
  • Марж (вдясно): 18vw

Вижте също: Divi: Как да добавите маски и фонови модели към заглавка

Заключение

Проектирането на уникален и привличащ вниманието Hero раздел за вашия уебсайт е лесно с новите опции фон и шаблонна маска от Divi. Всяка функция има много опции, които ви позволяват да създавате наистина креативни фонове. 

Освен това можете да добавяте фонови модели и маски към всеки елемент на Divi Builder! Вариантите за дизайн са безкрайни.

Надяваме се, че тази техника ще добави още едно полезно дизайнерско умение за бъдещи проекти.

Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.

Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове.

Не се колебайте да се консултирате и с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.

Но междувременно, споделете тази статия във вашите различни социални мрежи.

...