Creați cu ușurință site-ul dvs. web astăzi!

ELEMENTOR este cel mai simplu Blog Builder din lume!

Stop pierdere de timp și mulți bani să plătești un dezvoltator când poți Creați-vă cu ușurință site-ul sau blogul WordPress cu un design profesional doar cateva minute ! Nu sunt necesare cunoștințe tehnice.

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 alege chiar să transformați elementele în stare de hover pentru 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. Lucrul grozav la această tehnică este că puteți utiliza parametrii de proiectare încorporați ai Divi pentru a atribui un stil proprietăților de transformare, apoi activați (sau dezactivați) aceste proprietăți de transformare cu un clic de mouse. Acest lucru va deschide o mulțime de posibilități unice de dezvăluire a conținutului ascuns prin mutarea elementelor prin clic, mai degrabă decât 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, nu aveți nevoie decât de Divi. Pentru a începe, accesați tabloul de bord WordPress. Creați o pagină nouă, dați un titlu paginii dvs. și continuați proiectarea pe generatorul Divi din prim-plan. Selectați opțiunea „Construiți de la zero”. Acum sunteți gata să plecați!

Ideea de bază a fost explicată

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

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

Blurb setări divi

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

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

Destul de simplu. Și să presupunem că ați dorit să adăugați aceeași opțiune de transformare a mouse-ului Trebuie doar să aplicați proprietatea de transformare pentru starea de deplasare în setările Divi Builder.

Divi hover animation

Iar codul va arăta așa în spatele scenei:

.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 un anumit cod javascript pentru a declanșa un eveniment de clic pe element (sau modul de text).

Cu exemplul nostru actual, obiectivul nostru principal este practic să transformăm proprietatea de transformare „transformare: rotireZ (20deg)” activată și dezactivată la clic. O modalitate ușoară de a face acest lucru este de a crea o clasă CSS personalizată cu proprietatea „transformator: none!” Important ”în setările paginii (sau a foii de stil externe). Ar arăta cam așa.

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

Parametrii paginii divi

Cu acel CSS la locul său. Putem adăuga clasa CSS „comutare-transformare-animație” la elementul modulului blurb care are proprietatea noastră de transformare.

Rezumatul parametrilor

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

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

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

Divi transformă proprietățile pe clic

Apoi accesați Divi> Opțiuni temă> Integrare și adăugați următorul script jQuery în capul blogului dvs.:

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 faceți clic pe modulul de prezentare, proprietatea de transformare pe care ați adăugat-o la prezentare în Divi va fi activată sau dezactivată.

Imagine de animație

Haideți să construim acum un exemplu, astfel încât să puteți vedea cum poate fi util acest lucru pentru propriile proiecte.

Modificarea proprietăților de transformare pe Click pentru a afișa conținut în Divi

Pentru acest exemplu, vom rămâne cu un exemplu simplu de blurb folosit mai sus. Apoi, vom adăuga un blurb suplimentar în spatele acestuia, astfel încât de fiecare dată când faceți clic pe blurbul superior, să apară pentru a dezvălui conținutul blurb suplimentar așezat în spatele vârfului. document.

Crearea modulelor Blurb în față și în spate

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

Modulați rezumatul diviActualizați conținutul textului aspectului pentru a include doar un titlu (eliminați conținutul implicit al corpului) și adăugați o pictogramă de prezentare.

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

Culoarea fundalului: #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 spațiul modulului divi

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

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

Modul rezumat duplicat divi

Apoi, pe al doilea modul, eliminați pictograma de prezentare (și imaginea implicită) și adăugați din nou conținutul corpului la modul. Apoi actualizați parametrii de proiectare după cum urmează:

Culoare fundal: rgba (76,88,102,0.3)
Culoarea textului: Negru
Plăci personalizate: 20% sus

Modificați fontul și fundalul Divi

Poziționați modulul înainte de Sumar

Acum, când cele două blurbs-urile noastre sunt stilate, trebuie să ne întoarcem la blurb-ul frontal (de sus) și să îl poziționăm deasupra blurb-ului din spate (jos). Pentru a face acest lucru, îi vom oferi 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 de prezentare sus / față și actualizați următoarele:

înălțime: 100%;
lățime: 100%;

Divi transformă proprietățile pe clic

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

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

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

Z index: 2000

Personalizați modulul css divi

Poziția absolută, combinată cu înălțimea și lățimea de 100% și indexul z, asigură faptul că modulul blurb rămâne deasupra 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 „cursorul: indicatorul” este să schimbe cursorul astfel încât elementul să poată fi făcut clic pentru utilizator.

Adăugarea de opțiuni de transformare și clase personalizate în blurb-ul frontal

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

Sub parametrii de proiectare a blurului din față, adăugați următoarele proprietăți de transformare:

Scara de transformare X și y: 20%

Transformarea Divi

Transformă originea: centrul de sus

Modificare transformare divi

Amintiți-vă că designul de transformare pe care îl vedeți în acest moment va fi cel declanșat la clic. Pur și simplu profităm de constructorul Divi pentru a obține designul dorit. În acest caz, blurbul frontal se contractă și devine centrat în partea de sus a acestuia, ca o pictogramă care poate fi făcută clic.

După ce ați terminat, adăugați cele două clase CSS necesare pentru a viza blurul frontal 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)

Divi transformă proprietățile pe clic

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

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

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

Acum accesați Divi> Opțiuni temă> Integrare și adăugați următorul script jQuery în 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.

Anulație modul de divizare blurb

Puteți utiliza acest exemplu pentru a crea modele și mai impresionante. Nu ezitați să vă împărtășiți părerea în secțiunea de comentarii.

%d bloggerilor le place această pagină: