Cum să recreați previzualizările pachetului de layout al ET cu efecte de deplasare a fan-out-ului în Divi

Una dintre caracteristicile interesante ale noului design al site-ului web elegantthemes.com este previzualizările pachetului de layout premade de pe pagina produsului Divi. Ceea ce face acest design unic este modul în care fiecare pachet de aspect este prezentat cu trei imagini separate care se evidențiază în plan.

Astăzi, vă vom arăta cum să recreați designul previzualizărilor pachetului nostru de layout cu același efect impresionant de hover hover în Divi. Deoarece designul este ceva mai avansat, vom folosi unele CSS personalizate în combinație cu opțiunile de proiectare încorporate ale Divi. Dar nu vă faceți griji, nu va dura mult timp pentru a construi și rezultatul merită cu siguranță.

Să începem.

Trage cu ochiul

Iată o privire asupra previzualizărilor pachetului de layout cu un efect de hover fan-out. Observați că rândul de jos are un efect secundar de deplasare care rotește imaginile separat pe deplasare.

Aspectul cu trei coloane de pe desktop se va regla la o coloană de pe tabletă și telefon.

Descărcați GRATUIT aspectul previzualizării pachetului Layout cu efecte 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?

Abonați-vă la canalul nostru Youtube

Ce trebuie să începeți

Pentru a începe, va trebui să aveți următoarea configurare:

1. Tema Divi instalată și activă
2. O nouă pagină creată pentru a crea de la zero pe constructorul frontal (vizual) Divi.
3. Trei imagini pentru a fi utilizate pentru conținut fals. Pentru cele mai bune rezultate, imaginile ar trebui să aibă aproximativ 250 x 375 px. Deoarece acestea sunt previzualizări ale paginilor web, puteți crea propriile capturi de ecran ale oricărui design de pagină și apoi decupați / redimensionați fiecare imagine în consecință.

După aceea, veți avea o pânză goală pentru a începe să construiți câteva file de plutire în Divi.

Recreați previzualizările pachetului de prezentare ET cu efecte de deplasare a fan-out-ului în Divi

Construirea secțiunii și rândului

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

Înainte de a adăuga module, deschideți setările rândurilor și actualizați dimensiunea și spațiul după cum urmează:

• Lățimea jgheabului: 2
• Lățime: 90%
• Lățime maximă: 1120 px (desktop), 400 px (tabletă)

Apoi adăugați niște umplutură pe rândul de pe tabletă pentru mai mult spațiu pe mobil.

• Coloana 1 Căptușeală: 20% jos
• Coloana 2 Căptușeală: 20% jos
• Coloana 3 Căptușeală: 20% jos

Adăugarea imaginii 1

Acum suntem gata să adăugăm prima dintre cele trei imagini care vor compune designul nostru de previzualizare a pachetului de layout. Continuați și adăugați un modul de imagine în coloana 1.

Apoi încărcați imaginea în modulul de imagine (ar trebui să aibă o dimensiune de aproximativ 250 px cu 375 px).

Apoi actualizați setările de proiectare după cum urmează:

• Aliniere imagine: centru
• Lățime: 220 px
• Vertical Overflow: ascuns
• Indice Z: 4

Întrucât trebuie să vizăm containerul de imagini (nu imaginea în sine), trebuie să adăugăm o înălțime personalizată, o umbră a cutiei și o rază a chenarului utilizând CSS personalizat. Adăugați următorul CSS la elementul principal:

height: 240px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

Acest lucru va permite imaginii să se adapteze odată cu conținutul imaginii atunci când vom adăuga efectul hover mai târziu. După cum puteți vedea acum, imaginea a fost ușor tăiată în partea de jos, deoarece avem o înălțime personalizată de 240 px și depășirea setată la „ascuns”.

Adăugarea imaginii 2

Pentru a crea a doua imagine, adăugați un nou modul de imagine sub primul modul de imagine din coloana 1. Apoi încărcați o nouă imagine (250X350) în modul.

