Cum se transformă mai multe elemente pentru efecte de plutire abstractă în Divi

După cum știți deja până acum, Divi are o mulțime de setări de proiectare care vă permit să creați efecte de hover unice pentru orice element Divi (secțiuni, rânduri sau module). De obicei, un efect de plutire este izolat la un singur element. De exemplu, dacă adăugați o proprietate de rotire a transformării la un modul pe hover, rotația respectivă se va activa când treceți peste modul. Cu toate acestea, dacă adăugați un efect de hover suplimentar la rândul care conține modulul, acesta adaugă un alt strat de efecte de hover atunci când treceți peste modul. Aceasta deschide ușa pentru unele efecte de plutire abstracte.

În acest tutorial, vom explora modul de transformare a mai multor elemente pentru efecte de hover abstract folosind setările încorporate ale Divi. Și întrucât vom folosi rândurile puțin diferit pentru acest design, vă voi arăta cum să creați un aspect de grilă pentru rândurile dvs., astfel încât să puteți prezenta aceste efecte de plutire într-o galerie (dacă doriți).

Să începem.

Trage cu ochiul

Descărcați GRATUIT transformarea mai multor elemente pe aspectul Hover

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 în pagina dvs., pur și simplu extrageți fișierul zip și trageți fișierul json în Divi Builder.

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

Noțiuni de bază

Abonați-vă la canalul nostru Youtube

Pentru acest tutorial, veți avea nevoie de următoarele:

1. Tema Divi instalată și activă
2. Câteva imagini. Folosesc imagini din aspectele noastre premade accesibile din Divi Builder

Odată ce sunteți gata, accesați tabloul de bord WordPress. Apoi creați o pagină nouă (Pagini> Adăugare nouă), dați un titlu paginii dvs. și implementați Divi Builder. Alegeți opțiunea „Construiți de la zero”.

Acum pânza ta goală așteaptă!

Efecte plutitoare abstracte pentru o imagine

Acest prim design va combina efectele de deplasare a transformării înclinate pe rând și modulul de imagine pentru a crea un efect de ventilare a imaginii noastre în cursă. În afară de a arăta cool, acest efect poate servi și ca o interacțiune de interfață utilă, care îi permite utilizatorului să știe că, făcând clic pe imagine, veți vedea mai multe imagini. Așadar, puteți utiliza imaginea ca un link către pagina galeriei, dacă doriți.

Iată cum să o faci.

Mai întâi creați o nouă secțiune obișnuită cu un rând cu o coloană.

Apoi adăugați un modul de imagine pe rând.

Apoi, adăugați încărcați o imagine în modul.

Adăugați efecte de trecere a modulului de imagine

Acum putem adăuga câteva efecte de transformare la imagine care vor roti și vor înclina imaginea. Pentru aceasta, accesați opțiunile de transformare și actualizați următoarele:

Axa X și Y de transformare: 110%

Transformare Rotire axa Z: 9 grade

Transformă axa X și Y înclinată: 3deg

Asta e! Destul de simplu. Acum trebuie să personalizăm rândul pentru a adăuga un alt efect de hover care se va activa atunci când treceți peste elemente.

Setări rând

Pentru ca acest design să funcționeze, rândul va trebui să aibă aceeași dimensiune ca și imaginea din interior, astfel încât zona de deplasare să fie aceeași pentru ambele. Acest lucru ne va permite să adăugăm diferite efecte de hover atât pentru modul cât și pentru rândul care se va activa atunci când treceți peste modul (sau în acest caz imaginea). Acest lucru funcționează deoarece deplasarea deasupra unui modul din interiorul unui rând va activa efectele de deplasare la fel ca în cazul în care plasați deasupra rândului. Și, deoarece avem un efect de hover diferit asupra modulului, ambele efecte de hover se vor activa atunci când treceți peste modul. Acest lucru ne permite să folosim o combinație de efecte de plutire abstracte folosind umbra cutiei, transformarea înclinării și transformarea rotirii atât pe rând, cât și pe modul.

Avem deja efectele de hover ale modulului pentru imaginea noastră, acum trebuie să ajustăm dimensiunea rândului nostru. În funcție de dimensiunea imaginii, modulul ar trebui să se întindă pe întreaga lățime a rândului, astfel încât, din punct de vedere tehnic, nu este nevoie să reglați lățimea rândului. Dar, pentru acest exemplu, voi micșora rândul pentru a face loc efectelor noastre de plutire.

Actualizați setările rândului după cum urmează:

Lățime maximă: 400 px

