Opțiunile de transformare încorporate ale Divi s-au dovedit a fi un instrument de design extrem de util, permițându-vă să redimensionați, să rotiți, să înclinați sau să poziționați orice element pe o pagină cu ușurință. Și puteți chiar alege să transformați elementele într-o stare de hover pentru a obține efecte grozave de hover. Așa că astăzi vă vom arăta cum să implementați aceste animații cu un singur clic.

Această metodă necesită utilizarea jQuery. Cea mai bună parte a acestei tehnici este că puteți utiliza parametrii de proiectare încorporați ai Divi pentru a stila proprietățile de transformare, apoi activați (sau dezactivați) acele proprietăți de transformare cu un clic de mouse. Acest lucru va deschide o mulțime de posibilități unice de dezvăluire cuprins ascuns prin mutarea elementelor la clic, în loc să treacă cu mouse-ul. Și, de asemenea, ajută la reducerea nevoii de a cunoaște o mulțime de CSS.

Să începem.

Ce ai nevoie pentru a începe

Pentru acest tutorial, tot ce ai nevoie este Divi. Pentru a începe, accesați tabloul de bord WordPress. Creați o pagină nouă, dați paginii dvs. un titlu și continuați să proiectați în generatorul Divi din prim-plan. Selectați opțiunea „Construiți de la zero”. Acum ești gata să pleci!

Ideea de bază este explicată

Înainte de a intra în prea multe detalii în acest tutorial, voi explica cum funcționează această tehnică în câteva cuvinte.

De fiecare dată când personalizați un element (secțiune, rând sau modul) în Divi, adăugați CSS personalizat la acel element în fundal. De exemplu, folosind setările încorporate ale Divi, puteți adăuga o proprietate de rotație de transformare la un modul blurb, astfel încât acesta să rotească modulul de-a lungul axei Z cu 20 de grade.

Blurb divi setări

Dar în culise, creați CSS personalizat care este adăugat la acest modul de text și arată astfel:

.et_pb_text_0 { transform: rotateZ(20deg); }

Destul de simplu. Și să presupunem că doriți să adăugați aceeași opțiune de transformare la trecerea cursorului. Trebuie doar să aplicați proprietatea de transformare pentru starea hover în setările Divi Builder.

Animație de rotație pe hover divi

Și codul va arăta cam așa în culise:

.et_pb_text_0:hover { transform: rotateZ(20deg); }

Cu toate acestea, dacă doriți să implementați proprietatea de transformare la clic, lucrurile vor trebui să funcționeze puțin diferit. Va trebui să introduceți cod javascript pentru a declanșa un eveniment de clic pe element (sau modul de text).

Cu exemplul nostru actual, obiectivul nostru principal este, în esență, să activăm și să dezactivăm proprietatea de transformare „transform:rotateZ(20deg)” la clic. O modalitate ușoară de a face acest lucru este să creați o clasă CSS personalizată cu „transformer: none! Important” în setările pentru pagină (sau foaia de stil externă). Ar arăta cam așa.

.toggle-transform-animation { transform: none !important; }

Setările paginii div

Cu acest CSS la loc. Putem adăuga clasa CSS „toggle-transform-animation” la elementul modulului blurb care are proprietatea noastră de transformare.

Parametri de rezumat

Acest lucru va dezactiva (înlocui) proprietatea de transformare și va împiedica activarea ei inițială chiar dacă stilul proprietății de transformare a fost deja adăugat la ea.

Acum tot ce rămâne este să activați (adăugați și eliminați) această clasă CSS personalizată când faceți clic pe element. Deci, de fiecare dată când facem clic pe element, clasa va fi eliminată și proprietățile de transformare (cele pe care le-ați adăugat cu Divi) vor fi implementate.

Iată un exemplu simplu despre cum să faci asta. Mai întâi, adăugați o altă clasă CSS la modulul blurb numit „transform_target”.

Proprietăți Divi Transform la clic

Apoi, accesați Divi > Opțiuni teme > Integrare și adăugați următorul script jQuery la capul blogul tău:

jQuery(document).ready(function() { 
    jQuery('.transform_target').click(function(){
        jQuery(this).toggleClass('toggle-transform-animation');
    }); 
});

Adăugați secțiunea de integrare divi

Asta e tot ! Acum, de fiecare dată când dați clic pe modulul de prezentare, proprietatea de transformare pe care ați adăugat-o prezentării în Divi va fi activată sau dezactivată.

Fotografie de animație

Acum să construim un exemplu, astfel încât să puteți vedea cum ar putea fi util pentru propriile proiecte.

Cum să comutați Transformarea proprietăților la clic pentru a afișa conținut în Divi

