Cum să creați un aspect al grilei de imagini responsive cu CTA-uri și Hover Overlays în Divi

Aspectele grilei responsive sunt perfecte pentru prezentarea unei colecții de imagini cu linkuri (sau CTA-uri), deoarece arată bine pe fiecare dispozitiv. Generatorul Divi are câteva module încorporate fantastice care utilizează afișaje de grilă, inclusiv Portfolio Grid, Blog Grid și Gallery Grid. Dar uneori s-ar putea să doriți să creați propriul aspect al grilei de imagini personalizate cu CTA-uri. Acest lucru vă oferă mai mult control asupra designului și a conținutului pe care doriți să fie afișat pentru fiecare element de grilă, fără a fi nevoie să recurgeți la un plugin.

Astăzi, vă vom arăta cum să creați un aspect al grilei de imagine receptive cu CTA-uri folosind opțiunile de design încorporate ale Divi. Pentru a face acest lucru, vom deveni creativi cu modul în care organizăm grila folosind o secțiune de specialitate și adăugăm suprapuneri la fiecare imagine utilizând un modul de îndemn.

Să începem!

Trage cu ochiul

Iată o privire rapidă asupra designului pe care îl vom construi în acest tutorial.

Descărcați aspectul GRATUIT

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 secțiunii în biblioteca Divi, navigați la biblioteca Divi.

Faceți clic pe butonul Import.

În fereastra pop-up de portabilitate, selectați fila de import și alegeți fișierul de descărcare de pe computer.

Apoi faceți clic pe butonul de import.

După ce ați terminat, aspectul secțiunii va fi disponibil în Divi Builder.

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

Ce trebuie să începeți

Pentru a începe, va trebui să faceți următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi.
2. Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din partea frontală (builder vizual).
3. Alegeți opțiunea „Build From Scratch”.

După aceea, veți avea o pânză goală pentru a începe să proiectați în Divi.

Crearea unui aspect al grilei de imagini responsive cu CTA-uri și Hover Overlays în Divi

Partea 1: Crearea aspectului secțiunii speciale

Pentru început, adăugați o nouă secțiune de specialitate cu un aspect al barei laterale stânga de o treime.

Ștergeți secțiunea obișnuită implicită, astfel încât să rămână doar noua secțiune de specialitate.

Deschideți setările secțiunii și actualizați culoarea de fundal după cum urmează:

• Culoare fundal: # 84dbda

Sub fila de proiectare, actualizați opțiunile de dimensionare, lățime și căptușire după cum urmează:

• Egalizați înălțimile coloanei: DA
• Utilizați lățimea personalizată a jgheabului: DA
• Lățimea jgheabului: 1
• Lățime interioară: 100%
• Lățime maximă interioară: 1080px (desktop), 500px (tabletă și telefon)
• Garnitura: 12vh sus, 12vh jos
• Coloana 1 Căptușeală: 0 px de sus, 0 px de jos

După ce stilurile secțiunii sunt la locul lor, adăugați un rând cu o coloană la secțiune.

Setări rând

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

• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: DA
• Căptușeală: 0 px sus, 0 px jos

Pentru a crea un al doilea rând, copiați primul rând.

Apoi actualizați rândul duplicat cu un aspect cu două coloane.

Partea 2: Adăugarea de imagini ca imagini de fundal în coloană

Acum că toate rândurile și coloanele sunt la locul lor, suntem gata să adăugăm imaginile noastre la aspectul grilei. Pentru a ne asigura că imaginile sunt receptive în aspectul grilei, vom adăuga fiecare dintre imaginile noastre ca imagini de fundal la fiecare dintre cele patru coloane din secțiune. Deoarece fiecare imagine de fundal va avea o dimensiune de fundal „copertă”, imaginea va umple întotdeauna întreaga coloană la ajustarea dimensiunii browserului.

Imagine de fundal a coloanei din rândul superior

Pentru a începe, deschideți setările coloanei pentru coloana din rândul de sus.

Apoi adăugați o imagine de fundal în coloană.

Imagini de fundal ale coloanelor rândului inferior

Apoi, deschideți setările pentru coloana 1 din al doilea rând (jos) și adăugați și o imagine de fundal la coloana respectivă.

Apoi, adăugați o imagine de fundal în coloana 2 din același rând.

Secțiunea specială Coloana 1 Imagine de fundal

Și, în cele din urmă, deschideți setările secțiunii de specialitate și adăugați o imagine de fundal în coloana 1.

Partea 3: Adăugarea apelului la acțiune de suprapunere a imaginii în fiecare coloană

