Cum să schimbați stilul elementelor multiple pe Hover sau faceți clic în Divi

În cele din urmă, în lumea designului web, coderii și non-coderii vor căuta să adauge personalizări și funcționalități mai avansate site-urilor lor web Divi. De obicei, aceasta implică utilizarea Javascript / JQuery pentru a schimba stilul elementelor de pe pagină din diferite motive. Poate doriți să faceți să apară un formular de contact atunci când faceți clic pe un buton. Sau poate doriți să schimbați o imagine atunci când treceți cu mouse-ul peste un link.

În acest tutorial, vă vom arăta cum să schimbați stilul mai multor elemente pe hover sau faceți clic în Divi. În primul rând, vom profita de opțiunile de proiectare încorporate ale Divi pentru a proiecta un aspect al secțiunii. Apoi vom introduce un fragment simplu de jQuery pe care îl puteți utiliza în combinație cu CSS personalizat pentru a regla stilul oricărui element din acea secțiune atunci când plasați cursorul sau faceți clic pe un buton. Acest lucru poate părea complicat (în special pentru începători), dar puteți fi surprins de cât de simplu este de realizat.

Să începem!

Trage cu ochiul

Iată o privire rapidă asupra designului pe care îl vom construi în acest tutorial.

Aici este proiectat aspectul secțiunii care se schimbă atunci când treceți cu mouse-ul peste buton.

Și aici este modificat același design al secțiunii, făcând clic pe buton. Observați că textul butonului se modifică și la clic.

Descărcați aspectul GRATUIT

Pentru a pune mâna pe desenele din acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Pentru a importa aspectul secțiunii în biblioteca Divi, navigați la biblioteca Divi.

Faceți clic pe butonul Import.

În fereastra pop-up de portabilitate, selectați fila de import și alegeți fișierul de descărcare de pe computer.

Apoi faceți clic pe butonul de import.

După ce ați terminat, aspectul secțiunii va fi disponibil în Divi Builder.

Să trecem la tutorial, nu-i așa?

Ce trebuie să începeți

Pentru a începe, va trebui să faceți următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi.
2. Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din partea frontală (builder vizual).
3. Alegeți opțiunea „Build From Scratch”.

După aceea, veți avea o pânză goală pentru a începe să proiectați î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 pentru secțiune și actualizați următoarele:

• Culoare fundal: #ffffff

• Stilul divizorului superior: vezi captura de ecran
• Culoare divizor superior: #ffffff
• Înălțimea separatorului superior: 5vw

• Stilul divizorului de jos: același
• Culoare divizor de fund: #ffffff
• Înălțimea divizorului inferior: 5vw

• Garnitura: 6vw sus, 6vw jos

Înainte de imagine

Î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 prezentați. Pentru acest tutorial, folosim o imagine din pachetul de aspect al Managementului învățării (LMS), care este de aproximativ 800 x 550 px.

Sub fila Proiectare, actualizați alinierea și activați opțiunea forțare lățime completă.

• Aliniere imagine: centru
• Forțează lățimea completă: DA

După imagine

Apoi, vom crea o altă imagine pe care o vom afișa atunci când vom plasa / faceți clic pe un buton.

Pentru a crea imaginea, copiați modulul de imagine anterior.

Apoi încărcați o imagine nouă. Imaginea ar trebui să aibă aceeași dimensiune ca și cealaltă imagine, deoarece va înlocui cealaltă imagine la cursor / clic.

Pentru această imagine, îi vom oferi o poziție absolută. Acest lucru va face ca imaginea să stea direct deasupra celeilalte imagini fără a ocupa spațiu real pe pagină.

• Poziție: Absolută

Sub fila Proiectare, modificați opacitatea din opțiunile de filtrare, astfel încât imaginea să fie complet invizibilă.

• Opacitate: 0%

Adăugați antet text

În coloana din dreapta, adăugați un nou modul de text.