Apoi, trebuie să poziționăm imaginea în spatele și ușor în stânga imaginii 1. Pentru a face acest lucru, va trebui să adăugăm o lățime și o înălțime personalizate cu revărsarea verticală ascunsă (la fel cum am făcut cu imaginea 1). Principala diferență aici este că trebuie să oferim imaginii o poziție absolută, astfel încât să se afișeze în partea stângă sus a coloanei din spatele imaginii 1.

Pentru a face acest lucru, actualizați următoarele:

• Lățime: 180 px
• Vertical Overflow: ascuns

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

position: absolute !important;
top: 12px;
left: 25px;
height: 200px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

Adăugarea imaginii 3

Acum suntem gata să adăugăm a treia imagine pentru a finaliza previzualizarea pachetului de layout. În acest moment este logic să folosiți modul de vizualizare wireframe, deoarece avem unele suprapuneri care îngreunează utilizarea constructorului vizual. Implementați modul wireframe și copiați imaginea 2.

Am duplicat imaginea pentru că dorim să preluăm majoritatea setărilor pe care le-am folosit pentru imaginea 2. Singura diferență (în afară de o imagine nouă) este că trebuie să poziționăm imaginea spre dreapta în loc de stânga.

Deschideți imaginea duplicată (imaginea 3) și actualizați modulul de imagine cu o imagine nouă (250 × 375).

Apoi actualizați CSS personalizat schimbând proprietatea poziției left într-o proprietate poziție right . Nu sunt necesare alte modificări ale CSS.

Dacă preferați, puteți copia și lipi următorul CSS în Elementul principal pentru a înlocui CSS curent.

position: absolute !important;
top: 12px;
right: 25px;
height: 200px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

Până acum, bine

Iată rezultatul final de până acum.

Designul este de fapt foarte frumos așa cum este, dar hai să-l ridicăm cu o crestătură, cu un efect de hover fan-out.

Adăugarea CSS a efectului Hover Fan-Out

În mod normal, dacă ar avea de-a face cu o singură imagine, am putea adăuga cu ușurință efecte de plutire folosind opțiunile Divi încorporate. Dar acest efect de deplasare a fan-out-ului necesită să angajăm starea de plutire a mai multor elemente copil (imagini) simultan când treceți peste coloana părinte. Când plasați cursorul peste coloană, dorim ca următoarele să realizeze următoarele ajustări ale imaginilor.

1. Adăugați o durată de tranziție fiecărei imagini pentru o tranziție lină la trecerea cu mouse-ul.
2. Reglați imaginea 1 pentru a avea o lățime de 180 px și o înălțime de 240 px. Acest lucru va face ca containerul de imagini să crească mai înalt și mai îngust pentru a afișa mai mult din imagine.
3. Reglați imaginile 2 și 3 pentru a avea o lățime de 160 px și o înălțime de 220 px. Acest lucru va determina, de asemenea, imaginile să crească mai înalte și mai înguste pentru a arăta mai mult din imagine.
4. Reglați imaginea 2 pentru a roti 5 grade în sens invers acelor de ceasornic și mișcați ușor spre stânga. Putem face acest lucru adăugând o valoare de -5 grade transform:rotate proprietate și ajustarea valorii proprietății poziției left la 0.
5. Reglați imaginea 3 pentru a roti 5 grade în sensul acelor de ceasornic și mișcați ușor spre dreapta. Putem face acest lucru adăugând o valoare de 5 grade transform:rotate proprietatea și reglați valoarea proprietății poziției right la 0.

Pentru a adăuga CSS-ul personalizat necesar pentru aceste efecte de deplasare, trebuie să adăugăm o clasă CSS personalizată la rândul care conține imaginile. Acest lucru ne va permite să aplicăm CSS personalizat numai imaginilor dintr-un anumit rând.

Deschideți setările de rând și adăugați următoarea clasă CSS.

• Clasa CSS: imagini fan-out

Pentru a adăuga CSS personalizat la pagină, deschideți setările paginii și adăugați următoarele CSS personalizate în fila Advanced.