Acum că imaginile noastre de fundal au fost adăugate la fiecare coloană a aspectului grilei, vom adăuga un modul de apelare la acțiune la fiecare coloană cu care va servi ca suprapunere pentru imagine cu un buton CTA. Utilizarea unui modul de apel la acțiune ca suprapunere peste imaginea de fundal a coloanei vă va permite să adăugați stiluri personalizate de suprapunere de fundal și să treceți cu mouse-ul la imagine cu ușurință. În plus, vă oferă opțiunea de a adăuga și un CTA personalizat peste imagine. Pentru acest exemplu, vom folosi pur și simplu elementul buton din modulul Apel la acțiune, dar puteți adăuga cu ușurință la titlu sau la conținutul corpului deasupra butonului, folosind și opțiunile de conținut.

Crearea modulului de îndemn

Pentru a adăuga primul apel la acțiune suprapus de imagine, adăugați un modul de apel la acțiune în coloana din rândul de sus.

Conţinut

Actualizați conținutul pentru îndemnul după cum urmează:

• ștergeți textul titlului
• ștergeți textul corpului
• Adresă URL a butonului: #
• Culoare fundal: transparent (desktop), rgba (255,235,77,0,5) (plasați cursorul)

NOTĂ: Adăugarea unui „#” pentru adresa URL a linkului butonului este doar o completare pentru moment, astfel încât butonul să apară. Adăugarea culorii de fundal semitransparente pe hover vă va oferi o culoare superioară personalizată superioară când plasați cursorul peste modul (și imaginea din spatele acestuia).

Stiluri Buttton

Continuați să actualizați setările de proiectare a apelului la acțiune pentru buton după cum urmează:

• Utilizați stiluri personalizate pentru buton: DA
• Dimensiune text buton: 22 px
• Culoarea textului butonului: # ffeb4d
• Culoarea fundalului butonului: # 000 (desktop), # ec5f00 (cursor)
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 100 px
• Buton Font: nisip curent
• Buton Font Greutate: Semi Bold
• Garnitura butonului: 0,5em sus, 0,5em jos, 2em stânga, 2em dreapta

Dimensionare, căptușire și margine

Apoi, trebuie să ne asigurăm că modulul nostru are o anumită înălțime pentru a expune imaginea de fundal a coloanei din spatele acestuia. Pentru a face acest lucru, vom adăuga câteva umpluturi în partea de sus și de jos a modulului. Vom adăuga, de asemenea, o margine subtilă modulului, astfel încât să îi oferim o mică separare de alte imagini din aspectul grilei.

Actualizați următoarele:

• Lățime: 100%
• Garnitura: 15vh sus, 15vh jos
• Lățimea marginii inferioare: 5 px
• Lățimea marginii stânga: 5 px
• Culoare margine: rgba (255,255,255,0,5)

NOTĂ: Utilizarea unității de lungime vh pentru umplutură va face ca valoarea umpluturii să fie relativă la înălțimea ferestrei de vizualizare a browserului. Deci, elementele din grila de imagini vor crește și scădea în înălțime pe măsură ce fereastra browserului crește și scade în înălțime.

Centrarea verticală a conținutului CTA

Pentru a ne asigura că conținutul din modulul de apel la acțiune rămâne centrat vertical, putem adăuga un mic fragment de CSS personalizat utilizând proprietatea flex.

Sub fila avansată, adăugați următorul CSS la elementul principal:

display:flex;
flex-direction:column;
justify-content:center;

Adăugarea Suprapunerii Apel la Acțiune la celelalte coloane

Acum că primul modul de chemare la acțiune este stilizat, copiați și lipiți modulul în celelalte 3 coloane de-a lungul aspectului, inclusiv cele 2 coloane din rândul de jos și coloana 1 din secțiunea de specialitate.

Pentru a vă asigura că modulul de apel la acțiune se întinde pe întreaga înălțime a coloanei 1 din secțiunea de specialitate, actualizați înălțimea minimă la 100%.

• Înălțime minimă: 100%

În mod normal, acest lucru nu ar funcționa pentru un modul dintr-o coloană normală. Dar, din cauza proprietății flex pe coloană, modulul este în esență un element copil flex, astfel încât valoarea înălțimii minime de 100% va funcționa.

Asta e. Să verificăm rezultatul final.

Rezultat final

Iată rezultatul final al aspectului grilei de imagine receptive pe o pagină live.

Și iată efectele de plutire.

Iată cum răspunde designul la ajustarea dimensiunii browserului.

Gânduri finale

Aspectele grilei de imagine adaptabile continuă să fie un aspect popular al multor site-uri web. Aspectul vizual oferit de imaginea de fundal combinat cu suprapunerea cu îndemnul la acțiune poate face ca aceste legături importante de navigare să apară. În plus, caracterul receptiv al aspectului grilei de imagine va arăta excelent pe toate dispozitivele, ceea ce este întotdeauna o necesitate. Sper că vine în mână pentru următorul dvs. proiect.

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

Noroc!