Doriți să creați un aspect de grilă de imagini receptiv cu DIVI ?
Constructorul Divi are module fantastice încorporate care folosesc vizualizări ale grilei,
Dar uneori s-ar putea să doriți să vă creați propriul aspect personalizat al grilei de imagini cu link-uri CTA. Acest lucru vă oferă mai mult control asupra designului și cuprins pe care doriți să-l afișați 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 de grilă de imagini receptiv cu link-uri CTA folosind opțiunile de design încorporate ale Divi.
Să începem!
studiu
Iată o scurtă prezentare generală a rezultatului pe care îl vom obține la sfârșitul acestui tutorial.
Creați o pagină cu Divi Theme Builder
Din tabloul de bord WordPress, creați o nouă pagină web accesând Pagini >> Adăugați
Apoi, dați un titlu paginii dvs., apoi faceți clic pe „ Utilizați Divi Builder ".
Apoi faceți clic pe " începe să construiești«
Crearea aspectului secțiunii speciale
Adăugați o nouă secțiune "specialitate". aspectul barei laterale din stânga o treime două treimi.
Alegeți aspectul coloanelor așa cum se arată în captura de ecran de mai jos:
Ștergeți secțiunea implicită, astfel încât să rămână doar noua secțiune specializată.
Deschideți setările secțiunii și schimbați culoarea de fundal după cum urmează:
- Fundal: #84dbda
Sub filă Stil, actualizați următoarele opțiuni:
- Egalizare înălțimi coloane: DA
- Utilizați lățime personalizată a jgheabului: DA
- Lățimea jgheabului: 1
- Latime interioara: 100%
Citiți și: Cum pot afișa postările de blog în DIVI?
- Lățimea maximă interioară: 1 px (desktop), 080 px (tabletă și telefon)
- Marja internă (sus și jos): 12vh
- Umplutură pentru coloana 1 (sus și jos): 0px
Cu stilurile de secțiune la locul lor, adăugați un rând cu o singură coloană la secțiune.
Setări de linie
Actualizați parametrii de linie după cum urmează:
- Utilizați lățimea jgheab personalizată: DA
- Distanța între coloane: 1
- Armonizarea înălțimii coloanei: DA
- Marja internă (sus și jos): 0px
Creați o a doua linie duplicând prima.
Apoi schimbați rândul duplicat într-un aspect cu două coloane.
Adăugarea de imagini ca imagini de fundal pe 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 răspund în aspectul grilei, vom adăuga fiecare dintre imaginile noastre ca imagini de fundal în fiecare dintre cele patru coloane din secțiune.
Deoarece fiecare imagine de fundal va avea o dimensiune de fundal de " acoperi ", imaginea va umple întotdeauna întreaga coloană atunci când ajustați dimensiunea browserului.
Imagine de fundal pe coloana din rândul de sus
Pentru a începe, deschideți setările coloanei din rândul de sus.
Apoi adăugați o imagine de fundal la coloană.
Imagini de fundal ale coloanei din rândul de jos
Apoi, deschideți setările pentru coloana 1 în al doilea rând (de jos) și adăugați, de asemenea, o imagine de fundal la această coloană.
Apoi, adăugați o imagine de fundal la coloana 2 a aceluiași rând.
Secțiunea coloana 1 imagine de fundal
Și, în sfârșit, deschideți setările secțiunii "specialitate" și adăugați o imagine de fundal la coloana 1.
Adăugarea modulului „Call to Action” suprapus imaginilor la fiecare coloană
Acum că imaginile noastre de fundal au fost adăugate în fiecare coloană a aspectului grilei, vom adăuga un modul „Îndemn la acțiune” în fiecare coloană.
Utilizarea unei suprapuneri de modul „Îndemn la acțiune” pe imaginea de fundal a coloanei vă va permite să adăugați cu ușurință stiluri personalizate de suprapunere de fundal și efecte de trecere la imaginea de fundal a coloanei.
Pentru acest exemplu, vom folosi doar elementul buton din modulul Action Call, dar îl puteți adăuga cu ușurință la cuprins a titlului sau a corpului de deasupra butonului.
Vom adăuga primul modul „Apel la acțiune” în coloana rândului de sus.
Conținut
Actualizați setările modulului „Îndemn la acțiune” după cum urmează:
- eliminați textul titlului
- ștergeți corpul textului
- Adresa URL a linkului butonului: #
OBSERVAȚIE : Adăugarea unui „#” pentru adresa URL a linkului butonului este doar o completare pentru moment pentru ca butonul să se afișeze. Adăugarea culorii de fundal semi-transparentă la hover vă va oferi o culoare frumoasă de suprapunere personalizată atunci când treceți cu mouse-ul peste modul (și imaginea din spatele acestuia).
- Culoare de fundal: transparent (desktop), rgba (255,235,77,0.5) (hover)
Stiluri de butoane
Accesați fila Stil și modificați setările butoanelor modulului „Apel la acțiune” după cum urmează:
- Utilizați stiluri personalizate pentru Buton: DA
- Dimensiunea textului butonului: 22px
- Culoarea textului butonului: #ffeb4d
- Buton de fundal: #000000 (desktop), #ec5f00 (hover)
- Lățimea chenarului butonului: 0 pixeli
- Raza chenarului butonului: 100 px
- Font pentru buton: nisipuri mișcătoare
- Buton pentru lumină slabă: semi-îndrăzneață
- Buton de umplutură: 0,5em Sus, 0,5em Jos, 2em Stânga, 2em Dreapta
Dimensiune, căptușeală ș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 lui.
Pentru a face acest lucru, vom adăuga margini interne (sus și jos) la modul.
Vom adăuga, de asemenea, un chenar subtil la modul pentru a-i oferi o mică separare de alte imagini din aspectul grilei.
Aplicați următoarele setări:
- Lățime: 100%
- Marja internă (sus și jos): 15vh
- Lățimea marginii inferioare: 5px
- Lățimea marginii din stânga: 5px
- Culoare chenar: rgba (255,255,255,0.5)
OBSERVAȚIE : Utilizarea unității de lungime vh pentru umplutură va face ca valoarea de umplutură să fie relativă la înălțimea ferestrei de vizualizare a browserului. Deci elementele grilei de imagine vor crește și se vor micșora în înălțime proporțional cu fereastra browserului.
Centrarea verticală a conținutului modulului „Call to action”.
Pentru a se asigura că cuprins al modulului „Apel de acțiune” rămâne centrat vertical, putem adăuga un mic fragment de CSS personalizat folosind proprietatea flex.
Sub fila avansată, adăugați următorul CSS la elementul principal:
display:flex;
flex-direction:column;
justify-content:center;
A fost adăugată suprapunerea îndemnului la alte coloane
Acum că primul modul „Call to Action” este personalizat, copiați și inserați modulul în celelalte 3 coloane ale aspectului, inclusiv cele 2 coloane din rândul de jos și coloana 1 din secțiune.
Pentru a vă asigura că modulul „Call to Action” acoperă întreaga înălțime a coloanei 1 din secțiunea specializată, setați înălțimea minimă la 100%.
- Inaltime minima: 100%
S-a terminat ! Să vedem rezultatul final.
Rezultat final
Iată rezultatul final al aspectului grilei de imagini receptive pe o pagină web cu efectele de trecere cu mouse-ul.
Și așa reacționează grila la ajustarea dimensiunii browserului.
Descărcați DIVI acum!!!
Concluzie
Aspectele de grilă de imagini receptive continuă să fie un aspect popular al multor site-uri web. Atractia vizuală oferită de imaginea de fundal combinată cu suprapunerea îndemnului la acțiune poate să apară cu adevărat acele linkuri de navigare importante.
De asemenea, natura receptivă a aspectului grilei de imagini va arăta grozav pe toate dispozitivele, ceea ce este întotdeauna o necesitate.
Sperăm că acest ghid vă va fi util în viitoarele proiecte de creare site-ul web. Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
Cu toate acestea, puteți consulta și resursele noastre dacă aveți nevoie de mai multe elemente pentru a vă finaliza proiectele de creare a site-ului web.
De asemenea, puteți urma ghidul nostru pe Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
