Искате ли да създадете уникален и зашеметяващ фон с маски и фонови шарки от Divi ?
Новата функция за фонови маски и модели на Divi се използва най-често за секции от страница. Но можем също да ги добавим към заглавки!
В този урок ще ви покажем как да добавяте маски и фонови модели към шаблон на заглавка Divi с помощта на конструктора теми.
Това е чудесен начин да създадете напълно уникален дизайн на заглавки за вашите уеб сайт.
Нека да започнем.
изследване
Ето един бърз поглед върху дизайна, който ще създадем в този урок.
Отидете до създателя на теми на Divi и започнете да създавате глобална заглавка
От таблото за управление на WordPress отидете на Divi > Създател на теми
Кликнете върху „Добавяне на глобален колонтитул“
Изберете „Изграждане на глобална горна част“.
След това можете да започнете да проектирате нов хедър с помощта на Divi Builder.
Как да добавите фонови маски и шарки към Divi заглавка
Създаване на фон на секцията с фонов цвят и модел
Прочетете още: Divi: Как да създадете раздел Препоръки под формата на мрежа
За да започнете, отворете настройките на съществуващия раздел.
Под раздела съдържание, актуализирайте опциите за фон със следните настройки:
Цвят на фона:
- Фон: #262d3f
Фонов модел:
- Модел: Хапчета
- Цвят на шаблона: rgba(255,255,255,0.1)
- Размер на модела: персонализиран размер.
- Ширина на модела: 1px
Подложка
Под раздела Дизайн, актуализирайте подложката на секцията, както следва:
- Подложка (отгоре и отдолу): 0px
Това ще намали малко вертикалното пространство на заглавката.
Добавете ред със следното оформление на колони
Добавено съдържание на заглавката на контейнера (меню и бутон)
В лявата колона на реда добавете ново меню.
Изберете меню.
След това добавете лого и използвайте настройките, за да персонализирате менюто и логото по желание.
В дясната колона добавете модул с бутони и го персонализирайте по ваш вкус.
Създаване на линейния фон с градиент, маска и шаблон
Градиентът
Отворете настройките на реда, съдържащ вашето меню и бутон. След това актуализирайте опциите за фон със следните настройки за фон:
Фонов градиент:
- Градиентни ограничители 1 (50%): Ясно
- Градиентни стопове 2 (75%): #ff4c00
- Управление: 90 градуса
Модел
- Модел: Хапчета
- Цвят на шаблона: rgba(38,45,63,0.48)
- Размер на модела: 1 пиксел
- Вертикално отместване: 20px
Забележка: Вертикалното отместване на шаблона е зададено на 20px, защото има 20px горна подложка в секцията над линията. Това гарантира, че шаблонът на сечението е подравнен с шаблона на реда.
Фонова маска
- Маска: рибена кост
- Цвят на маската: #262d3f
ЗАБЕЛЕЖКА: За заглавки е най-добре да запазите размера на маската на „Разшири до запълване“, така че да покрива хоризонталното пространство, без да компрометира дизайна на маската.
Последни щрихи на линията
Вижте също: Divi: Как да използвате "Gradient Builder", за да разкрасите вашите изображения
За да завършим дизайна, ще добавим радиус на границата и още няколко редакции на линията.
Радиусът, границата и разстоянието между границите
Под раздела Дизайн, актуализирайте подложката, както следва:
- Подложка (отгоре и отдолу): 5px
След това дайте на реда хубав заоблен ъгъл за допълнителен дизайнерски елемент.
- Заоблени ъгли: 50px
- Ширина на лявата граница: 50px
- Цвят на лявата граница: #262d3f
Трябва да дадем граница на лявата страна на реда, защото квадратният ръб на маската ще излезе извън реда въпреки заоблените ъгли.
Краен резултат
Нека видим крайния резултат.
Градиентът е малко фин, така че ето вижте как изглежда.
А ето и дизайна на хедъра за десктоп и мобилно устройство.
Изтеглете DIVI сега!!!
Заключение
Дизайнът на фона на заглавката е само върхът на айсберга. Има много неща за проучване с опциите за фон, налични в Divi.
Надяваме се, че този урок ви е помогнал да разберете как фоновите маски и шаблони на Divi могат да работят заедно, за да създадат уникален фонов дизайн за вашите заглавки.
Чувствайте се свободни да експериментирате с повече комбинации от фонов дизайн, за да паснете на вашия собствен дизайн. уеб сайт или вашия предстоящ проект.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове.
Не се колебайте да се консултирате и с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...