/**transition duration and speed curve**/
.fan-out-images .et_pb_image {
  -webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
  transition: 300ms all cubic-bezier(.4,0,.2,1);
}
/**Change width and height of image 1 on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:first-child {
  width: 160px;
  height: 240px;
}
/**Change width and height of image 2 and 3 on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2), .fan-cards .et_pb_column:hover .et_pb_image:nth-child(3) {
  width: 160px;
  height: 220px;
}
/**Rotate image 2 counterclockwise and move to the left on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2) {
  left: 0;
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
/**Rotate image 3 clockwise and move to the right on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(3) {
  right: 0;
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);
}

Am adăugat un comentariu deasupra fiecărui fragment de css pentru a vă reaminti ce face fiecare.

Odată ce ai terminat. Verificați rezultatul final.

Rezultat final

Efect opțional de deplasare: rotirea imaginilor 1 și 2 separat pe Hover

Pentru a adăuga un alt nivel de implicare la imaginile de previzualizare a pachetului de layout, putem face ca rotația imaginii 1 și a imaginii 2 să aibă loc separat de efectul de hover inițial. Acest lucru va permite utilizatorului să interacționeze cu imaginile într-un mod unic. Puteți adăuga chiar și linkuri separate sau previzualizări ale casetei lightbox la acele imagini, dacă doriți.

Iată cum o faci.

Scoaterea proprietăților de transformare din Setări pagină CSS personalizat

Mai întâi, trebuie să scoateți cele două linii de CSS personalizate care rotesc imaginea atunci când treceți peste coloană. Deschideți setările de pagină CSS personalizate și eliminați următoarele:

  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);

  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);

Adăugarea proprietăților de transformare pe Hover pentru imaginea 2

Apoi deschideți setările modulului de imagine pentru imaginea 2 și utilizați opțiunile de transformare încorporate ale lui Divi pentru a adăuga aceeași valoare de rotire a transformării pe care am șters-o anterior pentru starea de deplasare.

• Transformare Rotire Axa Z (plimbare): -5 grade
• Transformă axa X Traducere (hover): -20px

Adăugarea proprietăților de transformare pe Hover pentru imaginea 3

Apoi actualizați setările modulului de imagine pentru imaginea 3 pentru a adăuga proprietatea de rotire a transformării.

• Transformare Rotire Axa Z (plimbare): 5 grade
• Transformă axa X Traducere (plasați cu mouse-ul): 20 px

Acum verificați rezultatul final.

Rezultat final

Adăugarea de linkuri la imagini

Dacă doriți să creați linkuri de redirecționare pentru a prezenta un anumit pachet de aspect sau un design de pagină pe o pagină separată, cel mai bine ar fi să adăugați aceeași adresă URL de link la toate cele trei imagini din pachet. Pentru a face acest lucru, deschideți fiecare dintre modulele de imagine și adăugați adresa URL a linkului.

Adăugarea noilor previzualizări ale pachetului de layout la celelalte coloane

Pentru a finaliza designul, putem copia cele trei imagini din coloana 1 și le putem lipi în coloana 2 și coloana 3.

După aceea, tot ce trebuie să faceți este să actualizați fiecare dintre imaginile din coloana 2 și 3 cu altele noi.

Asta e!

Design final

Iată designul final. Rândul de sus arată efectul hover hover hover atunci când treceți peste coloană. Al doilea rând arată efectul secundar de deplasare a ventilatorului adăugat la imaginea 2 și 3 separat.

Aspectul cu trei coloane de pe desktop se va regla la o coloană de pe tabletă și telefon.

Gânduri finale

Efectul hover fan-out este un element de design frumos și captivant pe care îl puteți utiliza pentru a prezenta aspectele paginii pe propriul dvs. site web. Combinația de CSS personalizate și setările Divi încorporate pe care le-am tratat în acest tutorial va funcționa în mod magic. Iar această configurație va servi drept un punct de plecare excelent pentru explorarea mai multor designuri folosind constructorul Divi. Sperăm că acest lucru vă oferă o inspirație pentru a vă duce portofoliul la nivelul următor.

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

Noroc!