Искате ли да промените стила на няколко елемента Divi при задържане или след щракване?
В този урок ще ви покажем как да промените стила на няколко елемента при задържане на мишката или щракване Divi.
Първо, ще се възползваме от вградените дизайнерски опции на Divi за проектиране на оформление на раздела.
След това ще представим прост jQuery фрагмент, който можете да използвате в комбинация с персонализиран CSS, за да коригирате стила на всеки елемент в тази секция, когато задържите курсора на мишката над или щракнете върху бутон.
Това може да звучи сложно (особено за начинаещи), но може да се изненадате колко лесно е да се направи.
Нека да започнем!
изследване
Ето кратък преглед на дизайна, който ще постигнем в този урок.
Промяна на елементи при задържане на бутон
Промяна на елементите след натискане на бутона
Нека започнем, като създадем страница с Divi Builder
Вижте също: Divi: Как да създадете меню с въртящо се колело при задържане
От таблото за управление на WordPress отидете на Страници> Добавяне на ново за да създадете нова страница.
Дайте му заглавие, което има смисъл за вас, и щракнете Използвайте Divi Builder
След това кликнете Започнете да строите (Изграждане от нулата)
След това ще имате празно платно, за да започнете да проектирате в Divi.
Част 1: Дизайн на оформлението на раздела
За да започнете, създайте нов ред с две колони.
Настройки на секцията
Преди да добавите модули, отворете настройките на секцията и актуализирайте следното:
- Фон: #ffffff
Нека добавим разделител на секции
- Разделител (отгоре)
- Стил: вижте екранната снимка
- Цвят: #ffffff
- Височина: 5vw
- Разделител (отдолу)
- Стил: вижте заснемането
- Цвят: #ffffff
- Височина: 5vw
- Подплата (отгоре и отдолу): 6vw
Изображение (преди задържане на курсора)
В лявата колона на реда с две колони добавете нов модул за изображение.
След това качете изображението, което искате да маркирате.
Под раздела Дизайн, актуализирайте подравняването и активирайте опцията Сила Пълна ширина.
- Подравняване на изображението: центрирано
- Сила Пълна ширина: ДА
Изображение (при задържане или след щракване)
След това ще създадем друго изображение, което ще показваме, когато задържим/щракнем върху бутон.
За да създадете изображението, дублирайте предишния модул за изображение.
След това качете ново изображение. Изображението трябва да е със същия размер като другото изображение, тъй като то ще замени другото изображение при задържане/щракване.
За това изображение ще му дадем абсолютна позиция. Това ще накара изображението да стои точно над другото изображение, без да заема реално място на страницата.
- Позиция: Абсолютна
Под раздела Дизайн, променете непрозрачността под опциите на филтъра, така че изображението да е напълно невидимо.
- Непрозрачност: 0%
Добавяне на текстов модул
В дясната колона добавете нов текстов модул.
След това поставете следния HTML код в полето съдържание от тялото:
<h3><span>Créer</span> Votre Blog <span>avec BlogPasCher</span></h3>
Обърнете внимание, че някои думи в текста са оградени с тагове педя. Ето как можем да насочваме и персонализираме тези думи по-късно с персонализиран CSS.
Под раздела Дизайн, актуализирайте опциите за стил H3, както следва:
- Заглавие 3:
- Шрифт: Монсерат
- Тегло на шрифта Тегло на шрифта: ултра удебелен
- Стил: TT
- Размер на текста: 60 px (компютър и таблет), 40 px (телефон)
- Разстояние между буквите: 0,06 em
- Височина на реда: 2 em
В следващия раздел ще добавим бутона, който ще използваме за иницииране на промени в стила.
Създайте раздел за бутона
Първо трябва да създадем нов редовен раздел под текущия раздел.
След това добавете ред към колона към раздела.
Добавете бутон
В колоната добавете нов модул Бутон.
Променете текста на бутона, за да гласи „Продължава...“.
Превключете към раздела Дизайн и актуализирайте дизайна на бутона, както следва:
- Използване на персонализирани стилове за бутон: ДА
- Размер на текста: 16px
- Цвят на текста: #ffffff
- Фон на бутона (работен плот): #4b4baf
- Фон на бутона (задръжте курсора): #67ddc1
- Ширина на рамката: 0 пиксела
Прочетете още: Divi: Как да добавите икона на хамбургер към модула на менюто
- Разстояние между буквите на бутоните: 4px
- Шрифт: Монсерат
- Тегло на шрифта: Полудебел
- Стил на шрифта на бутона: TT
- Поле (отдолу): 0px
- Подплата (отгоре и отдолу): 1.5em
- Подложка (ляво и дясно): 4em
Част 2: Добавяне на CSS класове към елементи
Сега, когато нашият дизайн е готов, ние ще направим останалите промени в дизайна, като използваме персонализиран код (CSS и JQuery).
Но преди да започнем да добавяме нашия персонализиран код, трябва да добавим CSS класове към всички елементи, които искаме да променим, когато задържим/щракнем върху бутона.
Добавете CSS клас към раздела
За да добавите CSS клас към раздела, отворете настройките на раздела и щракнете върху раздела Подробно. След това въведете следния CSS клас:
- CSS клас: et-change-style_section
Добавете CSS клас към модулите за изображения
След това отворете настройките за първото изображение в лявата колона и добавете следния CSS клас:
- CSS клас: et-before-image
Това ще бъде изображението, което ще се показва "преди" задържането/щракването на бутона.
Използвайки модалния слой, отворете настройките за второто изображение (скритото с филтъра за непрозрачност) и добавете следния CSS клас:
- CSS клас: et-after-image
Това ще бъде изображението, което ще се покаже „след“ задържане/щракване върху бутона.
Добавете CSS клас към текстовия модул
След това добавете следния CSS клас към текстовия модул в дясната колона:
- CSS клас: et-style-text
Добавете CSS клас към модула Button
Накрая добавете персонализиран CSS клас към бутона в долната секция, както следва:
- CSS клас: et-toggle-button
Имаме нужда от този клас, за да насочим бутона за функционалност при задържане/щракване в кода по-късно.
Част 3: Добавяне на персонализиран код за промяна на стилове при задържане или щракване
Сега, когато всички наши CSS класове са налице, можем да добавим необходимия код, за да променим стила на всички тези елементи, когато задържите/щракнете върху бутона.
Добавяне на кодов модул
За да добавите кода, добавете кодов модул под бутона в долната секция.
Поставете jQuery кода
След това поставете следния JQuery. Не забравяйте да увиете кода в скриптови тагове, докато добавяме кода към HTML документ (не JS файл).
(function($) {
$(document).ready(function(){
$('.et-toggle-button').hover(function(){
$('.et-change-style_section').toggleClass('et-change-style_active');
var $this = $(this);
$this.toggleClass('et-toggle-button_active');
});
});
})( jQuery );
Променете стила на елементите с персонализиран CSS
Отворете модула Code и поставете следния персонализиран CSS над скрипта JQuery, като се уверите, че сте го обвили в необходимите тагове за стил.
.et_pb_section.et-change-style_section.et-change-style_active {
background-color:#484db0 !important;
}
След това поставете следния допълнителен CSS в етикетите за стил.
.et-change-style_active .et-after-image {
filter: opacity(100%);
}
.et-change-style_active .et-before-image {
filter: opacity(0%);
} 
След това поставете останалата част от CSS вътре в стиловите тагове:
.et-change-style_active .et-style-text h3, .et-change-style_active .et-style-text p {
color: #ffffff;
}
.et-change-style_active .et-style-text h3 span {
color: #67ddc1;
}
.et-toggle-button_active {
transform: scale(1.1);
background-color: #67ddc1 !important;
}
.et-change-style_active, .et-before-image, .et-after-image, .et-style-text h3 {
transition: all 0.3s;
}Тези CSS фрагменти използват същата концепция за промяна на стила на елемента, когато секцията (или бутонът) има новия клас.
Краен резултат (общ преглед)
След като кодът бъде добавен, запазете промените и отворете страницата, за да видите резултата. Забележете как елементите, към които сме се насочили, се променят, когато задържите курсора на мишката върху бутона.
Промяна на стилове при щракване
За да добавите функционалност за щракване, заменете текущия JQuery със следния (отново се уверете, че е обвит в тагове на скрипт):
(function($) {
$(document).ready(function(){
$('.et-toggle-button').click(function(e){
e.preventDefault();
$('.et-change-style_section').toggleClass('et-change-style_active');
var $this = $(this);
$this.toggleClass('et-toggle-button_active');
if ($this.hasClass('et-toggle-button_active')){
$this.text('Précédent...');
} else {
$this.text('Suite...');
}
});
});
})( jQuery );
Ето и крайния резултат.
Изтеглете DIVI сега!!!
Заключение
Възможността да насочвате и стилизирате множество елементи на страница, когато задържите курсора на мишката върху нещо или щракнете върху нещо, е полезно умение в уеб дизайна.
Можете да използвате тази техника за различни случаи на употреба (преди и след, CTA и т.н.)
Разбира се, полезно е да знаете малко CSS и JS/JQuery. Но, както видяхте в този урок, нямате нужда от задълбочени познания по кодиране, за да получите невероятни резултати!
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...