Doriți să schimbați stilul mai multor elemente Divi la trecerea cursorului sau după clic?
În acest tutorial, vă vom arăta cum să schimbați stilul mai multor elemente când treceți cu mouse-ul sau faceți clic Divi.
În primul rând, vom profita de opțiunile de design încorporate ale Divi pentru a proiecta un aspect al secțiunii.
În continuare, vom prezenta un fragment jQuery simplu pe care îl puteți utiliza în combinație cu CSS personalizat pentru a ajusta stilul oricărui element din această secțiune atunci când treceți cu mouse-ul peste sau faceți clic pe un buton.
Acest lucru poate suna complicat (mai ales pentru începători), dar ați putea fi surprins de cât de simplu este de făcut.
Să începem!
studiu
Iată o scurtă prezentare generală a designului pe care îl vom realiza în acest tutorial.
Schimbarea elementelor la trecerea cursorului pe buton
Modificarea elementelor după apăsarea butonului
Să începem prin a crea o pagină cu Divi Builder
Vezi si: Divi: Cum se creează un meniu cu roată rotativă la hover
Din tabloul de bord WordPress, accesați Pagini> Adăugare nouă pentru a crea o pagină nouă.
Dați-i un titlu care să aibă sens pentru dvs. și faceți clic Utilizați Divi Builder
Apoi faceți clic pe Începeți să construiți (Construiește de la zero)
După aceea, veți avea o pânză goală pentru a începe proiectarea în Divi.
Partea 1: Proiectarea aspectului secțiunii
Pentru a începe, creați un nou rând cu două coloane.
Setări secțiune
Înainte de a adăuga module, deschideți setările secțiunii și actualizați următoarele:
- Fundal: #ffffff
Să adăugăm un separator de secțiuni
- Separator (sus)
- Stil: vezi captura de ecran
- Culoare: #ffffff
- Înălțime: 5vw
- Separator (de jos)
- Stil: vezi captura
- Culoare: #ffffff
- Înălțime: 5vw
- Căptușeală (sus și jos): 6vw
Imagine (Înainte de a trece cu mouse-ul)
În coloana din stânga a rândului cu două coloane, adăugați un nou modul de imagine.
Apoi, încărcați imaginea pe care doriți să o evidențiați.
Sub filă Amenajări, actualizați alinierea și activați opțiunea Puterea latime completa.
- Alinierea imaginii: centrată
- Lățime completă de rezistență: DA
Imagine (la trecerea cu mouse-ul sau după clic)
Apoi, vom crea o altă imagine pe care o vom afișa atunci când trecem cu mouse-ul/facem clic pe un buton.
Pentru a crea imaginea, duplicați modulul imagine anterior.
Apoi încărcați o nouă imagine. Imaginea trebuie să aibă aceeași dimensiune cu cealaltă imagine, deoarece va înlocui cealaltă imagine la trecerea cu mouse-ul/clic.
Pentru această imagine, îi vom da o poziție absolută. Acest lucru va face ca imaginea să se așeze direct deasupra celeilalte imagini, fără a ocupa spațiu real pe pagină.
- Poziție: absolută
Sub filă Amenajări, modificați opacitatea sub opțiunile de filtru, astfel încât imaginea să fie complet invizibilă.
- Opacitate: 0%
Adăugați un modul Text
În coloana din dreapta, adăugați un nou modul Text.
Apoi lipiți următorul cod HTML în casetă cuprins din corp:
<h3><span>Créer</span> Votre Blog <span>avec BlogPasCher</span></h3>
Rețineți că unele cuvinte din text sunt înconjurate de etichete deschidere. Acesta este modul în care putem viza și personaliza aceste cuvinte mai târziu cu CSS personalizat.
Sub filă Amenajări, actualizați opțiunile de stil H3 după cum urmează:
- Titlul 3:
- Font: Montserrat
- Greutatea fontului Greutatea fontului: Ultra Bold
- Stil: TT
- Dimensiune text: 60 px (computer și tabletă), 40 px (telefon)
- Spațiere între litere: 0,06 em
- Înălțimea liniei: 2 em
În secțiunea următoare, vom adăuga butonul pe care îl vom folosi pentru a iniția schimbări de stil.
Creați o secțiune pentru buton
Mai întâi trebuie să creăm o nouă secțiune obișnuită sub secțiunea curentă.
Apoi adăugați un rând la o coloană în secțiune.
Adăugați un buton
În coloană, adăugați un modul nou Buton.
Schimbați textul butonului pentru a citi „Continuare...”.
Comutați la filă Amenajări și actualizați designul butonului după cum urmează:
- Utilizați stiluri personalizate pentru buton: DA
- Dimensiunea textului: 16px
- Culoare text: #ffffff
- Fundal buton (desktop): #4b4baf
- Buton Backround (Hover): #67ddc1
- Lățimea chenarului: 0 pixeli
Citiți și: Divi: Cum să adăugați o pictogramă hamburger la modulul Meniu
- Spațiere între litere butoane: 4px
- Font: Montserrat
- Greutatea fontului: semi-aldine
- Stil font pentru buton: TT
- Marja (jos): 0px
- Căptușeală (sus și jos): 1.5 em
- Captuseala (stânga și dreapta): 4em
Partea 2: Adăugați clase CSS la elemente
Acum că designul nostru este în vigoare, vom face restul modificărilor de design folosind cod personalizat (CSS și JQuery).
Dar înainte de a începe să adăugăm codul nostru personalizat, trebuie să adăugăm clase CSS la toate elementele pe care dorim să le schimbăm atunci când trecem cu mouse-ul/facem clic pe buton.
Adăugați o clasă CSS la secțiune
Pentru a adăuga o clasă CSS la secțiune, deschideți setările secțiunii și faceți clic pe filă Avansat. Apoi introduceți următoarea clasă CSS:
- Clasa CSS: et-change-style_section
Adăugați o clasă CSS la modulele Image
Apoi, deschideți setările pentru prima imagine din coloana din stânga și adăugați următoarea clasă CSS:
- Clasa CSS: et-before-image
Aceasta va fi imaginea care va fi afișată „înainte” de trecerea cu mouse-ul/clic pe butonul.
Folosind stratul modal, deschideți setările pentru a doua imagine (cea ascunsă cu filtrul de opacitate) și adăugați următoarea clasă CSS:
- Clasa CSS: et-after-image
Aceasta va fi imaginea care va fi afișată „după” trecerea cu mouse-ul / clic pe butonul.
Adăugați o clasă CSS la modulul Text
Apoi, adăugați următoarea clasă CSS la modulul de text din coloana din dreapta:
- Clasa CSS: et-style-text
Adăugați o clasă CSS la modulul Button
În cele din urmă, adăugați o clasă CSS personalizată la butonul din secțiunea de jos, după cum urmează:
- Clasa CSS: et-toggle-button
Avem nevoie de această clasă pentru a viza mai târziu butonul pentru funcționalitatea de trecere cu mouse-ul/clic în cod.
Partea 3: Adăugați cod personalizat pentru a schimba stilurile la trecerea cursorului sau la clic
Acum că toate clasele noastre CSS sunt la locul lor, putem adăuga codul necesar pentru a schimba stilul tuturor acestor elemente atunci când treceți cu mouse-ul/faceți clic pe buton.
Adăugați un modul Cod
Pentru a adăuga codul, adăugați un modul Cod sub butonul din secțiunea de jos.
Lipiți codul jQuery
Apoi lipiți următorul JQuery. Asigurați-vă că includeți codul în etichete de script în timp ce adăugăm codul într-un document HTML (nu într-un fișier 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 );
Schimbați stilul elementelor cu CSS personalizat
Deschideți modulul Cod și inserați următorul CSS personalizat deasupra scriptului JQuery, asigurându-vă că îl includeți în etichetele de stil necesare.
.et_pb_section.et-change-style_section.et-change-style_active {
background-color:#484db0 !important;
}
Apoi lipiți următorul CSS suplimentar în etichetele de stil.
.et-change-style_active .et-after-image {
filter: opacity(100%);
}
.et-change-style_active .et-before-image {
filter: opacity(0%);
} 
Apoi lipiți restul CSS-ului în etichetele de stil:
.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;
}Aceste fragmente CSS folosesc același concept pentru a schimba stilul elementului atunci când secțiunea (sau butonul) are noua clasă.
Rezultatul final (prezentare generală)
Odată adăugat codul, salvați modificările și deschideți pagina pentru a vedea rezultatul. Observați cum se schimbă articolele pe care le-am vizat când treceți cu mouse-ul peste buton.
Schimbați stilurile la clic
Pentru a adăuga funcționalitatea de clic, înlocuiți JQuery curent cu următoarele (din nou, asigurați-vă că este învelit în etichete de script):
(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 );
Iată rezultatul final.
Descărcați DIVI acum!!!
Concluzie
Capacitatea de a viza și de a stila mai multe elemente dintr-o pagină atunci când treceți cu mouse-ul peste sau faceți clic pe ceva este o abilitate utilă în design web.
Puteți folosi această tehnică pentru o varietate de cazuri de utilizare (înainte și după, CTA etc.)
Desigur, ajută să cunoașteți puțin CSS și JS/JQuery. Dar, așa cum ați văzut în acest tutorial, nu aveți nevoie de cunoștințe profunde de codare pentru a obține rezultate uimitoare!
Sperăm că acest tutorial vă va inspira pentru următoarele proiecte Divi. Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
De asemenea, puteți consulta resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