Pentru acest exemplu, vom rămâne cu un exemplu simplu, folosit mai sus. În continuare, vom adăuga o informație suplimentară în spatele acesteia, astfel încât de fiecare dată când faceți clic pe anunțul de sus, acesta se va îndepărta pentru a dezvălui cuprins informație suplimentară care se află în spatele documentului.

Crearea modulelor Blurb față și spate

Apoi adăugați un modul de prezentare la coloana 1.

Modulați rezumatul diviActualizați cuprins blurb pentru a include doar un titlu (eliminați conținutul implicit al corpului), apoi adăugați o pictogramă blurb.

Personalizați modulul rezumat diviApoi actualizați parametrii de proiectare după cum urmează:

Culoare de fundal: #4c5866
Culoare pictogramă: #ffffff
Orientarea textului: centru
Culoarea textului
: Marja personalizată ușoară: 0px în partea de jos
Garnitură personalizată: 15% în partea de sus, 15% în partea de jos, 10% în stânga, 10% în dreapta

Modificați distanța dintre modulele divi

Vom reveni la acest modul mai târziu, dar deocamdată trebuie să creăm cel de-al doilea modul Blurb, care va servi ca modul „retur” cu conținut suplimentar.

Pentru a face acest lucru, duplicați modulul de prezentare pe care tocmai l-ați creat.

Modul rezumat divi duplicat

Apoi, pe al doilea modul, eliminați pictograma de prezentare (și imaginea implicită) și adăugați conținutul corpului înapoi în modul. Apoi actualizați setările de design după cum urmează:

Culoare fundal: rgba (76,88,102,0.3)
Culoare text: negru
Căptușeală personalizată: 20% înaltă

Schimbați fontul și fundalul împărțit

Poziționați modulul frontal Rezumat

Acum, că ambele noastre informații sunt stilate, trebuie să ne întoarcem la panoul din față (sus) și să o poziționăm deasupra panoului din spate (de jos). Pentru a face acest lucru, îi vom da o poziție absolută cu o înălțime de 100% și o lățime de 100%.

Mai întâi, deschideți setările modulului Aspect sus/față și actualizați următoarele:

inaltime: 100%;
latime: 100%;

Proprietăți Divi Transform la clic

Apoi adăugați următorul cod CSS personalizat la elementul principal:

poziție: absolut !important; tranziție: toate .5s;

Apoi actualizați indexul z după cum urmează:

Z index: 2000

Personalizați modulul css divi

Poziția absolută, combinată cu 100% înălțime și lățime și indicele z, asigură că modulul blurb rămâne deasupra modulului blurb din spatele acestuia. Proprietatea de tranziție este de fapt durata tranziției opțiunilor de transformare pe care le vom implementa la următorul clic. Și „cursor:pointer” este de a schimba cursorul, astfel încât elementul să apară pe care îl poate face clic pentru utilizator.

S-au adăugat opțiuni de transformare și clase personalizate în panoul din față

Acum este timpul să adăugăm proprietățile noastre de transformare la panoul din față. Vom adăuga apoi clasele CSS personalizate necesare la jQuery pentru a comuta aceste proprietăți la clic.

Sub setările de proiectare a panoului frontal, adăugați următoarele proprietăți de transformare:

Scala de transformare x și y: 20%

Transformare div

Originea transformării: centru sus

Modificarea transformării divi

Amintiți-vă că designul de transformare pe care îl vedeți în acest moment va fi cel declanșat prin clic. Pur și simplu profităm de constructorul Divi pentru a obține designul dorit. În acest caz, panoul din față se micșorează și devine centrat în partea de sus ca o pictogramă pe care se poate face clic.

După ce ați terminat, adăugați cele două clase CSS necesare pentru a viza blurbul din față cu jQuery, după cum urmează:

Clasa CSS: toggle-transform-animation transform_target

(asigurați-vă că separați fiecare nume de clasă cu un spațiu)

Proprietăți Divi Transform la clic

Apoi, adăugați următorul fragment CSS personalizat care va fi folosit pentru a activa și dezactiva proprietățile de transformare cu jQuery.

.toggle-transform-animation { transform: none !important; }

Setările paginii divVeți observa că proprietățile de transformare pentru blurb frontal adăugate anterior au fost dezactivate deoarece această clasă i-a fost aplicată.

Acum navigați la Divi > Opțiuni teme > Integrare și adăugați următorul script jQuery la capul blogului:

jQuery(document).ready(function() { 
    jQuery('.transform_target').click(function(){
        jQuery(this).toggleClass('toggle-transform-animation');
    }); 
});

Adăugați secțiunea de integrare divi

Să vedem rezultatul final.

Blurb pentru modulul divi de animație

Puteți folosi acest exemplu pentru a crea modele și mai impresionante. Vă rugăm să nu ezitați să vă împărtășiți gândurile în secțiunea de comentarii.