Apoi lipiți următorul HTML în zona de conținut a corpului:

<h3><span>Design</span> Anything You Want <span>with Divi</span></h3>

Observați că unele dintre cuvintele din text sunt împachetate cu etichete span. Aceasta este astfel încât să putem viza și stiliza aceste cuvinte mai târziu cu unele CSS personalizate.

Sub fila Design, actualizați opțiunile de stil H3 după cum urmează:

• Rubrica 3 Font: Montserrat
• Titlul 3 Greutate font: Ultra Bold
• Rubrica 3 Stil font: TT
• Rubrica 3 Dimensiune text: 65 px (desktop și tabletă), 40 px (telefon)
• Rubrica 3 Spațierea literelor: 0.8em
• Rubrica 3 Înălțimea liniei: 1.3em

Aceasta are grijă de aspectul secțiunii care conține elementele de design pe care le vom schimba atunci când plasați / faceți clic pe un buton. În următoarea secțiune, vom adăuga butonul pe care îl vom folosi pentru a iniția modificările de stil.

Creați secțiunea pentru buton

Creați o nouă secțiune obișnuită sub secțiunea curentă.

Apoi adăugați un rând cu o coloană la secțiune.

Adaugă buton

În coloană, adăugați un nou modul buton.

Schimbați textul butonului pentru a citi „Vedeți după”.

Treceți la fila Design și actualizați designul butonului după cum urmează:

• Utilizați stiluri personalizate pentru buton: DA
• Dimensiune text buton: 16 px
• Culoarea textului butonului: #ffffff
• Fundalul butonului: # 4b4baf
• Fundalul butonului (hover): # 67ddc1
• Lățimea chenarului butonului: 0 px
• Distanța dintre litere și butoane: 4 px
• Buton Font: Montserrat
• Buton Font Greutate: Semi Bold
• Stil Font Buton: TT

Partea 2: Adăugarea de clase CSS la elemente

Acum, când designul nostru este în vigoare, vom realiza restul modificărilor de proiectare 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 plasați cursorul / faceți clic pe buton.

Adăugați Clasa 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 fila avansată. Apoi introduceți următoarea clasă CSS:

• Clasa CSS: et-change-style_section

Adăugați Clasa CSS la Imagini

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 este afișată „înainte” butonul de deplasare / clic.

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 este afișată „după” butonul de deplasare / clic.

Adăugați clasă CSS la 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 Clasa CSS la Buton

În cele din urmă, adăugați o clasă CSS personalizată butonul din secțiunea de jos, după cum urmează:

• Clasa CSS: et-toggle-button

Avem nevoie de această clasă pentru a viza butonul pentru funcționalitatea hover / click din cod mai târziu.

Partea 3: Adăugați un cod personalizat pentru a schimba stilurile la cursor sau faceți clic

Acum că toate clasele noastre CSS sunt la locul lor, putem adăuga acum codul necesar pentru a schimba stilul tuturor acelor elemente atunci când plasați / faceți clic pe buton.

Adăugați un modul de cod

Pentru a adăuga codul, adăugați un modul de cod sub butonul din secțiunea de jos.

Inserați codul jQuery

Apoi lipiți următorul JQuery. Asigurându-vă că înfășurați codul în etichete script deoarece adăugăm codul la un document HTML (nu la 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 );

Dacă aruncați o privire asupra codului, ar trebui să recunoașteți clasele CSS pe care le-am adăugat la buton și la secțiune.

Clasa Butonului („.et-toggle-button”) este utilizată pentru a viza elementul care va iniția o funcție în cursa hover-ului.

La plecare, funcția va găsi elementul cu clasa secțiunii „.et-change-style_section” și va comuta / adăuga o nouă clasă („.et-change-style-active”) atunci când cursorul se deplasează deasupra butonului.

Butonul este, de asemenea, vizat (prin „$ this”) pentru a comuta o nouă clasă („.et-toggle-button_active”) în starea hover.

