Cum să evidențiați categoriile de produse într-o secțiune uimitoare a eroului site-ului web Divi

Dacă sunteți familiarizați cu site-urile de comerț electronic, sunteți, fără îndoială, familiarizați și cu categoriile de produse. Categoriile de produse pot fi unele dintre cele mai puternice pagini de pe site-ul dvs. web. De aceea este important să le faceți ușor de găsit și să le evidențiați într-un mod simplu și elegant. Cu opțiunile încorporate ale Divi, vă puteți duce designul în mai multe direcții. În acest tutorial, vă vom arăta cum să evidențiați categoriile de produse în secțiunea erou. Vom crea exemplul de design de la zero și, sperăm, vă va inspira să evidențiați categoriile de produse și în modul dvs. creativ!

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.

Să începem să creăm!

Abonați-vă la canalul nostru Youtube

Adăugați o secțiune nouă

Fundal de gradient

Începeți prin adăugarea unei noi secțiuni la pagina dvs. Deschideți setările acestei secțiuni și adăugați un fundal degradat.

• Culoare 1: #ffffff
• Culoare 2: # 757f1e
• Tipul gradientului: liniar
• Direcția gradientului: 90 grade
• Poziția inițială: 50%
• Poziție finală: 50%

Spațiere

Apoi, accesați fila de proiectare și adăugați câteva secțiuni de umplere personalizate, sus și jos.

• Căptușeală superioară: 130 px
• Căptușeală inferioară: 130 px

Adăugați rândul # 1

Structura coloanei

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

Coloana 1 Culoare fundal

Fără a adăuga încă module, deschideți setările rândului și adăugați o culoare de fundal în prima coloană.

• Coloana 1 Culoare fundal: rgba (0,0,0,0.19)

Coloana 1 Imagine de fundal

Adăugați o imagine de fundal și la prima coloană, împreună cu un mod de amestecare.

• Coloana 1 Poziția imaginii de fundal: Centrul de jos
• Coloana 1 Repetarea imaginii de fundal: Fără repetare
• Coloana 1 Imagine de fundal Amestec: înmulțiți

Coloana 2 Culoare fundal

A doua coloană va avea nevoie doar de o culoare albă de fundal.

• Coloana 2 Culoare fundal: #ffffff

Dimensionare

Continuați accesând fila de proiectare a setărilor rândului și modificați setările de dimensionare.

• Utilizați lățimea personalizată: da
• Unitate: PX
• Lățime personalizată: 2000 px
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da

Spațiere

Eliminați și toate căptușirile personalizate implicite ale rândului.

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

Box Shadow

Și adăugați o umbră de casetă subtilă.

• Puterea neclarității umbrei cutiei: 80 px

Adăugați un modul de text în coloana 2

Adauga continut

E timpul să începeți să adăugați module! Primul modul de care avem nevoie în a doua coloană este un titlu Modul text. Adăugați un conținut la alegere.

Setări text antet

Apoi, accesați setările pentru textul antetului și efectuați câteva modificări.

• Greutatea fontului de titlu: Ultra Bold
• Dimensiune text antet: 60 px (desktop și tabletă), 50 px (telefon)
• Distanța între litere de antet: -4px
• Înălțimea liniei de direcție: 0.8em

Spațiere

Adăugați și câteva valori de marjă și umplere personalizate.

• Marja superioară: 17vw
• Căptușeală stângă: 2vw (desktop), 4vw (tabletă), 5vw (telefon)

Adăugați modulul divizor în coloana 2

Vizibilitate

Al doilea și ultimul modul necesar în a doua coloană este un modul divizor. Asigurați-vă că este activată opțiunea Show Divider.

• Show Divider: Da

Culoare

Schimbați apoi culoarea separatorului.

• Culoare: # 757f1e

Stiluri

Modificați și stilul divizor în setările stilurilor.

• Stil divizor: Dublu

Dimensionare

Și creșteți greutatea divizorului în setările de dimensionare ale modulului.

• Greutatea divizorului: 6 px

Spațiere

În cele din urmă, adăugați niște margini personalizate de sus și de jos la modulul divizor.

• Marja superioară: 2vw
• Marja inferioară: 15vw

Adăugați rândul # 2

Structura coloanei

Pe al doilea rând! Alegeți următoarea structură de coloane pentru aceasta:

Coloana 1 Culoare fundal

Deschideți setările rândului și adăugați o culoare de fundal în prima coloană.

• Coloana 1 Culoare fundal: # 212121

Dimensionare

Apoi, accesați fila de proiectare și jucați-vă cu dimensionarea rândului.

• Utilizați lățimea personalizată: da
• Unitate: PX
• Lățime personalizată: 2000 px
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Spațiere

