Искате ли да комбинирате маски и разделители за фон на Divi, за да създадете зашеметяващи и уникални фонове?
Комбинирането на фонови маски с разделители на секции в Divi добавя още един слой креативност към вече мощния арсенал от опции за дизайн на фон.
В допълнение към опциите за фон, разделителите на секции позволяват на потребителите да подобрят дизайна на фона си.
В този урок ще ви покажем как да комбинирате фонови маски с разделители на секции в Divi. Ще ви предоставим стъпка по стъпка инструкции как да създадете фонов дизайн за секция в Divi, използвайки тази техника.
Освен това дори ще обясним как да създавате алтернативни дизайни само с няколко прости настройки.
Да започнем!
изследване
Ето визуализация на чертежите в този урок.
Концепцията
Основната концепция на този урок е да се комбинират фонова маска и разделители на секции, за да се създадат още по-уникални форми на маски.
Първо, добавяме фонова маска.
След това добавяме разделители, за да завършим творчески формата на маската.
Създайте нова страница с Divi Builder
От таблото за управление на WordPress отидете на Страници> Добавяне на ново за да създадете нова страница.
Дайте му заглавие, което има смисъл за вас, и щракнете Използвайте Divi Builder
След това кликнете Започнете да строите (Изграждане от нулата)
След това ще имате празно платно, за да започнете да проектирате в Divi.
Комбиниране на фонови маски и разделители в Divi
Добавете размера и разстоянието между секциите
За начало ще добавим размера и разстоянието към съществуващата секция в конструктора. Ще спрем добавянето на нови редове или съдържание, за да можем да се съсредоточим върху проектирането на фона на секцията.
Отворете настройките на секцията. Под раздела ДизайнАктуализирайте размера и разстоянието, както следва:
- Минимална височина: 50 vw
- Подложка (отгоре и отдолу): 0px
Създайте градиент на фона
След като секцията достигне определена височина, сме готови да добавим градиента на фона към секцията.
Под раздела съдържаниещракнете върху раздела Градиент на фона под опциите за фон. След това добавете градиент, както следва:
- Градиентни стопове
- 20%: #1a2a6c
- 60%: #b21f1f
- 100%: #fdbb2d
Създайте фонова маска
След като вече имаме цветен градиент, сме готови да създадем фонова маска.
Под раздела Фонова маска, актуализирайте следното:
- Маска: рибена кост
- Цвят на маската: #000000
- Трансформация: обърната
- Съотношение на страните на маската: вижте екранната снимка
Добавете разделители на секции (Разделители)
С нашата маска на място можем допълнително да модифицираме формата на маската с помощта на разделители на секции.
В този пример ще добавим полукръгъл разделител на секции отгоре и отдолу. Това ще компресира фоновата маска, за да я направи да изглежда по-скоро като красива стрелка.
За да направите това, щракнете върху раздела Дизайн и добавете следните разделители:
Първо, добавете горен разделител под табулацията Топ.
- Стил на разделителя: Вижте екранната снимка
- Цвят: #000
- Височина на разделителя: 10 vw
След това добавете долен разделител под табулацията дъно.
- Стил на разделителя: Вижте екранната снимка
- Цвят: #000
- Височина на разделителя: 10 vw
- Обръщане на разделител: Вертикално обръщане
Резултатът
Ето резултатите до момента.
Настройте опциите за фон и разделителите за по-стилен дизайн
След като вече имате основната идея, можем лесно да експериментираме с разделителите на секциите, за да създадем още шарки.
Вижте също: Divi: Как да използвате "Gradient Builder", за да разкрасите вашите изображения
Алтернативен дизайн #1
За първия ни алтернативен дизайн ще завъртим съществуващата фонова маска. След това ще заменим полукръглите разделители на секциите с триъгълници.
За да направите това, отворете настройките на съществуващия раздел, щракнете върху раздела Фонова маска и актуализирайте следното:
- Трансформация на маска: вертикално обръщане, завъртане
- Съотношение на страните на маската: вижте екранната снимка
След това актуализирайте разделителите на секции, както следва:
Горен разделител
- Стил на разделителя: Вижте екранната снимка
- Височина на разделителя: 13 vw
Долен разделител
- Стил на разделителя: Вижте екранната снимка
- Височина: 13 vw
- Обръщане на разделител: désactiver
Резултатът
Ето резултата.
Алтернативен дизайн #2
За нашия втори и последен алтернативен дизайн ще сменим маската Елка от маската Диагонални пръти 2 и също така му дайте нов разделител на горната част.
За да направите това, отворете настройките на съществуващия раздел, щракнете върху раздела Фонова маска и актуализирайте следното:
- Маска: Диагонални ленти 2
- Трансформация на маска: хоризонтално обръщане
- Съотношение на страните: вижте екранната снимка
След това актуализирайте разделителите на секции, както следва:
Горен разделител
- Стил на разделителя: Вижте екранната снимка
- Обръщане на разделителя: хоризонтално обръщане
Долен разделител
- Стил на разделителя: Няма
Резултатът
Ето резултата.
Крайни резултати
За да ви дадем по-добра представа как ще изглеждат тези фонове със съдържание, добавихме ред с една колона със заглавие.
Прочетете още: Divi: Как да създадете лепкава фонова маска
Изтеглете DIVI сега!!!
Заключение
Комбинирането на маски и разделители на секции за фонови дизайни отваря повече възможности за създаване на уникални форми за тези вградени маски.
Чувствайте се свободни да изследвате различни комбинации сами.
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове.
Не се колебайте да се консултирате и с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...