Deoarece dorim ca înălțimea rândului nostru să se potrivească cu imaginea din interiorul acestuia, trebuie să scăpăm de umplutura implicită de sus și de jos:

Împletire personalizată: 0 px sus, 0 px jos

Acum trebuie să adăugăm o imagine de fundal în coloana rândului. Această imagine de fundal va fi vizualizată ori de câte ori modulul de imagine transformă efectul de deplasare distorsionează și se rotește.

Coloana 1 Imagine de fundal: [introduceți imaginea]

Continuați să actualizați rândul cu o umbră de casetă pe hover, după cum urmează:

Box Shadow: vezi captura de ecran
Poziție orizontală a umbrei casetei: 0 px (implicit), -30 px (pluteste)
Poziție verticală a umbrei casetei: 0 px (implicit), -15 px (plutire)
Culoare umbră: # 002f66

Această umbră de casetă adaugă efectul unei alte imagini care apare în spatele imaginii de fundal a rândului, care va apărea odată ce adăugăm efectele noastre de transformare care se vor roti și vor înclina imaginea de fundal în vizualizare.

În cele din urmă, suntem gata să adăugăm o proprietate de transformare înclinată pentru a adăuga un efect suplimentar de plutire pentru rând.

Transformați axa X și Y: -3deg

Rezultat final

Iată rezultatul final.

Și va escalada frumos și pe mobil.

Efecte plutitoare abstracte pentru un îndemn (exemplu 1)

Setări rând

Creați o nouă secțiune obișnuită cu un rând de o coloană.

Apoi actualizați setările rândului după cum urmează:

Coloana 1 Gradient de fundal Culoare stânga: rgba (34,43,58,0.71)
Coloana 1 Gradient de fundal Culoare dreaptă: # 222b3a
Imagine de fundal: [inserați imaginea]
Lățime maximă: 400 px
Împletire personalizată: 0 px sus, 0 px jos

Ne vom întoarce la setările rândului pentru a finaliza efectele noastre de plutire abstractă într-un pic, dar, deocamdată, să adăugăm apelul la modulul de acțiune pe rând.

Setări modul de apel la acțiune

Deschideți setările modulului Apel la acțiune și actualizați conținutul după cum urmează:

Titlu: Călătorie cu puncte
Text buton: Faceți clic aici
Conținut: doar pentru o perioadă limitată
URL link buton: # (doar pentru a activa butonul deocamdată)
Folosiți culoarea de fundal: NU

Apoi actualizați setarea de proiectare pentru textul și spațiul modulului.

Titlu Font: Gilda Display
Dimensiune text buton: 16 px
Culoarea textului butonului: # ffb238
Culoarea fundalului butonului: rgba (0,0,0,0)
Lățimea chenarului butonului: 0 px

Căptușeală personalizată: 20% sus, 20% jos

Acum adăugați o margine la modul.

Lățimea chenarului: 2 px
Culoare margine: # 222b3a

Aceasta se ocupă de designul nostru implicit. Acum este timpul pentru partea distractivă. Amintiți-vă, deoarece rândul și modulul nostru au în esență aceeași dimensiune (înălțime și lățime), zona de deplasare va fi aceeași pentru ambele. Cu alte cuvinte, efectele de hover pe care le adăugăm rândului și modulului se vor activa ambele când treceți peste elemente. Acest lucru ne permite să folosim o combinație de efecte de plutire abstracte folosind umbra cutiei, transformarea înclinării și transformarea rotirii atât pe rând, cât și pe modul.

Să începem cu efectele de hover rând.

Efecte de plutire la rând

Mai întâi, putem adăuga o umbră de casetă pe hover la rândul nostru. Deschideți setările rândului și actualizați următoarele:

Box Shadow: vezi captura de ecran
Poziție orizontală a umbrei casetei: 0 px (implicit), 90 px (plutitor)
Poziție verticală a umbrei casetei: 0 px (implicit), 80 px (plutitor)
Puterea răspândirii umbrei casetei: 0 px (implicit), -40 px (plutitor)

Culoare umbră: # ffb238

Rețineți că umbra casetei va moșteni și opțiunile de transformare pe care le vom adăuga în continuare.

Acum, să adăugăm o proprietate de rotire și de înclinare a transformării pe hover.

Transformare Rotire axa X (hover): 10 grade
Transformă axa X înclinată (plasați): -4 grade
Transformă axa Y înclinată (pluteste): -4 grade

Aceasta are grijă de efectele de deplasare pe rând. Acum trebuie să adăugăm efectul hover la modulul Call to Action care va finaliza proiectarea.

