Cum să creați o pagină de navigare cu Divi

Există o mulțime de abordări pe care le puteți aplica pe pagina dvs. de pornire, dar dacă doriți să adăugați o mică atingere suplimentară site-ului dvs. web, opțiunea pentru o pagină de navigare, deoarece pagina dvs. de pornire ar putea fi calea de urmat. Nu îl veți vedea atât de des și oferă vizitatorilor dvs. o viziune clară a ceea ce se pot aștepta de la site-ul dvs. web. În plus, vă va ajuta și vizitatorii să navigheze vizual prin diferitele pagini pline de conținutul minunat pe care îl furnizați.

Pentru a vă arăta cum puteți face acest lucru cu Divi, într-un mod elegant și elegant, am creat un design care vă va arăta cum să recreați în această postare. Vor fi două versiuni; versiunea desktop și cea potrivită pentru tabletă și telefon. Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire asupra rezultatului final.

Rezultat pe desktop

Rezultatul pe care îl vom recrea arată așa pe desktop:

Rezultat pe mobil

Rezultatul pe mobil este ușor diferit și arată astfel:

Cum să creați o pagină de navigare cu Divi

Abonați-vă la canalul nostru Youtube

Recreați versiunea desktop

Vom crea două versiuni ale paginii de navigare; o versiune desktop și o versiune pentru tabletă și telefon. În acest fel, vom fi siguri că pagina de navigare arată bine pe toate dispozitivele. Ca de obicei, vom începe prin crearea versiunii desktop.

Adăugați o secțiune nouă

Începeți prin crearea unei pagini noi și adăugarea unei secțiuni obișnuite la aceasta. Pentru acest tutorial, vom folosi doar o secțiune care va include toate rândurile cu conținut de care vom avea nevoie (atât pentru versiunea desktop, cât și pentru cea mobilă). Cu toate acestea, puteți alege, de asemenea, să separați versiunea desktop și cea mobilă în două secțiuni.

Recreați primul rând de navigare

După cum puteți observa în previzualizarea rezultatului de mai sus, fiecare dintre elementele de navigare are mai mult sau mai puțin același design cu câteva detalii diferite. Majoritatea setărilor pentru fiecare dintre elementele de navigare pe care doriți să le creați sunt aceleași. De aceea, vă vom arăta cum puteți crea primul rând în detaliu și apoi vă vom arăta cum puteți face modificările pentru celelalte elemente de navigare pe care doriți să le adăugați și pe pagină.

Structura coloanei

În primul rând, alegeți o coloană cu lățime completă pentru rândul pe care tocmai l-ați adăugat. Înainte de a adăuga module la acesta, ne vom asigura că setările rândurilor sunt la locul lor, așa că mergeți mai departe și deschideți setările rândurilor.

Imagine de fundal

În timp ce ne aflăm în fila Conținut, primul lucru pe care îl vom face este să adăugăm o imagine de fundal la rândul dvs. Vă recomandăm să utilizați o imagine care are o lățime de „1400px” și o înălțime de „934px”, deoarece va duce la cel mai bun rezultat. De asemenea, asigurați-vă că ați pus imaginea pe „fără repetare”.

Aliniere

Apoi, treceți la fila Proiectare și adăugați o aliniere dreaptă la rândul dvs. Procedând astfel, veți crea suficient spațiu în partea stângă a ecranului pentru a adăuga descrierea și linkul.

Dimensionare

Apoi, deschideți subcategoria Dimensionare, activați opțiunea „Utilizați lățimea personalizată” și utilizați o lățime procentuală de „100%”.

Spațiere

Continuând, dorim să adăugăm un pic de spațiu alb între fiecare element de navigare, de aceea vom adăuga o marjă de sus și de jos de 5px la rând.

Vizibilitate

Nu în ultimul rând, vrem să dezactivăm acest rând pe telefon și tabletă, deoarece vom crea un alt rând care se va potrivi cu tableta și telefonul mai târziu în această postare.

Modul text pentru descrierea paginii

Setări text

Odată ce setările de rând sunt terminate, puteți adăuga un prim modul de text în coloana rândului și puteți utiliza următoarele setări pentru subcategoria Text din fila Proiectare:

• Font text: Andika
• Greutatea fontului textului: regulat
• Dimensiune text: 13 px
• Culoarea textului: # 000000
• Înălțimea liniei textului: 1.1em
• Orientare text: stânga

Dimensionare

Derulați în jos, deschideți subcategoria Dimensionare și adăugați o lățime de '18% '. Această lățime se va asigura că modulul nostru text nu va traversa imaginea de fundal a rândului nostru după ce adăugăm marginea stângă negativă la acesta.

