Cum să dezvăluie imagini utilizând grilele orizontale de deplasare și revărsarea ascunsă cu Divi

De când au apărut noile opțiuni de dimensionare ale lui Divi, am creat câteva tutoriale care vă arată cum să creați hover. În aceste tutoriale, conținutul ascuns a fost plasat vertical. Cu toate acestea, în unele cazuri, este posibil să doriți să creați o revelație orizontală. În această postare, vă vom arăta cum să dezvăluiți imagini folosind grilele hover și opțiunile de depășire ale lui Divi. Realizarea acestei lucrări necesită o abordare ușor diferită. Vom folosi un rând cu o singură coloană și vom așeza toate modulele unul sub celălalt și, la plimbare, vom transforma coloana într-o grilă orizontală. Veți putea descărca gratuit fișierul JSON!

Să ajungem la asta.

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Descărcați GRATUIT layout-ul Hover Grids

Pentru a pune mâinile pe aspectul gratuit al grilelor de hover, 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!

Să începem să recreăm!

Abonați-vă la canalul nostru Youtube

Adăugați o secțiune nouă

Începeți prin adăugarea unei noi secțiuni obișnuite la pagina la care lucrați.

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Fundal de gradient implicit

Fără a adăuga încă module, deschideți setările rândului și adăugați următorul fundal de gradient:

• Culoare 1: # b1ffc4
• Culoare 2: #ffffff
• Tipul gradientului: radial
• Direcție radială: centru
• Poziția inițială: 28%
• Poziție finală: 28%

Plasați cursorul pe fundalul gradientului

Schimbați fundalul de gradient la cursor.

• Culoare 1: # b1ffc4
• Culoare 2: #ffffff
• Tipul gradientului: radial
• Direcție radială: stânga
• Poziția inițială: 5%
• Poziție finală: 5%

Spațiere

Treceți la setările de spațiere și modificați valorile de umplere și marjă în continuare.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px
• Marja superioară: 50 px
• Marja inferioară: 50 px

Bordură implicită

Adăugați o rază de margine „50 px” în colțurile din dreapta sus și din colțul din dreapta jos.

Plasați mouse-ul peste frontieră

Aduceți colțurile înapoi la „0px” la cursor.

Default Box Shadow

Adăugați o umbră de casetă subtilă, folosind următoarele setări:

• Puterea neclarității umbrei cutiei: 50 px
• Culoare umbră: rgba (0,0,0,0.09)

Hover Box Shadow

Eliminați umbra cutiei de pe hover înlocuind culoarea umbrei cu una complet transparentă.

• Culoare umbră: rgba (0,0,0,0)

Adăugați un modul de text în coloană

Adăugați conținut H2

Este timpul să începeți să adăugați module, începând cu un modul de text. Introduceți un conținut H2 la alegere.

Setări text H2

Treceți la fila de proiectare și modificați setările de text H2 în consecință:

• Rubrica 2 Font: Acme
• Titlul 2 Stil font: Subliniat
• Rubrica 2 Culoare subliniere: # 00ff3f
• Rubrica 2 Culoarea textului: # 000000
• Rubrica 2 Dimensiune text: 3vw

Spațiere

Adăugați câteva valori de umplere personalizate în continuare.

• Căptușeală superioară: 6vw
• Căptușeală inferioară: 7vw
• Garnitura stânga: 2vw

Adăugați modulul de imagine în coloană

Incarca imaginea

Al doilea modul de care avem nevoie în această coloană este un modul de imagine. Încărcați o imagine peisaj la alegere.

Caseta de lumina

Activați opțiunea lightbox în setările linkului de mai jos.

• Deschideți în Lightbox: Da

Dimensionare

Și forțați lățimea completă a imaginii în setările de dimensionare. Acest lucru vă va asigura că imaginea rămâne receptivă la toate dimensiunile ecranului.

• Forțează lățimea completă: Da

Clonați modulul de imagine de două ori

După ce ați finalizat primul modul de imagine, puteți continua și clona de două ori.

Schimbați imaginile

Schimbați imaginile din ambele duplicate. Asigurați-vă că imaginile pe care le încărcați au aceeași dimensiune setată ca prima imagine.

Adăugați efectul Hover la rând

Dimensionare

Acum că am finalizat setările de bază ale modulului și rândului, este timpul să facem ca efectul hover să se întâmple! Vom începe prin modificarea înălțimii și lățimii rândului și ascunderea revărsărilor. Deschideți setările de dimensionare ale rândului și efectuați următoarele modificări:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime: 20%
• Lățime maximă: 100%
• Înălțime: 15,9vw

Plasați cursorul pe mouse

Aduceți înapoi lățimea la „100%” la cursor. Acest lucru va permite imaginilor să apară odată ce rândul este plasat.

• Lățime: 100%

Vizibilitate

Treceți la fila avansată următoare și ascundeți revărsările. Acest lucru se va asigura că imaginile sunt ascunse înainte ca vizitatorii să plece (desktop) sau să facă clic (tabletă / mobil) pe modulul text.

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Tranziții

De asemenea, modificăm durata tranziției în setările de tranziție.

• Durata tranziției: 0 ms

Coloana Hover Element principal

Pentru a crea o grilă pe hover, vom deschide setările coloanei, accesați fila avansată și plasați următoarele linii de cod CSS în elementul principal de hover:

display: grid;
grid-template-columns: 20% 25% 25% 25%;
grid-gap: 10px;

Clone Row de două ori

După ce ați finalizat primul rând, îl puteți clona de câte ori doriți. Pentru acest exemplu particular de proiectare, clonăm rândul de două ori.

Schimbați fundalul gradientului rândului 1 duplicat

Schimbați culoarea primului gradient al fundalului gradientului celui de-al doilea rând.

• Culoare 1: # ffdc96

Schimbați fundalul de gradient al rândului duplicat # 2

Faceți același lucru pentru al treilea rând.

• Culoare 1: # b7c7ff

Schimbați copierea modulului text și subliniați culoarea ambelor duplicate

Continuați modificând culoarea subliniată a ambelor duplicate ale modulului de text împreună cu copia și ați terminat!

• Subliniați culoarea # 1: # ffaa00
• Subliniați culoarea # 2: # 0037ff

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Gânduri finale

În acest post, v-am arătat cum să dezvăluiți imagini în grilele orizontale folosind opțiunile de depășire ale Divi. Imaginile au fost dezvăluite odată plasate pe birou și făcute clic pe tabletă / telefon. Deși am dezvăluit imagini, puteți dezvălui orice tip de conținut doriți modificând setările din interiorul constructorului. Sperăm că acest tutorial vă va inspira să creați și propriile designuri alternative ale grilei de zbor! Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.