Efecte de deplasare a modulului de apel la acțiune

Deschideți setările modulului de apelare la acțiune și dați-i un efect de deplasare la umbră în casetă după cum urmează:

Box Shadow: vezi captura de ecran
Poziție orizontală a umbrei cutiei: 0 px
Box Shadow Vertical Position: 0 px (implicit), 30 px (pluteste)
Culoare umbră: #ffffff

În cele din urmă, adăugați o scală, rotiți și înclinați proprietatea de transformare pe hover după cum urmează:
Axa X și Y de transformare (plutire): 115%
Transformare Rotire axa Z (hover): 9 grade
Transformă axa X înclinată (pluteste): 3deg
Transformă axa Y înclinată (pluteste): 3deg

Mărirea dimensiunii modulului folosind scala la hover va ajuta la minimizarea șanselor ca utilizatorul să treacă peste elementul rând în loc de modul.

Rezultat final

Iată rezultatul final al efectului de plutire abstractă. Observați modul în care atât efectele de deplasare pe rând, cât și efectele de deplasare a modulului se activează la deplasare pentru a distorsiona elementele pentru un design abstract.

Iată cum va arăta efectul hover pe mobil. Cu toate acestea, deoarece majoritatea browserelor mobile necesită o atingere pentru a activa efectul de hover, poate doriți să dezactivați efectul de hover pe mobil pentru a evita ca utilizatorul să fie nevoit să atingă de două ori dacă utilizați modulul ca o legătură.

Efecte plutitoare abstracte pentru un îndemn (exemplu 2)

Pentru a începe proiectul cu următorul efect de hover abstract, să duplicăm secțiunea care conține primul nostru exemplu. Acum tot ce trebuie să facem este să facem câteva ajustări minore ale designului și să plutim efectele pentru un design unic.

Actualizați setările rândului

Mai întâi, actualizați setările rândului după cum urmează:

Transformare Rotire axa Z: -5 grade
Transformă axa X și Y înclinată: -4 grade

Actualizați setările modulului Apel la acțiune

Acum să modificăm setările modulului după cum urmează:

Mai întâi, scoateți granița ...

Lățimea chenarului: 0 px

Apoi actualizați umbra casetei după cum urmează:

Box Shadow Poziție orizontală: 0 px
Box Shadow Vertical Position: 110 px
(asigurați-vă și dezactivați efectul de hover moștenit de la designul anterior pe care l-ați duplicat)
Culoare umbră: # ffb238

Acum putem actualiza efectele noastre de transformare a proprietății. Aici, practic, micșorăm scara un pic și adăugăm valori negative la proprietățile noastre anterioare de rotire și de înclinare pentru a muta elementul în direcția opusă în timpul deplasării.

Actualizați următoarele opțiuni de transformare:

Axa X și Y de transformare (planare): 110%
Transformare Rotire axa Z (hover): -9 grade
Transformă axa X înclinată (pluteste): -3 grade
Transformă axa Y înclinată (plimbare): -3 grade

Crearea unui aspect de grilă pentru rândurile dvs.

Deoarece acest design necesită rândul părinte să se înfășoare în jurul modulului și să aibă aceeași înălțime și lățime, nu aveți cu adevărat capacitatea de a crea un aspect de coloană așa cum ați face în mod normal, cu toate acestea, puteți utiliza proprietatea flex pentru a vă alinia rândurile orizontal într-un aspect al grilei.

Pentru a face acest lucru, mai întâi duplicați rândul care conține modulul dvs. de câteva ori, astfel încât să aveți trei rânduri într-o singură secțiune.

Apoi adăugați o marjă personalizată la fiecare dintre rânduri:

Marjă personalizată: 50 px sus, 50 px jos

Apoi deschideți setările secțiunii și pur și simplu adăugați următorul CSS personalizat la Elementul principal.

display: flex;
flex-wrap: wrap;

Acum aveți trei coloane de rânduri care vor răspunde cu dimensiunea browserului.

Gânduri finale

Transformarea mai multor elemente pe hover oferă un alt nivel de creativitate pe care îl puteți explora. Exemplele din acest tutorial au fost menite să vă arate ce este posibil, dar nu ezitați să modificați design-urile pentru propriul dvs. proiect. După cum v-ați putea aștepta, puteți deveni destul de nebun dacă doriți. Dar puteți fi, de asemenea, un pic mai conservator pentru a crea un element subtil de proiectare a interacțiunii, cum ar fi exemplul modulului de imagine din acest tutorial.

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

Noroc!