Искате ли да представите вашите функционалности или продукти под формата на раздел Divi с hover ефект?
Търсите ли нови креативни начини да покажете функции и/или продукти на вашите уеб страници?
Ако е така, продължете да четете, защото в тази статия ще ви покажем как да показвате функции в раздели при задържане, като използвате само вградените опции на Divi. Възможностите, които имате с този подход, са безкрайни и със сигурност ще ви позволят да разберете Divi на по-дълбоко ниво.
Ефектът при задържане на курсора на мишката ще се появи само на работния плот. На по-малки размери на екрана те ще се показват в нормалните си форми.
Да вървим!
изследване
Преди да се потопим в този урок, нека да разгледаме резултата, който искаме да постигнем.
Нека започнем процеса на създаване с Divi
Добавете нов раздел
Градиентен фон
Добавете нова страница или отворете съществуваща страница и добавете нова секция. Отворете настройките на секцията и добавете градиентен фон към секцията.
- Ляв цвят: #f2f2f2
- Десен цвят: #ffffff
- Посока на градиента: 87 градуса
- Лява позиция: 20%
- Права позиция: 80%
разстояние
След това променете следните настройки за разстояние:
- Подложка (отгоре и отдолу): 0px
Добавете нов ред
Структура на колоната
Продължете, като добавите нов ред към раздела, като използвате следната структура на колоните:
Цвят на фона
Без да добавяте още модули, отворете настройките на реда и променете цвета на фона.
- Цвят на фона: #ffffff
Оразмеряване и подравняване
В раздела Дизайн, дръпнете надолу опцията Оразмеряване и променете следните настройки:
- Използвайте персонализирана ширина на улука: ДА
- Ширина на улука: 1
- Ширина: 400px
- Подравняване на редове: ляво
Оразмеряване на мишката
Промяна на опцията Ширина в настройките за оразмеряване при задържане. Това ще позволи на линията да се разширява при задържане.
- Ширина (Hover): 2 пиксела
разстояние
След това отидете на настройките за разстояние в опцията Отстояние
- Подложка (отгоре и отдолу): 0px
Граница (работен плот)
Добавете „20px“ в горния десен ъгъл на линията и също така добавете лява граница към линията.
- Заоблени ъгли (работен плот): 20px (горен десен ъгъл)
- Ширина на лявата граница: 20px
- Цвят на лявата граница: #6d44ff
Граница при задържане
Премахнете горния десен заоблен ъгъл на „20px“ при задържане на мишката, като вместо това добавите „0px“.
Box Shadow (Desktop)
Накрая добавете фина сянка.
- Сила на замъгляване на сянката на кутията: 80px
- Сила на разпространение на сянка в кутия: -10px
- Цвят на сянката: rgba(0,0,0,0.11)
Hover Shadow
И променете цвета на сянката на напълно прозрачен цвят при задържане.
- Box Shadow: rgba(255,255,255,0)
Добавяне на модул Blurb към ред
Добавете съдържание
Сега, след като приключихме с промяната на всички настройки на реда, можем да продължим и да добавим модул Blurb към колоната. Чувствайте се свободни да използвате всеки друг модул по ваш избор.
След като добавите модула, добавете малко съдържание по ваш избор.
Изберете иконата
След това изберете икона по ваш избор.
Настройки на икони
И променете външния вид на иконата в настройките на иконата. Отидете в раздела Дизайн
- Цвят на иконата: #5323ff
- Разположение на изображение/икона: Горе
- Ширина на изображение/икона: 50px
Настройки на текстовото заглавие (десктоп)
След това променете настройките на заглавието.
- Шрифт на заглавието: Poppins
- Подравняване на текста: центрирано
- Цвят на текста на заглавието: #5323ff
- Размер на текста на заглавието: 25px
- Разстояние между буквите: -1px
- Височина на реда: 1 em
Настройки за заглавие на текст при задържане на мишката
И променете височината на заглавния ред при задържане.
- Височина на заглавния ред: 1,5 см
Настройки на основния текст (работен плот)
След това отидете на настройките на основния текст и направете някои промени. Това включва промяна на размера на текста на „0px“. Това ще ни помогне да накараме основния текст да се показва само при задържане на мишката.
- Основен шрифт: Poppins
- Тегло на основния шрифт: лек
- Подравняване на текста: центрирано
- Цвят на основния текст: #000000
- Размер на основния текст: 0px (десктоп), 15px (таблет и телефон)
- Височина на реда: 2,2 em
Настройки на основния текст при задържане
За да сте сигурни, че основният текст се появява при задържане, променете размера на текста при задържане.
- Размер на основния текст: 15px
Разстояние (работен плот)
За да дадем на модула малко пространство, ние променяме следните параметри на разстоянието:
- Подложка (отгоре и отдолу): 80px
Ховър Разстояние
Ще променим настройките за разстояние между курсора.
- Подложка (отгоре и отдолу): 80px
- Подложка (ляво и дясно): 20vw
Клонирайте реда 3 пъти
След като приключите с редактирането на първия ред и неговия модул Blurb, можете да продължите и да клонирате реда толкова пъти, колкото искате.
Модул за редактиране на линия и анотация #2
Промяна на цвета на границата на линията
Нека започнем, като променим цвета на лявата граница на линията.
- Цвят на лявата граница: #00ffcc
Редактиране на съдържание и икона на Blurb
След това отворете настройките на модула Blurb и сменете иконата.
Промяна на цвета на иконата на модула на Blurb
С цвят на иконата.
- Цвят на иконата: #00eda6
Промяна на цвета на заглавието
И цвета на заглавния текст.
- Цвят на текста на заглавието: #00eda6
Редактиране на линия и модул Burb #3
Цвят на границата на линията
Нека променим цвета на рамката на лявата линия.
- Цвят на лявата граница: #afebff
Редактиране на съдържание и икона на Blurb
Нека също да променим иконата и съдържание на текста на презентацията.
Промяна на цвета на иконата на модула на Blurb
Променете и цвета на иконата.
- Цвят на иконата: #68d9ff
Промяна на цвета на текста на заглавието
И цветът на заглавния текст също.
- Цвят на текста на заглавието: #68d9ff
Модул за редактиране на линия и анотация #4
Промяна на цвета на границата на линията
В следващия и последен модул също сменете цвета на лявата граница на линията.
- Цвят на лявата граница: #dd87cf
Редактиране на съдържание и икона на Blurb
Отворете модула Blurb в реда и променете иконата и съдържание du модул.
Промяна на цвета на иконата на модула на Blurb
С цвят на иконата.
- Цвят на иконата: #dd6aca
Промяна на цвета на текста на заглавието
И цветът на заглавния текст също.
- Цвят на текста на заглавието: #dd6aca
изследване
Сега, след като преминахме през урока, нека хвърлим последен поглед на резултата.
Изтеглете DIVI сега!!!
Заключение
В тази статия ви показахме как да използвате вградените опции на Divi само за създаване на раздели, налични при задържане.
Този подход ще ви помогне да споделяте съдържание за функции или продукти интерактивно.
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...