Разделителите на секции продължават да бъдат популярен елемент на дизайна на Divi. Има много стилове на разделители, включително някои полезни опции, които улесняват добавянето на уникални преходи и фонове към вашата страница.
В този урок ще използваме разделителите на секции малко по-различно. Divi ви позволява да регулирате височината и разположението на всеки разделител. Това ни позволява да позиционираме разделителите над определени области или съдържание в секцията. Чрез използване на опцията за задържане на курсора за височината на разделителя, можем да добавим уникални ефекти при задържане на курсора, разкриващи частично скрито съдържание. Това работи чудесно за привличане на вниманието към конкретен призив за действие или бутон, върху който искате хората да кликнат. посетители щракнете.
Нека да започнем.
Примерен резултат
Какво трябва да започнете
За да започнете, се нуждаете от следното:
- Le Тема на Divi инсталиран и активен
- Нова страница, създадена за изграждане от нулата на предния край (визуален конструктор)
- Някои фиктивни изображения, които да се използват в дизайна. Ще използвам няколко изображения с прозрачен фон от Пакет за оформление на магазин за сокове .
След това сте готови да започнете!
Внедряване на дизайна на ефекта на задържане на височината на разделителя на участъка в Divi
Създаване на секцията и линията
Нека започнем със създаването на обикновен раздел с ред от две колони.
Ляв фонов градиент: #73ba57
Десен фонов градиент: #2a4c23
Ширина: 80%
Максимална ширина: 1080px
Подреждане на раздел: Център
Но можете да изберете и цветовата схема, която харесвате, според вашето изображение. моята цветова схема е: # fff200 - # e09900 в градиент.
Добавете заглавие на раздел
За да добавите заглавието на секцията, създайте текстов модул и актуализирайте съдържанието на тялото със следното заглавие h2:
Сокът
След това актуализирайте чертежа, както следва:
Заглавие 2 Шрифт: Lato
Размер на текста 2 на заглавието: 80px
Заглавие 2 Разстояние между буквите: -5px
Марж: -50px в горната част, -40px в долната част
Z-индекс: -1
Персонализираното поле и индексът z ще позволят на текста да седи зад изображението, което ще добавим в следващата стъпка.
Добавяне на изображение
Под текстовия модул със заглавието в колона 1 добавете модул за изображение. След това качете изображение с прозрачен фон. Използвам изображение от Juice Shop Layout Pack, което е 240 пиксела на 300 пиксела.
Добавяне на призив за действие в колона 2
В колоната 2 добавете повикване към модула за действие.
Добавете URL връзка за бутон, за да сте сигурни, че е показан.
CTA фон и стил на заглавието
След това актуализирайте следните параметри на дизайна:
Цвят на фона: #ffffff
Цвят на текста:
заглавие шрифт: Lato
Заглавие за теглото: Тежка
Заглавие Шрифт Стил: TT
заглавие Размер на текста: 18px
Стилизирайте бутона CTA
Актуализирайте дизайна на бутона, както следва:
Цвят на текста на бутона: #ffffff
Цвят на фона на бутона: # e09900
Ширина на границата на бутоните: 0 px
Оформяне на границата на CTA
След това добавете рамка, за да направите рамката на модула, както следва:
Ширина на границата: 10px
Цвят на границата: rgba (224,145,0,0.25)
Добавен е ефект на задържане на височината на разделителя за разкриване на призив за действие
Сега е време да добавите ефекта на курсора на височината на разделяне, за да разкриете призива за действие. За да направите това, първо трябва да създадем нашите разделители на раздели.
Добавяне на горния разделител
Отворете параметрите на секцията и горния разделител със следните параметри.
Стил на горния делител: вижте екранната снимка Цвят на горния делител: # 73ba57 Височина на горния делител: 70% (по подразбиране), 0% (зависене)
Разделител отгоре: хоризонтално
Обърнете внимание, че височината на разделителя започва с височина по подразбиране от 70% и след това се премества на височина от 0% при преобръщане.
Добавяне на долния разделител
След това добавете долен разделител, подобен на секцията със следните параметри.
Стил на горния делител: вижте екранната снимка Цвят на горния делител: # 73ba57 Височина на горния делител: 70% (по подразбиране), 0% (зависене)
Разделител отгоре: хоризонтално
Оформление на разделителя: В горната част на секцията „Съдържание“
Този фонов разделител също започва с височина от 70%, която се променя на 0% при задържане. Тъй като обаче опцията за оформление на разделителя е зададена в горната част на съдържанието, разделителят на раздели скрива долната част на призива за действие в колона 1. След това, при нанасяне на курсора, останалата част от l разкрива се призив за действие.
Вижте резултата до момента.
Добавен е ефект на задържане на кутия в сянка за уникален преход и дизайн
За уникален хоризонтален преход и дизайн можем да добавим ефект на задържане на кутия в сянка, който ще се осъществи едновременно с ефекта на завиване на височината на разделителя. За да направите това, добавете сянката на следващото поле към раздела.
Box Shadow: вижте екранната снимка
Кутия Сянка Хоризонтална позиция: 0px
Кръгла вертикална позиция на сянка: 0px
Сила за разпръскване на сенките на полето: 0px (по подразбиране), 150px (задържане на курсора)
Цвят на кутията на сенките: #73ba57
Забавете продължителността на прехода
За последна стъпка нека забавим продължителността на прехода.
Продължителност на прехода: 700ms
Краен резултат
Ето и крайния резултат на работния плот.
Въз основа на това, което направихме по-горе, ще можете да персонализирате дисплея на мобилни устройства и таблети.
Заключителни мисли
Надявам се, че този урок ви е дал малко вдъхновение за създаване на уникални ефекти на разделителя на височината на разделителя за разкриване на съдържание Всъщност регулирането на височината на висящия делител може да бъде забележителен елемент на дизайна. И дизайнерските мостри трябва да ви помогнат да започнете собствено проучване и ваши собствени проекти.
Надявам се да се чуем от вас в коментарите.
За вашето здраве!
