Crearea Navigării laterale a coloanei personalizate pentru One-Pagers cu Divi

Când decideți să creați un singur pager, experiența utilizatorului de navigare devine complet diferită. Deși oamenii nu sunt meniți să părăsească pagina, doriți să le faceți șederea ușor de utilizat. De aceea, majoritatea paginatorilor unici folosesc linkuri de ancorare în pagină. Puteți plasa aceste legături de ancorare într-un meniu tradițional de sus sau puteți alege în schimb navigarea laterală. În acest tutorial, vă vom arăta cum să creați un frumos design de navigare laterală a coloanei pentru pagina dvs. utilizând noile opțiuni ale coloanelor Divi. Vom încadra toate elementele într-o înălțime de 100 de ferestre pentru a crea o experiență pe ecran complet. 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 aspectul de navigare laterală a coloanei

Pentru a vă pune mâna pe aspectul gratuit de navigare laterală a coloanei, 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

Creați o pagină goală nouă

Primul lucru pe care va trebui să-l faceți este să creați o nouă pagină goală. După ce faceți acest lucru, comutați la Visual Builder.

Adăugați o secțiune nouă

Culoare de fundal

Vom încadra tot conținutul paginii într-o singură secțiune, un rând și două coloane. Adăugați o nouă secțiune obișnuită pe pagina dvs. cu o culoare de fundal alb.

• Culoare fundal: #FFFFFF

Spațiere

Eliminați toate umpluturile implicite de sus și de jos ale secțiunii.

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

Adăugați un rând nou

Structura coloanei

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

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și modificați setările de dimensionare în consecință:

• Egalizați înălțimile coloanei: Da
• Lățime: 100%
• Lățime maximă: 100%
• Înălțime: 100vh

Spațiere

Treceți la setările de spațiere și eliminați toate umpluturile implicite de sus și de jos.

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

Setări coloana 1

După ce ați completat setările generale de rând, deschideți setările coloanei 1.

Culoare de fundal

Adăugați o culoare de fundal alb.

• Culoare fundal: #FFFFFF

Box Shadow

Împreună cu o umbră de cutie subtilă.

• Poziție orizontală a umbrei cutiei: 80 px
• Puterea neclarității umbrei cutiei: 75 px
• Culoare umbră: rgba (0,0,0,0.07)

Scară de transformare

De asemenea, micșorăm dimensiunea coloanei de pe desktop.

• Partea de jos: 75% (desktop), 100% (tabletă și telefon)
• Dreapta: 75% (desktop), 100% (tabletă și telefon)

Transformă Traducere

Schimbați poziția coloanei folosind câteva setări de traducere personalizate pentru transformare.

• Partea de jos: -5vw (Desktop), 0 px (tabletă și telefon)
• Dreapta: 0 px

Setări coloana 2

Continuați deschizând setările coloanei 2.

Spațiere

Treceți la fila de proiectare și adăugați următoarele valori de umplere la stânga și la dreapta pe diferite dimensiuni ale ecranului:

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

Clasa CSS

Mai târziu în postare, vom adăuga o derulare netedă și vom ascunde bara de derulare. Pentru a face acest lucru, va trebui să adăugăm la coloană o clasă CSS personalizată.

• Clasa CSS: coloană scroll

Vizibilitate

Modulele pe care le adăugăm în a doua coloană vor reprezenta conținutul paginii noastre. Pentru a permite derularea, vom schimba setările de revărsare.

• Overflow orizontal: Ascuns
• Vertical Overflow: Derulați

Adăugați modulul de text al elementului de meniu în coloana 1

Adăugați o copie

Să începem să adăugăm module! Adăugați un prim element de meniu Modul text în coloana 1 cu un conținut la alegere.

Adăugați un link

Adăugați un link de ancorare la elementul de meniu.

• Adresă URL a modulului: www.yourwebsite.com/yourpage/#home

Setări text

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

• Font text: Montserrat
• Aliniere text: centru
• Culoarea textului: # 383838
• Dimensiune text: 3vw
• Spațierea literelor text: -3px (desktop), -2px (tabletă), -1px (telefon)

Spațiere

Adăugați câteva valori personalizate ale marginilor de sus și de jos în continuare.

• Marja superioară: 23vw (desktop), 3vw (tabletă și telefon)
• Marja inferioară: 3vw (desktop), 2vw (tabletă), 1vw (telefon)

Clonați meniul de două ori

După ce ați finalizat primul element de meniu, clonați-l de două ori.

Schimbați conținutul ambelor duplicate

Schimbați conținutul elementului de meniu al ambelor duplicate.

Schimbați legăturile ambelor duplicate

Împreună cu legăturile de ancorare.

• Duplicat 1: / # despre
• Duplicat 2: / # servicii

Schimbați spațiul ambelor duplicate

Completați duplicatele modificând valorile de spațiu în consecință:

• Marja superioară: 3vw (desktop), 2vw (tabletă), 1vw (telefon)
• Marja inferioară: 3vw (desktop), 2vw (tabletă), 1vw (telefon)

Adăugați un modul divizor în coloana 1

Vizibilitate

Adăugați un modul divizor chiar între primul și al doilea modul de text din coloana 1. Asigurați-vă că opțiunea „Afișează divizorul” este activată.

• Show Divider: Da

Linia

Schimbați culoarea liniei în continuare.

• Culoare linie: # ffebc9

Dimensionare

Împreună cu setările de dimensionare.

• Greutatea divizorului: 1vw
• Înălțime: 0px

Modul divizor clonă

Clonați modulul divizor și plasați duplicatul sub al doilea modul text.

Adăugați modulul Social Media Follow în coloana 1

Adăugați rețele sociale