Spațiere

Așa cum am menționat în pasul anterior, dorim ca modulul de text să apară în partea stângă a rândului nostru, fără a suprapune fundalul rândului. De asemenea, dorim să avem un spațiu între partea de sus a imaginii rândului și începutul modulului de text, de aceea folosim și niște margini superioare.

• Marja superioară: 150 px
• Marja stângă: -20px
• Căptușeală superioară: 10 px
• Căptușeală inferioară: 10 px

Modul divizor

Vizibilitate

Apoi, continuați și adăugați un modul divizor chiar sub modulul text. În subcategoria Vizibilitate, activați opțiunea „Afișează divizorul”.

Culoare

Apoi, treceți la fila Design și adăugați „#FFFFFF” ca culoare separatoare.

Stiluri

Continuând, alegeți „Solid” ca stil divizor și „Sus” ca poziție divizor.

Dimensionare

În cele din urmă, efectuați următoarele setări pentru subcategoria Dimensionare:

• Greutatea divizorului: 5 px
• Înălțime: 23 px
• Lățime: 47%
• Alinierea modulului: stânga

Modulul de text pentru elementul de meniu

Legați textul în caseta de conținut

După ce ați terminat cu modulul divizor, continuați și adăugați un alt modul de text chiar sub acesta. Acest modul text va fi elementul nostru de navigare. Deschideți setările, introduceți textul și adăugați un link la acesta.

Culoare fundal gradient

În timp ce vă aflați încă în fila Conținut, utilizați următoarele setări de fundal pentru gradient:

• Prima culoare: #FFFFFF
• A doua culoare: rgba (12.113.195,0.62)
• Tipul gradientului: liniar
• Direcția gradientului: 108 grade
• Poziția inițială: 31%
• Poziție finală: 21%

Setări text link

Apoi, accesați fila Proiectare și efectuați următoarele setări pentru fila link din subcategoria text:

• Link Font: Andika
• Greutatea fontului legăturii: îndrăzneață
• Stilul fontului de legătură: majuscule și subliniate
• Stil subliniere link: solid
• Dimensiune text link: 100 px
• Culoare text link: # 000000
• Înălțimea liniei de legătură: 1em

Spațiere

Acest modul de text va trebui să apară și în partea stângă a ecranului, de aceea adăugăm marginea din stânga. De asemenea, dorim ca spațiul dintre modulul divizor și acest modul de text să fie mai mic, acolo intră marja superioară negativă. Pentru a crea acea aliniere orizontală centrală, vom adăuga și o marjă inferioară. Și, în sfârșit, dorim ca fundalul de gradient să fie mai mare, de aceea folosim căptușeala superioară și inferioară.

• Marja superioară: -33px
• Marja inferioară: 250 px
• Marja stângă: -20px
• Căptușeală superioară: 80 px
• Căptușeală inferioară: 80 px

Clonați primul rând de navigare de câte ori este necesar

Diferitele elemente de navigare de pe pagina dvs. de navigare vor avea, mai mult sau mai puțin, aceleași setări. De aceea, vă recomandăm să clonați rândul de câte ori aveți nevoie și să faceți modificările de detaliu după aceea. Trebuie să schimbi trei lucruri, să aruncăm o privire.

Schimbați fundalul rândului

Primul lucru pe care trebuie să-l faci este să schimbi imaginile de fundal ale duplicatelor rândului tău. Din nou, asigurați-vă că utilizați o imagine cu o lățime de „1400px” și o înălțime de „943px” pentru a obține cel mai bun rezultat.

Schimbați modulul de text pentru elementul de meniu

Schimbați legătura

Apoi, deschideți elementul de navigare Modul text și modificați textul împreună cu linkul.

Schimbați fundalul de gradient în funcție de lungimea textului

În cele din urmă, va trebui să schimbați și fundalul de gradient al acestui modul text. Schimbați a doua culoare de gradient în „rgba (224,43,32,0.62)” și schimbați valoarea poziției de pornire în funcție de lungimea noului element de navigare. Dacă aveți un element de navigare care este destul de lung, veți dori să modificați procentul Poziție de pornire la o valoare mai mare până când îl vedeți că se instalează.

Recreați versiunea mobilă

Acum că am creat versiunea pentru desktop, vom crea și versiunea pentru tabletă și mobilă. Stilul diferitelor module este cam același cu versiunea desktop, dar în culise, structura rândurilor noastre este complet diferită. Datorită numeroaselor modificări pe care ar trebui să le faceți fiecărui modul dacă ar fi să le clonați, vă voi arăta pur și simplu cum să îl creați de la zero fără a clona niciun modul din versiunea Desktop.