Cheia pentru schimbarea stilurilor acestor elemente în cursa hover este adăugarea / comutarea acestor noi clase CSS suplimentare la secțiune și buton.

De exemplu, odată ce secțiunea cu clasa „.et-change-style_section” primește acea clasă suplimentară („.et-change-style_active”), putem folosi CSS personalizat pentru a modifica stilul secțiunii care i-a fost dată inițial prin opțiunile Divi încorporate.

Schimbarea stilului elementelor cu CSS personalizat

Deschideți modulul de cod și lipiți următorul CSS personalizat deasupra scriptului JQuery, asigurându-vă că îl înfășurați în etichetele de stil necesare.

 .et_pb_section.et-change-style_section.et-change-style_active {
   background-color:#484db0 !important;
 }

Observați că clasa secțiunii inițiale este combinată cu noua clasă ca selector. CSS care urmează se va aplica secțiunii numai atunci când este atașată acea nouă clasă. Când nu este atașat, va fi afișat designul original. În acest exemplu, culoarea de fundal a secțiunii se va schimba atunci când treceți cu mouse-ul peste buton.

Apoi, lipiți următoarele CSS suplimentare în etichetele de stil.

  .et-change-style_active .et-after-image {
    filter: opacity(100%);
  }
  .et-change-style_active .et-before-image {
    filter: opacity(0%);
  }  

Deoarece secțiunea părinte primește o clasă pe hover, puteți viza elementele secundare ale secțiunii (cum ar fi imaginile) folosind aceeași clasă CSS. Dar, deoarece este o clasă într-un container / secțiune părinte, Clasa CSS ar trebui să preceadă clasa elementului pe care doriți să îl modificați. În acest exemplu, Clasa CSS („.et-change-style_active”) dată secțiunii părinte vine înainte ca clasa să aibă imagini copil („.et-after-image” și „.et-before-image”).

CSS pentru imaginea de după va afișa imaginea pe butonul de deplasare. Iar CSS pentru imaginea anterioară va ascunde imaginea pe butonul de deplasare. Rezultatul este că imaginea inițială este schimbată cu una nouă pe butonul de deplasare.

Apoi lipiți în restul CSS î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 utilizează același concept pentru a schimba stilul elementului atunci când secțiunea (sau butonul) are noua clasă.

Rezultatul final (Hover)

Odată adăugat codul, salvați modificările și deschideți pagina pentru a vizualiza rezultatul. Observați modul în care elementele pe care le-am vizat sunt schimbate atunci când treceți cu mouse-ul peste buton.

Schimbarea stilurilor pe clic în loc de cursor

Dacă doriți să schimbați stilul acelorași elemente atunci când faceți clic pe buton (mai degrabă decât să plasați cursorul), tot ce trebuie să faceți este să faceți câteva modificări la JQuery. Majoritatea codului va rămâne la fel. Principala diferență este că metoda „hover” este înlocuită cu „click”. Și am adăugat un fragment util de cod care modifică textul butonului pe clic.

Pentru a adăuga funcționalitatea de clic, înlocuiți JQuery curent cu următoarele (din nou, asigurați-vă că este înfășurat în etichetele 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('See Before');
            } else {
                $this.text('See After');
            }
        });
    });
})( jQuery );

Iată rezultatul final.

Gânduri finale

Abilitatea de a viza și de a schimba stilul mai multor elemente dintr-o pagină atunci când treceți cu mouse-ul sau faceți clic pe ceva este o abilitate utilă în designul web. Puteți utiliza această tehnică pentru o varietate de cazuri de utilizare (înainte și după, CTA, etc ...) Sigur, vă ajută să cunoașteți puțin CSS și JS / JQuery. Dar, după cum ați văzut în acest tutorial, nu trebuie să cunoașteți un ton de cod pentru a obține rezultate surprinzătoare!

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!