Що се отнася до фоновите маски, потребителите са склонни да използват софтуер за редактиране на изображения извън Divi и след това да качват изображението в... уеб сайт които създават. Въпреки че е доста удобен начин да персонализирате своя уеб сайт, това не е непременно единственото решение. Можете също да създавате фонови маски в Divi, комбинирайки различни дизайнерски елементи и опции за филтриране по креативни начини. Точно това ще направим в тази публикация! Превръщаме големи символи във фонови маски, които изглеждат страхотно на екран с всякакъв размер. Надяваме се, че този урок ще ви вдъхнови да създадете свои собствени дизайни, използвайки големи шрифтове и вградените опции на Divi.
Да вървим!
Предварителен преглед
Преди да се потопим в урока, ето видовете фонове, които можете да постигнете с тази техника.
Концепция
Ще започнем дизайна, като създадем черен фон с буква, която има изображение като фон.
Добавете нов раздел
Цвят на фона
Да започнем с първия пример! Добавете нов редовен раздел към нова или съществуваща страница и добавете фон към този раздел:
- Цвят на фона: #000000
разстояние
След това отидете на настройките за интервали и премахнете всички подложки по подразбиране отгоре и отдолу.
- Най-висока подложка: 0px
- Подложка отдолу: 0px
преливник
Превключете към раздела Разширени и скрийте преливанията на секциите. Това ще стане важно по-късно в този урок, когато преместваме текстовия модул, съдържащ знака за голям размер.
- Хоризонтално преливане: скрито
- Вертикално преливане: скрито
Добавете ред 1
Структура на колоната
Продължете да добавяте нов ред, като използвате следната структура на колоната:
Колона 1 Цвят на фона
Без още да добавяте модули, отворете настройките на реда и добавете цвят на фона към първата колона.
- Колона 1 Цвят на фона: #848484
1 колона Фоново изображение
Добавете и цвят на фона. За да комбинираме цвета на фона и изображението, ще приложим режим на смесване.
- Смесване на фоновото изображение на колона: Умножение
оразмеряване
Преминете към раздела Дизайн и оставете реда да запълни цялата ширина на екрана, като приложите следните настройки за оразмеряване:
- Използвайте персонализирана ширина на улука: Да
- Ширина на улука: 1
- Ширина: 100%
- Максимална ширина: 100%
разстояние
Също така се отърваме от всички обичайни подплънки нагоре и надолу в редицата.
- Най-висока подложка: 0px
- Подложка отдолу: 0px
Добавете текстов модул към колона
Добавете знак в областта на съдържанието
Време е да добавите текстовия модул, съдържащ голям знак. Добавете буквата „o“ към полето съдържание.
Цвят на фона
Продължете, като влезете в настройките на фона и добавите черен цвят на фона.
- Цвят на фона: #000000
Текстови настройки
Отидете в раздела Дизайн и променете настройките на текста. Забележете как използваме висока стойност за размера на текста.
- Текст Шрифт: Poppins
- Размер на текста: 100vw
- Ориентация на текста: Център
разстояние
След това отидете в настройките за интервали и добавете персонализирани стойности на полета и подложки.
- Горна граница: -6vw
- Най-добра подложка: 15vw
- Подложка отдолу: 49vw
Филтрите
Време е да направите магия! Достъп до настройките на филтъра на модула и съответно променете режима на сливане:
- Режим на смесване: Умножете
- Яркост: можете да промените тази стойност по ваш вкус
Добавете линията 2
Структура на колоната
След като вашият голям размер е добавен към дизайна, можете да продължите, като добавите останалите модули, които искате да покажете в секцията, за предпочитане чрез добавяне на нов ред:
оразмеряване
Без още да добавяте модули, отворете настройките на реда и го оставете да запълни цялата ширина на екрана.
- Използвайте персонализирана ширина на улука: Да
- Ширина на улука: 1
- Ширина: 100%
- Максимална ширина: 100%
разстояние
Също така премахнете всички подложки по подразбиране нагоре и надолу
- Най-висока подложка: 0px
- Подложка отдолу: 0px
Добавете текстов модул # 1 в колоната
Добавете H1 съдържание
В този нов ред можете да добавите модулите по ваш избор. За да пресъздадете точния пример, споделен във визуализацията на тази публикация, започнете с добавяне на текстов модул, съдържащ съдържание Н1.
Настройки за текст на H1
Преминете към раздела Дизайн и променете настройките на текста H1.
- Шрифт на заглавието: Playfair Display
- Тегло на шрифта: Удебелен
- Подравняване на текста на заглавието: Център
- Цвят на заглавието: #ffffff
- Размер на заглавието на текста: 6vw
разстояние
Продължете, като отидете в настройките за разстоянието и оставете текстовия модул да припокрива извънгабаритния знак, като добавите отрицателно горно поле. Ние също така се уверяваме, че има място отляво и отдясно на модула, за да гарантираме отзивчивост.
- Горна граница: -47vw
- Ляв поле: 1vw
- Дясно поле: 1vw
Добавете модул за разделяне в колоната
видимост
Следващият модул, от който се нуждаем, е модул за разделяне. Уверете се, че опцията „Показване на разделител“ е активирана.
- Покажи разделител: Да
Цвят
Отидете в раздела за проектиране след това и променете цвета на разделителя.
- Цвят: #ffffff
оразмеряване
Също така променете параметрите на оразмеряване.
- Тегло на делителя: 13px
- Ширина: 16%
- Подравняване на модула: център
разстояние
Освен това добавете горен марж, за да създадете интервал между текстовия модул и модула за разделяне.
- Горна граница: 16vw
Добавете текстов модул # 2 в колоната
Добавете съдържание
Следващият модул, от който се нуждаем, е текстов модул с a съдържание на параграф.
Текстови настройки
Достъп до текстовите настройки и направете следните промени:
- Текст Шрифт: Отворен без
- Цвят на текста: #ffffff
- Размер на текста: 1vw (десктоп), 2vw (таблет), 2.5vw (телефон)
- Височина на реда на текста: 1.9em
- Ориентация на текста: Център
разстояние
Също така добавете персонализирани стойности на разстоянието.
- Горна граница: 3vw
- Долен марж: 3vw (настолен компютър), 10vw (таблет и телефон)
- Ляв марж: 27vw (десктоп), 10vw (таблет), 8vw (телефон)
- Десен марж: 27vw (десктоп), 10vw (таблет), 8vw (телефон)
Добавете модул с бутони към колоната
Добавете копие
На следващия и последния модул, който е модул с бутони. Въведете копие по ваш избор.
подравняване
Продължете, като промените подравняването на бутоните в раздела Дизайн.
- Подравняване на бутоните: център
Настройки на бутона
Превключете към настройките на бутона и персонализирайте бутона по желание.
- Използвайте персонализирани стилове за бутона: Да
- Размер на текста на бутона: 1vw (десктоп), 2.5vw (таблет), 3vw (телефон)
- Цвят на бутона на бутона: #ffffff
- Ширина на границата на бутона: 1px
- Радиус на границата на бутона: 0px
- Шрифт на бутоните: Отворени без
- Тегло на шрифта: Ultra Bold
- Стил на шрифта: главни букви
разстояние
И накрая, ние също добавяме персонализирани стойности на маржа и попълване, за да получите желания резултат.
- Долен марж: 10vw
- Подложка: 15px
- Подложка отдолу: 15px
- Лявата подложка: 50px
- Тапицерия отдясно: 50px
Краен резултат
Ето това изглежда като това, което сме изградили досега.
Заключителни мисли
В тази статия ви показахме как да използвате извънгабаритни символи, за да създадете страхотни фонови маски с Divi. Това е чудесен начин да създадете персонализиран уеб дизайн, без да се налага да използвате софтуер за редактиране на изображения. Ако имате някакви въпроси или предложения, не забравяйте да оставите коментар в раздела за коментари по-долу!