Următorul și ultimul modul de care avem nevoie în coloana 1 este un modul Social Follow Follow. Adăugați rețelele sociale la alegere.

Aliniere

Apoi, accesați fila de proiectare și schimbați alinierea modulului.

• Alinierea modulului: centru

Spațiere

Modificați valorile marginilor în continuare.

• Marja superioară: 12vw (desktop), 5vw (tabletă și telefon)
• Marja inferioară: 3vw (tabletă și telefon)

Frontieră

Și adăugați „50vw” la fiecare colț pentru a crea o formă circulară.

Adăugați modulul de imagine în coloana 2

Incarca imaginea

Trecem la a doua coloană! Adăugați toate modulele pe care le doriți, dar nu uitați să adăugați un ID CSS la fiecare modul la care doriți să se refere un link de ancorare. Dacă doriți să recreați designul exact care a fost afișat în previzualizarea acestei postări, începeți prin adăugarea unui modul de imagine și încărcați o imagine la alegere.

Aliniere

Treceți la fila de proiectare și alegeți alinierea imaginii din stânga.

• Aliniere imagine: Stânga

Dimensionare

Modificați setările de dimensionare în continuare.

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

Spațiere

Și adăugați niște umplutură potrivită.

• Garnitura dreapta: 20vw

ID CSS

În cele din urmă, accesați fila avansată și adăugați primul ID CSS. Asigurați-vă că aceasta se potrivește cu linkul de ancorare al primului element de meniu.

• ID CSS: Acasă

Adăugați modulul de text al titlului în coloana 2

Adăugați conținut H2

Treceți la modulul următor, care este 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: Montserrat
• Titlul 2 Alinierea textului: stânga
• Rubrica 2 Culoare text: # 383838
• Titlul 2 Dimensiune text: 2vw (desktop), 4vw (tabletă), 5vw (telefon)
• Rubrica 2 Spațierea literelor: -1 px

Spațiere

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

• Marja superioară: 6vw (desktop), 10vw (tabletă), 12vw (telefon)
• Marja inferioară: 2vw (desktop), 4vw (tabletă), 6vw (telefon)

Adăugați modulul divizor în coloana 2

Vizibilitate

Următorul modul de care avem nevoie este un modul divizor. Asigurați-vă că opțiunea „Afișează divizorul” este activată.

• Show Divider: Da

Linia

Modificați culoarea liniei.

• Culoare linie: # ffebc9

Dimensionare

Și modificați setările de dimensionare în consecință:

• Greutatea divizorului: 15 px
• Lățime: 16%
• Alinierea modulului: stânga

Adăugați modulul de text al corpului în coloana 2

Adauga continut

Adăugați un alt modul de text la a doua coloană cu un conținut de paragraf la alegere.

Setări text

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

• Font text: Roboto
• Alinierea textului: justificați
• Culoarea textului: # a8a8a8
• Dimensiune text: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Spațiere scrisoare text: 1 px
• Înălțimea liniei de text: 2vw (desktop), 3,5vw (tabletă), 4,5vw (telefon)

Spațiere

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

• Marja superioară: 3vw (desktop), 5vw (tabletă), 7vw (telefon)
• Marja inferioară: 3vw (desktop), 5vw (tabletă), 7vw (telefon)
• Marja dreaptă: 20vw (desktop și tabletă), 5vw (telefon)

Adăugați un modul buton la coloana 2

Adauga continut

Continuați adăugând un modul buton cu o copie la alegere.

Aliniere

Selectați alinierea butonului stâng în fila de proiectare.

• Aliniere buton: stânga

Buton

Modificați setările butonului în consecință:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # 0072ff
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 0 px
• Buton Font: Montserrat
• Buton Font Greutate: Semi Bold

Spațiere

Și jucați-vă și cu valorile spațierii.

• Marja superioară: 4vw (desktop), 6vw (tabletă), 8vw (telefon)
• Marja inferioară: 4vw (desktop), 6vw (tabletă), 8vw (telefon)
• Căptușeală superioară: 1,5vw (desktop), 3vw (tabletă), 4vw (telefon)
• Căptușeală inferioară: 1,5vw (desktop), 3vw (tabletă), 4vw (telefon)
• Căptușeală stângă: 3vw (desktop), 6vw (tabletă), 8vw (telefon)
• Căptușeală dreaptă: 3vw (desktop), 6vw (tabletă), 8vw (telefon)

Clonați toate modulele din coloana 2 de două ori și plasați în aceeași ordine

După ce ați finalizat toate modulele din coloana 2, le puteți clona de două ori și le puteți plasa în ordinea corectă.

Schimbați ID-ul CSS al modulului de imagine duplicat # 1

Schimbați ID-ul CSS al primului modul de imagine duplicat.

• ID CSS: aproximativ

Schimbați ID-ul CSS al modulului de imagine duplicat # 2

Faceți același lucru pentru al doilea modul de imagine duplicat.

• CSS ID: servicii

Ascundeți bara de derulare și adăugați o derulare netedă

Deschideți Setări pagină

Acum, pentru a crea un efect de derulare neted și a ascunde bara de derulare a coloanei 2, vom adăuga câteva linii de cod CSS. Deschideți setările paginii.

Adăugați CSS personalizat

Apoi, accesați fila avansată și adăugați un cod CSS. După ce ați parcurs acest pas, ați terminat!

.scroll-column::-webkit-scrollbar {
display: none;
}

.scroll-column {
scroll-behavior: smooth;
}

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 această postare, v-am arătat cum să creați o navigare frumoasă pe coloană pentru un singur pager, cu noile opțiuni ale coloanei Divi. Acesta este un mod excelent de a adăuga linkuri ancoră la pagina dvs., care vă vor ajuta să îmbunătățiți experiența utilizatorului site-ului 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!

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.