Recreați primul rând de navigare

Începeți prin adăugarea unui alt rând la secțiunea pe care am creat-o la începutul acestei postări.

Structura coloanei

Această coloană va avea, la fel ca și versiunea pentru desktop, o singură coloană.

Dimensionare

Dimensiunea acestui rând este următoarea:

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Aceste setări se vor asigura că rândul nostru ocupă întreaga lățime a ecranului.

Vizibilitate

Și, în cele din urmă, dezactivați acest rând pe desktop, deoarece avem alte rânduri care vor fi afișate pe desktop.

Modul text pentru descrierea paginii

Setări text

Continuați și adăugați primul modul de text pe rând. Efectuați următoarele setări pentru subcategoria Text:

• Font text: Andika
• Greutatea fontului textului: regulat
• Dimensiune text: 13 px
• Culoarea textului: # 000000
• Înălțimea liniei textului: 1.1em
• Orientare text: centru

Dimensionare

Apoi, deschideți subcategoria Dimensionare și utilizați o lățime de '71% 'și o aliniere centrală a modulului.

Spațiere

În cele din urmă, acest modul de text va avea nevoie de o umplutură de sus și de jos de „10 px”. După cum puteți observa, nu este nevoie de valori de marjă în versiunea tabletă și mobilă, deoarece în schimb optăm pentru o aliniere centrală.

Modulul de text pentru elementul de meniu

Legați textul în caseta de conținut

Pentru versiunea mobilă, nu avem nevoie de un modul divizor, așa că vom sări peste acel pas. În schimb, vom adăuga imediat elementul de navigare Modul text chiar sub modulul text anterior pe care l-am creat. După ce faceți acest lucru, adăugați textul cu linkul în caseta de conținut din fila Conținut.

Culoare fundal gradient

Fundalul de gradient pe care îl vom folosi pentru acest modul de text este același cu cel al versiunii desktop:

• Prima culoare: #FFFFFF
• A doua culoare: rgba (12.113.195,0.62)
• Tipul gradientului: liniar
• Direcția gradientului: 108 grade
• Poziția inițială: 31%
• Poziție finală: 21%

Setări text link

Utilizați următoarele setări pentru subcategoria text:

• Link Font: Andika
• Greutatea fontului legăturii: îndrăzneață
• Dimensiune text: 65 px
• Culoarea textului: # 000000
• Înălțimea liniei de text: 1em
• Orientare text: stânga

Spațiere

La fel ca versiunea desktop, acest element de navigare Modulul text va avea nevoie de o căptușeală superioară și inferioară de „80 px” pentru a mări fundalul de gradient.

Modulul de imagine

Incarca imaginea

În cele din urmă, adăugați un modul de imagine ca ultimul modul din rândul dvs. și încărcați o imagine la alegere.

Clonați primul rând de navigare de câte ori este necesar

Același lucru contează pentru versiunea mobilă; puteți clona rândul pe care tocmai l-ați creat de câte ori este necesar pentru a adăuga și celelalte elemente de navigare. Există trei lucruri pe care va trebui să le modificați de fiecare dată când adăugați un nou element de navigare, să aruncăm o privire.

Schimbați modulul de text pentru elementul de meniu

Schimbați legătura

Primul lucru pe care va trebui să îl modificați este textul și linkul din caseta de conținut a filei Conținut a elementului de navigare Modulul de text.

Schimbați fundalul de gradient în funcție de lungimea textului

Apoi, puteți schimba și a doua culoare de gradient în „rgba (224,43,32,0.62)” și puteți schimba valoarea poziției de pornire în funcție de lungimea textului.

Schimbați modulul de imagine

În cele din urmă, puteți schimba și imaginea modulului de imagine din acel rând.

Rezultat

Odată ce ați creat atât versiunea desktop, cât și cea mobilă, veți avea o pagină de navigare uimitoare, care arată bine pe desktop, tabletă și telefon. Să aruncăm o ultimă privire asupra rezultatului.

Rezultat pe desktop

Rezultat pe mobil

Gânduri finale

Crearea unei pagini de navigare ca pagină de pornire va lăsa cu siguranță o urmă asupra vizitatorilor dvs. Nu numai că îi ajută pe vizitatorii dvs. să navigheze mai vizual, dar le permite, de asemenea, să vadă o privire mai elaborată pe ceea ce are de oferit site-ul dvs. web. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!

Asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să nu pierdeți niciodată un anunț mare, un sfat util sau un cadou gratuit Divi!

Imagine prezentată de LanKogal / shutterstock.com