Eliminați și toate căptușelile personalizate ale rândului adăugând „0px” la căptușeala superioară și inferioară.

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

Box Shadow

Nu în ultimul rând, dați rândului o umbră de casetă subtilă.

• Puterea neclarității umbrei cutiei: 80 px

Adăugați modulul de text nr. 1 în coloana 1

Adauga continut

Primul modul de care avem nevoie este un modul de text. Adăugați una la prima coloană cu un anumit conținut la alegere.

Setări text

Continuați accesând fila Design și modificând setările de text.

• Greutatea fontului textului: ușoară
• Culoarea textului: #ffffff
• Dimensiune text: 18 px (desktop), 15 px (tabletă), 12 px (telefon)
• Înălțimea liniei de text: 1em
• Orientare text: stânga
• Culoarea textului: deschis

Setări text antet

Modificați și setările pentru textul antetului.

• Rubrica 3 Culoarea textului: #ffffff
• Titlul 3 Dimensiune text: 25 px (desktop), 20 px (tabletă), 18 px (telefon)
• Rubrica 3 Spațierea literelor: -1 px

Spațiere

Adăugați și câteva valori de umplere personalizate în setările de spațiere.

• Căptușeală superioară: 30 px
• Căptușeală inferioară: 30 px
• Căptușeală stângă: 50 px
• Căptușeală dreaptă: 50 px

Adăugați modulul de text nr. 2 în coloana 2

Adauga continut

Continuați adăugând un alt modul de text la a doua coloană. Adăugați un conținut la alegere și conectați pagina categoriei de produse și în setările de legătură.

Culoare de fundal implicită

Apoi, accesați setările de fundal și adăugați o culoare de fundal.

• Culoare fundal: #eaeaea

Plasați cursorul pe culoarea de fundal

Schimbați această culoare de fundal la cursor.

• Culoare fundal: # ffbb00

Setări implicite pentru text

Modificați în jurul setărilor de text din fila de proiectare următoare.

• Greutatea fontului textului: Ultra Bold
• Stil de text text: majuscule
• Culoarea textului: # 333333
• Dimensiune text: 16 px
• Spațiere scrisoare text: -1 px
• Orientare text: centru

Plasați cursorul pe Setări text

Și modificați aceste setări la plecare.

• Culoarea textului: #ffffff
• Dimensiune text: 20 px

Spațiere implicită

De asemenea, aplicăm câteva valori de spațiu implicite.

• Căptușeală superioară: 45 px
• Căptușeală inferioară: 45 px
• Căptușeală stângă: 5 px
• Căptușeală dreaptă: 5 px

Distanța cu mouse-ul

Ceea ce vom schimba la plecare.

• Marja superioară: -50 px
• Marja stângă: -20px
• Căptușeală superioară: 70 px
• Căptușeală inferioară: 70 px
• Căptușeală stângă: 5 px
• Căptușeală dreaptă: 5 px

Default Box Shadow

Continuați deschizând setările de umbră a casetei și adăugați o umbră de casetă complet transparentă.

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

Hover Box Shadow

Schimbați culoarea complet transparentă a umbrei cutiei pe hover pentru ca aceasta să apară.

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

Clonați modulul de text nr. 2 de două ori și plasați-le în coloanele rămase

După ce ați terminat de modificat modulul de text din coloana 2, puteți merge mai departe și puteți clona modulul de două ori și plasați duplicatele în cele două coloane rămase ale rândului.

Schimbați primul duplicat

Schimbați conținutul

Deschideți primul duplicat din a treia coloană și modificați conținutul și linkul categoriei de produse.

Schimbați culoarea de fundal

Schimbați și culoarea de fundal a acestui modul.

• Culoare fundal: #dddddd

Schimbați al doilea duplicat

Schimbați conținutul

Modificați și conținutul celui de-al doilea duplicat din coloana 4.

Schimbați culoarea de fundal

Împreună cu culoarea de fundal.

• Culoare fundal: # c6c6c6

Adăugați un modul de imagine pentru dimensiuni mai mici ale ecranului la coloana 2 din rândul # 1

Incarca imaginea

Nu în ultimul rând, vom adăuga și un modul de imagine la a doua coloană a primului rând pentru a optimiza totul pentru dimensiuni de ecran mai mici.

Vizibilitate

Asigurați-vă că acest modul apare doar pe dimensiuni de ecran mai mici, ascunzându-l pe desktop în fila avansată a modulului.

previzualizare

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

Gânduri finale

În această postare, am recreat un exemplu de design uimitor care pune principalele categorii de produse ale site-ului dvs. în centrul atenției. Sperăm că acest tutorial vă va inspira să creați și propriile tipuri de modele. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!