Искате да създадете раздели с ефект на задържане на мишката от редове с Divi ?
Разделите определено са полезни за предоставяне на важна информация в кратка област от вас уеб сайт. Това намалява необходимостта потребителят да превърта през съдържание на дълга страница. Модулът раздел на Divi е лесен за използване и идеален за сърфиране в a съдържание просто с едно кликване.
Но в този урок ще ви покажем как да конвертирате редове Divi раздели и се появяват при задържане на мишката.
Ще ви покажем също как да създавате хоризонтални и вертикални раздели. Това ще отключи силата на Divi за създаване на цялостни оформления с множество модули за всяка област на съдържание раздел.
Не са необходими плъгини!
Нека да започнем.
изследване
Ето преглед на разделите, които ще създадем заедно в този урок.
Изтеглете DIVI сега!!!
Създайте нова страница с Divi Builder
От таблото за управление на WordPress отидете на Страници> Добавяне на ново за да създадете нова страница.
Дайте му заглавие, което има смисъл за вас, и щракнете Използвайте Divi Builder
След това кликнете Започнете да строите (Изграждане от нулата)
След това ще имате празно платно, за да започнете да проектирате в Divi.
Създаване на хоризонтални раздели с курсора на мишката с помощта на "Divi Rows"
В наличния раздел по подразбиране добавете ред с две колони.
Линеен фон, запълване на кутия и сянка
Преди да добавим нашите модули, нека първо персонализираме малко настройките на реда. Отворете настройките на линията и актуализирайте следното:
- Цвят на ляв градиент: #284f91
- Цвят на десен градиент: #4646c4
- Подложка: 50px (отгоре и отдолу), 50px (отляво и отдясно)
- Box Shadow: вижте екранната снимка
- Цвят на сянката на кутията: rgba(70,70,196,0.66)
Добавете съдържание към реда
Сега ще добавим съдържание на контейнер към нашия ред. В колона 1 добавете изображение по ваш избор с модул Image. Тук използвахме изображение от пакета за оформление « Design Conference Layout Pack« .
В дясната колона добавете модул Призив за действие и актуализирайте следното:
- URL адрес на връзка към бутона: # (само за показване на бутона за сега)
- Използвайте цвят на фона: НЕ
- Подравняване на текста: ляво
- Шрифт на заглавието: Lato
- Размер на текста на заглавието: 60px (десктоп), 50px (телефон)
Създаване на раздела
За да създадем действителния раздел, върху който потребителите ще задържат курсора на мишката, за да разкрият съдържанието на този ред, трябва да създадем текстов модул и да го позиционираме горе вдясно с някакъв персонализиран CSS.
Продължете и добавете нов текстов модул под изображението в колона 1 и актуализирайте следното:
- Тяло: „Раздел 1“
- Фон: #284f91 (това трябва да съответства на левия цвят на градиента на линията)
- Подравняване на текста: центрирано
- Цвят на текста: #ffffff
- Ширина: 100px
- Височина: 50px
- Поле: -100px (отгоре), -50px (отляво)
- Подложка: 14px (отгоре)
Накрая добавете следния персонализиран css към основния елемент, за да му дадете абсолютна позиция в горната част на реда.
position: absolute !important;
top: 0;
Височина и разстояние между секциите
Засега отворете настройките на раздела и актуализирайте следното:
- Минимална височина: 500px (десктоп), 900px (таблет), 750px (телефон)
- Поле: 100px (отгоре и отдолу)
- Подплата: 0px (отгоре и отдолу)
Създаване на втора линия
За да създадете втория ред, дублирайте реда, който сте създали по-рано. Преместете текстовия модул в колона 1 и изображението в колона 2. След това актуализирайте изображението с ново. Това ще ви помогне да добиете представа как изглежда различното съдържание във всеки раздел.
След това отворете настройките на модула Текст, използван за създаване на раздела в колона 1, и преместете раздела надясно, така че там, където този ред се припокрива с реда по-горе, можете да видите раздела директно вдясно от раздела на първия ред.
- Поле: 50px (ляво)
Добавен ефект на задържане
Отворете настройките на реда и добавете следния филтър:
- Непрозрачност: 70% (по подразбиране), 100% (задържане на курсора на мишката)
След това добавете продължителност на прехода и крива на скоростта за ефекта на задържане на филтъра за непрозрачност.
- Време за преход: 500 ms
- Крива на скоростта на прехода: Линейна
Създаване на трети раздел
Вече можем да добавим последния раздел. За да направите това, дублирайте втория ред, който току-що създадохте. След това преместете текстовия модул в колона 1 и изображението в колона 2. И актуализирайте модула на изображението с ново изображение.
Актуализирайте настройките на линията с нов фонов градиент.
- Ляв фонов градиент цвят: #333333
- Цвят на градиента на фона вдясно: #4646c4
След това отворете настройката на текстовия модул, използвана за създаване на раздела в колона 1, и актуализирайте цвета и полето.
- Фон: #333333
- Поле: 150px (ляво)
Ето как трябва да изглежда вашата страница, преди да позиционираме нашите линии така, че да се припокриват.
Припокриващи се линии с абсолютно позициониране
За да припокрием нашите линии, трябва да използваме абсолютно позициониране. Първо актуализирайте височината на трите реда до 100%.
- Височина: 100%
След това добавете следния персонализиран CSS към основния елемент и на трите реда:
position: absolute !important;
left: 0;
right: 0;
margin: auto;
Ето как изглеждат разделите ни в момента.
Промяна на реда на реда при задържане на курсора на мишката със Z индекс
В този момент може би сте забелязали, че третият ред/раздел е на преден план. Така че трябва да пренаредим редовете с помощта на Z Index, така че първият раздел да се показва първи, докато не задържите курсора на мишката върху друг раздел.
Прочетете още: Как да създадете персонализирани наслагвания на изображения в Divi
За да направите това, отворете настройките на първия ред и актуализирайте z-индекса, както следва:
Z-индекс: 10
След това поставете Z индекса на другите два реда при задържане.
Z-индекс: 11 (Hover)
Това е направено ! Да видим крайния резултат.
Краен резултат
Изтеглете DIVI сега!!!
Създаване на вертикални раздели
Ако искате да добавите вертикални раздели към редове, ето какво да направите.
Продължете и дублирайте раздела, съдържащ току-що създадените от нас раздели, така че да имате нов дизайн, с който да работите.
След това отворете настройките на раздела и актуализирайте следното:
- Подплата: 10% (ляво и дясно)
Актуализирайте следните настройки за всичките три реда на дублиращата се секция със следното:
- Ширина: 70% (настолен компютър), 70% (таблет), 80% (телефон)
- Максимална ширина: 980px
След това актуализирайте посоката на градиента до 90 градуса и за трите линии.
- Посока на градиента: 90 градуса
Сега е време да позиционираме нашите раздели на текстовия модул отляво на нашите редове, за да получим вертикалните раздели, които искаме.
Вижте също: Как да създадете меню с въртящо се колело при задържане на мишката в Divi
Отворете настройката на раздела на текстовия модул в първия ред и актуализирайте следното:
- Поле (работен плот): -50px (отгоре), -150px (отляво)
След това отворете настройките на раздела на раздела Текст на втория ред на раздел и актуализирайте следното:
- Поле (работен плот): 0px (отгоре), -150px (отляво)
И за последния раздел в третия ред актуализирайте следното:
- Поле (десктоп): 50px отгоре, -150px отляво
Краен резултат
Сега нека видим крайния резултат.
Изтеглете DIVI сега!!!
Заключение
С малко креативност и силата на Divi, можете да създадете някои доста готини персонализирани раздели, като използвате линиите Divi. Има някои ограничения за това, което можете да показвате.
Например при тази конфигурация всички редове трябва да имат същата височина като секцията. Но за да не се налага да използвате плъгин, това е чудесно решение.
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...