Искате ли да знаете как да разкриете съдържание когато задържите курсора на мишката върху разделителя на секции в Divi ?
Разделителите на секции продължават да бъдат елемент от дизайна Divi популярен. Има много стилове на разделители, от които да избирате с полезни опции, които улесняват добавянето на уникални преходи и фонове към вашата страница.
В този урок ще използваме разделителите на секции малко по-различно. Divi ви позволява да регулирате височината и оформлението на всеки разделител. Това ни позволява да позиционираме разделители над определени области или съдържание на секцията.
Като използваме опцията за задържане на мишката за височина на разделителя, можем да добавим уникални ефекти при задържане, които разкриват a съдържание частично скрити. Това работи чудесно за привличане на вниманието към конкретен призив за действие или бутон, върху който искате хората да кликнат. посетители щракнете.
изследване
Изтеглете DIVI сега!!!
Създайте нова страница с Divi Builder
От таблото за управление на WordPress отидете на Страници> Добавяне на ново за да създадете нова страница.
Дайте му заглавие, което има смисъл за вас, и щракнете Използвайте Divi Builder
След това кликнете Започнете да строите (Изграждане от нулата)
След това ще имате празно платно, за да започнете да проектирате в Divi.
Проектиране на ефекта на курсора на разделителя на секции в Divi
Създаване на секцията и линията
Създайте обикновена секция с ред от две колони.
Преди да добавите модул, отворете настройките на секцията и актуализирайте следното:
Градиент на фона (вляво): #73ba57
Фонов градиент (вдясно): #2a4c23
Ширина: 80%
Максимална ширина: 1px
Подравняване на раздела: Център
Добавете заглавие на раздел
За да добавите заглавието на раздела, създайте текстов модул и вмъкнете следния текст:
<h2>The Juice</h2>
След това актуализирайте дизайна, както следва:
Шрифт: Lato
Размер на текста: 80px
Разстояние между буквите: -5px
Поле: -50px (отгоре), -40px (отдолу)
Z индекс: -1
Персонализираното поле и z-индекс ще позволят на текста да остане зад изображението, което ще добавим в следващата стъпка.
Добавяне на изображение
Под модула Текст със заглавие в колона 1 добавете модул Изображение. След това качете изображение с прозрачен фон. Използваме изображение от пакета за оформление Магазин за сокове 240 пиксела на 300 пиксела.
Регулирането на подравняването на изображението в центъра.
Добавете модул „Призив към действие“ в колона 2
В колона 2 добавете модул Call To Action.
Добавете URL адрес на връзка към бутон, за да сте сигурни, че бутонът се показва.
Стил на фона на CTA и текста на заглавието
След това актуализирайте следните настройки на дизайна:
Фон: #ffffff
Цвят на текста: тъмен
Шрифт на заглавието: Lato
Тегло на шрифта на заглавието: Тежък
Стил на шрифта: TT
Размер на текста на заглавието: 18px
Персонализирайте бутона CTA
Актуализирайте дизайна на бутона, както следва:
- Използване на персонализирани стилове за бутон: ДА
- Цвят на текста на бутона: #ffffff
- Цвят на фона на бутона: #73ba57
- Ширина на рамката: 0px
Персонализиране на рамката на CTA модула
След това добавете граница, за да рамкирате модула, както следва:
Ширина на рамката: 10px
Цвят на рамката: rgba(115,186,87,0.15)
Добавен е ефектът на задържане към сплитера, за да разкрие модула „Призив към действие“.
Сега е време да добавите ефекта на задържане към разделителя на секциите, за да разкриете модула „Призив към действие“. За да направим това, първо трябва да създадем нашите разделители на секции.
Прочетете още: Divi: Как да разкриете съдържание, когато задържите курсора на мишката върху раздели
Добавяне на горния разделител
Отворете параметрите на секцията и горния разделител със следните параметри.
Стил на горния разделител: вижте екранната снимка
Цвят на горния разделител: #73ba57
Височина на разделителя: 70% (по подразбиране), 0% (задръжте)
Обръщане на горния разделител: хоризонтално
Имайте предвид, че височината на разделителя започва с височина по подразбиране от 70%, след което се променя на височина от 0% при задържане.
Добавен долен разделител
След това добавете долен разделител, подобен на секцията със следните параметри.
- Стил на долния разделител: вижте екранната снимка
- Цвят на долния разделител: #73ba57
- Височина на разделителя: 70% (по подразбиране), 0% (задръжте)
- Обръщане на разделителя: хоризонтално
- Подреждане: Върху съдържанието на раздела
Този долен разделител също започва с височина от 70%, която пада до 0% при задържане. Въпреки това, тъй като опцията за подреждане на разделителя е зададена над съдържанието, разделителят на секциите скрива долната част на модула „Призив за действие“ в колона 1. След това при задържане на мишката се разкрива останалата част от модула.
Вижте резултата до момента.
Изтеглете DIVI сега!!!
Добавен ефект на сянка на кутията за уникален преход и дизайн
За уникален преход и дизайн при задържане на курсора на мишката, можем да добавим ефект на задържане на курсора на кутия със сянка, който ще се извърши едновременно с ефекта на разделяне на курсора на мишката. За да направите това, добавете следната сянка на полето към секцията.
- Box Shadow: вижте екранната снимка
- Хоризонтална позиция: 0px
- Вертикална позиция: 0px
- Сила на разпръскване на сянка в полето: 0px (по подразбиране), 150px (задръжте)
- Цвят на сенките: #73ba57
Забавете продължителността на прехода
За последна стъпка нека забавим продължителността на прехода.
Продължителност на прехода: 700ms
Краен резултат
Сега, след като преминахме през всички стъпки, нека видим крайния резултат.
Изтеглете DIVI сега!!!
Заключение
Надяваме се, че тази статия ви е вдъхновила да създадете уникални ефекти на курсора на разделителя на секции, за да разкриете съдържание.
Всъщност регулирането на сплитера при насочване може да бъде страхотна дизайнерска функция сама по себе си. Освен това примерните дизайни трябва да ви помогнат да започнете свое собствено проучване и проекти.
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...