Treci la conținutul principal

Cum de a crea secțiuni animate făcând clic pe Divi Builder

Divi: cea mai ușoară temă WordPress de utilizat

Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62. [Recomandat]

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

Această metodă necesită utilizarea jQuery. Marele lucru legat de această tehnică este că puteți utiliza setările de proiectare încorporate ale Divi pentru a stiliza proprietățile de transformare, apoi puteți activa (sau dezactiva) acele proprietăți de transformare cu un clic al mouse-ului. Acest lucru va deschide o mulțime de posibilități unice pentru a dezvălui conținut ascuns prin mutarea articolelor printr-un clic, mai degrabă decât prin deplasare. Și, de asemenea, ajută la reducerea nevoii de a ști multe despre 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

Aceasta va dezactiva (suprascrie) proprietatea de transformare și o va împiedica să se activeze inițial 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

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați cu ușurință orice design de site web cu un aspect profesionist. Nu mai plătiți scump pentru ceea ce puteți face singur. [Gratuit]

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%.

Căutați cele mai bune teme și pluginuri WordPress?

Descărcați cele mai bune pluginuri și teme WordPress pe Envato și creați cu ușurință site-ul dvs. Web. Deja mai mult de descărcări 49.720.000. [EXCLUSIV]

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

Creați ușor magazinul dvs. online

Descărcați gratuit WooCommerce, cele mai bune pluginuri de e-commerce pentru a vă vinde produsele fizice și digitale pe WordPress. [Recomandat]

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.

Acest articol conține comentarii 0

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate *

Acest site folosește Akismet pentru a reduce nedorite. Aflați mai multe despre modul în care sunt utilizate datele dvs. de comentarii.

Inapoi in top
2 acțiuni
acțiune2
tweet
Registru