Искате ли да създадете фонови преходи между елементите Divi ?
Създавайте безпроблемни преходи на фоновия дизайн между елементите Divi е чудесен начин да подобрите дизайна на вашия уеб сайт Divi.
Това ви позволява безпроблемно да прехвърляте градиент, шарка и фонова маска между линия и секция по творчески начин.
Например, можете да имате шарка или преход на маска в различни цветове, без да губите цялостното подравняване и симетричен вид на дизайна.
В този урок ще използваме вградените опции за дизайн на фона на Divi, за да създадем безпроблемен преход на дизайна на фона между Divi раздел и линия. Приложението и гъвкавостта на този дизайн са неограничени, извеждайки опциите за дизайн на фона на Divi на съвсем ново ниво!
Нека да започнем.
изследване
Ето един бърз поглед върху дизайна, който ще изградим в този урок.
Ето някои други примерни дизайни, които са възможни само с няколко прости промени в маските и фоновите модели.
Създайте нова страница с Divi Builder
За да започнете, ще трябва да направите следното:
От таблото за управление на WordPress отидете на Страници> Добавяне на ново за да създадете нова страница.
Дайте му заглавие, което има смисъл за вас, и щракнете Използвайте Divi Builder
След това кликнете Започнете да строите (Изграждане от нулата)
След това ще имате празно платно, за да започнете да проектирате в Divi.
Създаване на плавен преход във фонов режим между раздел Divi и линия
Създаване на заглавка като заместващо съдържание
Прочетете още: Divi: Как да създадете раздели с ефект на задържане от линии
Преди да влезем, трябва да добавим заглавка като съдържание фиктивен. За да започнете, добавете ред с една колона към секцията по подразбиране на страницата.
След това добавете текстов модул към реда.
Добавете текст с размер H1.
Под раздела Дизайн, актуализирайте дизайна на заглавния текст по желание.
- Шрифт: Roboto Condensed
- Тегло на шрифта: получер
- Стил: TT
- Подравняване на текст: центрирано
- Цвят на текста: #000000
- Размер на заглавния текст: 4vw
- Разстояние между буквите: 0.1em
- Височина на линията: 1.3em
Дизайн на фона на раздела
Добавена подложка към секцията
След като фалшивата заглавка е на мястото си, отворете настройките на раздела и актуализирайте разстоянието, както следва:
- Подплата (отгоре и отдолу): 15vw
Добавен фонов градиент към секцията
Сега, когато имаме повече място за работа, ние сме готови да добавим нашия фонов дизайн към секцията. Под раздела Градиент на фона, добавете следните градиентни точки:
- Градиентни стопове:
- 0%: #4f0f75 (при 0%)
- 25%: #2843c9 (при 25%)
- 50%: #4ae2e0 (при 50%)
- 75%: #3881ff (при 75%)
- 100%: #4f0f75 (при 100%)
Добавяне на фонов модел към секцията
Под раздела Фонов шаблон, актуализирайте следното:
- Десен: диагонални ивици
- Цвят на шаблона: rgba(79,15,117,0.23)
- Трансформиране: Завъртане
- Размер на модела: Персонализиран размер
- Ширина: 7vw
- Височина: 5vw
- Произход на повторение на шаблона: център
Забележка: Не забравяйте да използвате единицата за дължина на VW за ширината и височината на шаблона. И също така се уверете, че сте задали повторения произход на "център". Това ще запази фоновия модел на същото място като фоновия шаблон, който ще добавим към реда по-късно.
Добавяне на фонова маска към секцията
Под раздела Фонова маска, добавете следното:
- Фонова маска: Петно на слоя
- Цвят на маската: rgba(0,0,0,0.7)
- Ширина на маската: 100vw
- Позиция: Център
Забележка: Точно както при шаблона, трябва да оразмерим маската с помощта на единицата за дължина на VW. Също така трябва да дадем централна позиция на маската.
Линеен фонов дизайн
Копирайте и поставете фона на раздела към фона на реда
За да ускорите процеса на проектиране на фона на линията, копирайте настройките на фона на секцията.
След това поставете фона върху съществуващия ред.
В този момент вече можете да видите как фоновият модел и маската на линията правят плавен преход към фона на секцията.
Изглежда, че линията има прозрачен фон, но всъщност е същият модел и маска, използвани в секцията, със същия размер и позиция.
Регулирайте размера на реда и подложката с помощта на VW
След това трябва да дадем на нашия ред персонализирана ширина, използвайки единицата за дължина на VW. Актуализирайте следното:
- Ширина: 75vw
- Максимална ширина: 75vw
- Подложка (отгоре, отдолу, отляво и отдясно): 10vw
Регулиране на градиентните спирки на линия
След това трябва да коригираме ограничителите на градиента на фона на линията за безпроблемен преход към фоновия градиент на секцията.
Под раздела Градиент на фона, ще запазим трите средни градиентни точки, наследени от фона на секцията) и ще премахнем първата и последната градиентна спирка.
След това задайте първото спиране на 0%, а третото спиране на 100%. След като сте готови, трябва да имате следните градиенти.
- Градиентни стопове
- 0%: #2843c9
- 50%: #4ae2e0
- 100%: #3881ff
Добавете сянка на кутия към линията
За да придадем малко повдигане на дизайна и да подчертаем безпроблемния преход на фона, можем да добавим кутия сянка към реда.
- Box Shadow: вижте екранната снимка
- Вертикална позиция: 0px
- Сила на замъгляване на Shadow Box: 4vw
- Цвят на сянката: rgba(0,0,0,0.5)
Коригирайте цвета на шаблона на фона на линията
Сега, когато имаме всички фонови елементи на място, можем да започнем да коригираме цветовете за по-креативен дизайн.
Под опцията Фонов шаблон ред, актуализирайте следното:
- Цвят на шаблона: rgba(255,255,255,0.23)
Коригирайте цвета на фоновата маска на линията
Можем също да актуализираме цвета на маската за линията, за да направим дизайна наистина изпъкващ.
Под раздела Фонова маска, актуализирайте следното:
- Цвят на маската: #ffffff
- Трансформация на маската: обърната
Краен резултат
Нека видим крайния резултат.
Изтеглете DIVI сега!!!
Повече възможности
Ето някои други примерни дизайни, които са възможни само с няколко прости промени в маските и фоновите модели.
Вижте също: Divi: Как да използвате "Gradient Builder", за да разкрасите вашите изображения
Изтеглете DIVI сега!!!
Заключение
Ключът към създаването на безпроблемни преходи на дизайна на фона в Divi е разумното използване на тези единици за дължина на VW.
Първо, трябва да създадем дизайн на фона на раздела, който отговаря на ширината на прозореца за изглед на браузъра (от центрирана позиция на страницата). След като приключим, можем да използваме същия едноредов фонов дизайн. След това имаме само някои корекции на градиента и цвета за невероятен дизайн.
Надяваме се, че тази техника ще добави още едно полезно дизайнерско умение за бъдещи проекти.
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове.
Не се колебайте да се консултирате и с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...