Cum se creează o pagină de glisare orizontală cu Divi

V-ați gândit vreodată să creați o pagină complet orizontală care să utilizeze linkuri de glisare și ancorare pentru a naviga? Ei bine, dacă ai și nu știai exact cum să-l abordezi, acesta este postul ideal pentru tine. Vă vom arăta cum să creați o pagină de glisare complet orizontală folosind Divi. Această tehnică vă ajută cu adevărat să vă distingeți site-ul web de alții și să corespundă tendințelor de design web din 2019. Rezultatul pe care îl vom crea va arăta excelent pe toate dimensiunile ecranului.

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

Abordare

• Vom crea întreaga pagină folosind o singură secțiune
• Transformăm acea secțiune într-o grilă orizontală folosind câteva linii de cod CSS la sfârșitul tutorialului
• Grila orizontală va plasa fiecare rând pe o coloană orizontală
• Trebuie să decideți câte coloane orizontale conține o secțiune
• În acest caz, vom folosi 4 coloane diferite care vor fi formate din câte 2 rânduri
• Puteți modifica numărul de coloane orizontale pe care le creați și puteți determina câte rânduri conțin fiecare dintre coloanele secțiunii
• De asemenea, folosim linkuri de ancorare pentru a ajuta oamenii să navigheze prin diferitele coloane ale secțiunii
• Mai mult decât atât, adăugăm o defilare lină și un efect de fixare a defilării în secțiuni, care va facilita navigarea vizitatorilor dvs.

Să începem să recreăm

Adăugați o secțiune nouă

Culoare de fundal

Creați o pagină nouă și adăugați o secțiune obișnuită la ea. Deschideți setările secțiunii și schimbați culoarea de fundal.

• Culoare fundal: #ffffff

Spațiere

Apoi, accesați setările de spațiere și adăugați câteva umpluturi personalizate pe diferite dimensiuni de ecran.

• Căptușeală superioară: 10,5vw (desktop), 15vw (tabletă), 10vw (telefon)
• Căptușeală inferioară: 3vw (desktop și tabletă), 10vw (telefon)

Adăugați rândul # 1

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 permiteți rândului să ocupe întreaga lățime a ecranului.

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

Spațiere

Accesați setările de spațiere de mai jos și efectuați câteva modificări pentru toate dimensiunile diferite ale ecranului.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px
• Căptușeală stângă: 6vw (tabletă și telefon)
• Căptușeală dreaptă: 6vw (tabletă și telefon)
• Coloana 1 Căptușeală inferioară: 15vw (tabletă și telefon)
• Coloana 2 Căptușeală stângă: 4vw (Desktop), 0vw (Tabletă și telefon)

ID CSS

Va trebui să atribuim un ID CSS primului rând al fiecăreia dintre coloanele de secțiune pe care le creăm. Acest lucru ne va ajuta să creăm săgețile de ancorare mai târziu în acest post.

• ID CSS: glisați-1

CSS personalizat

Așa cum am menționat în secțiunea de abordare a acestui post, aplicăm mecanismului și un efect de derulare și fixare lină. Pentru a putea face acest lucru, va trebui să adăugăm o singură linie de cod CSS la primul rând al fiecăreia dintre coloanele orizontale pe care le creăm.

scroll-snap-align: start;

Adăugați Blurb Module la coloana 1

Selectați pictograma

Acum putem începe să adăugăm module! Începeți cu un modul Blurb în coloana 1. Deschideți setările modulului și selectați o pictogramă săgeată la stânga.

Setări pictograme

Apoi, accesați fila de proiectare și efectuați câteva modificări ale aspectului pictogramei.

• Culoare pictogramă: rgba (255,255,255,0)
• Plasare imagine / pictogramă: sus
• Utilizați pictograma Dimensiune font: Da
• Pictogramă Dimensiune font: 5vw (Desktop), 13vw (tabletă), 21vw (telefon)

Spațiere

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

• Marja superioară: 14vw (desktop), -11vw (tabletă), -17vw (telefon)
• Marja stângă: 60vw (tabletă și telefon)

Vizibilitate

De asemenea, ascundem modulul pe dimensiuni de ecran mai mici.

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

Adăugați conținut H2

Următorul modul de care avem nevoie este un modul de text din coloana 2. Adăugați conținut H2.

Setări text H2

Apoi, accesați fila de proiectare și modificați setările de text H2.

• Rubrica 2 Font: Sursa Serif Pro
• Titlul 2 Alinierea textului: stânga
• Rubrica 2 Dimensiune text: 3vw (desktop), 7vw (tabletă și telefon)

Dimensionare

Modificați lățimea în setările de dimensionare următoare.

• Lățime: 77%

Spațiere

Și adăugați o margine inferioară pentru dimensiuni mai mici ale ecranului.

• Marja inferioară: 15vw (tabletă și telefon)

Adăugați un modul buton la coloana 2

Adauga continut

Chiar sub modulul text pe care l-ați adăugat, continuați și adăugați un modul buton. Introduceți o copie.

Setări buton

Apoi, accesați fila de proiectare și schimbați setările butonului.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 0.9vw (Desktop), 2vw (tabletă), 3.5vw (telefon)
• Culoarea textului butonului: # 000000
• Lățimea chenarului butonului: 1 px

• Culoare margine buton: # 000000
• Raza chenarului butonului: 0 px
• Buton Font: Mukta
• Greutatea fontului: Bold
• Stilul fontului: majuscule

Spațiere

Adăugați câteva margini personalizate și umplere în continuare.

• Marja superioară: 6vw (desktop), 4vw (tabletă și telefon)
• Căptușeală superioară: 15 px
• Căptușeală inferioară: 15 px
• Căptușeală stângă: 50 px
• Căptușeală dreaptă: 50 px

Adăugați Blurb Module în coloana 3

Selectați pictograma

Următorul și ultimul modul de care avem nevoie în acest rând este un alt modul Blurb din coloana 3. Selectați o pictogramă la alegere.

Legătură

Apoi, accesați setările link-ului și adăugați un link care va conduce vizitatorii la a doua coloană orizontală a secțiunii.

• Adresa URL a modulului: https://www.yourwebsite.com/page/#swipe-2

Setări pictograme

Continuați și modificați și setările pictogramei.

• Culoare pictogramă: # 333333
• Plasare pictogramă imagine: sus
• Utilizați pictograma Dimensiune font: Da
• Pictogramă Dimensiune font: 5vw (Desktop), 13vw (tabletă), 21vw (telefon)

Spațiere

Continuați prin adăugarea unor margini superioare și stânga personalizate pe diferite dimensiuni de ecran.

• Marja superioară: 14vw (desktop), -11vw (tabletă), -17vw (telefon)
• Marja stângă: 60vw (tabletă și telefon)

Adăugați rândul # 2

Structura coloanei

Al doilea rând de care avem nevoie folosește următoarea structură de coloane:

Culoare de fundal

Fără a adăuga încă module, deschideți setările rândurilor și schimbați culoarea de fundal.

• Culoare fundal: # f7f7f7

Dimensionare

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

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

Spațiere

Împreună cu umplutura personalizată și valorile de marjă din setările de spațiere.

• Marja superioară: -3,5vw (desktop), -10vw (tabletă), -17vw (telefon)
• Căptușeală superioară: 8vw (desktop), 15vw (tabletă), 20vw (telefon)
• Căptușeală inferioară: 8vw (desktop), 15vw (tabletă), 20vw (telefon)
• Căptușeală stângă: 24vw (desktop), 5vw (tabletă și telefon)
• Căptușeală dreaptă: 24vw (desktop), 5vw (tabletă și telefon)
• Coloana 1 Căptușeala dreaptă: 2vw (desktop), 0vw (tabletă și telefon)
• Coloana 2 Căptușeală stângă: 2vw (Desktop), 0vw (Tabletă și telefon)

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

Adauga continut

Continuați și adăugați un modul de text în prima coloană. Introduceți o copie la alegere (inclusiv un titlu H3).

Setări text

Accesați fila Design și modificați setările de text.

• Font text: Deschideți Sans
• Dimensiune text: 0,65vw (desktop), 1,8vw (tabletă), 2,7vw (telefon)
• Înălțimea liniei textului: 1,8em

Setări text H3

Împreună cu setările de text H3.

• Rubrica 3 Font: Mukta
• Titlul 2 Greutate font: îndrăzneț
• Titlul 3 Stilul fontului: majuscule
• Rubrica 3 Dimensiune text: 0,8vw (Desktop), 3vw (Tabletă), 4vw (Telefon)
• Rubrica 3 Înălțimea liniei: 1,8em

Spațiere

Adăugați o margine inferioară și pentru dimensiuni mai mici ale ecranului.

• Marja inferioară: 5vw (tabletă și telefon)

Clonați modulul text și plasați în coloana 2

După ce ați terminat modificarea modulului de text din coloana 1, îl puteți clona și plasa duplicatul în a doua coloană.

Schimbați conținutul

Asigurați-vă că schimbați conținutul.

Clona rândul # 1 de trei ori

Odată ce ambele rânduri sunt terminate, puteți clona primul rând de 3 ori.

Schimbați duplicatul # 1

Schimbați ID-ul CSS rând

Va trebui să schimbăm ID-ul CSS al primului duplicat.

• ID CSS: glisați-2

Schimbați culoarea pictogramei modulului Blurb (coloana 1)

Împreună cu culoarea primului modul Blurb.

• Culoare pictogramă: # 333333

Schimbați linkurile ambelor module Blurb

Pentru ca legăturile de ancorare să funcționeze, va trebui să schimbați legătura fiecăreia dintre săgeți în consecință:

• Adresa URL a modulului: https://www.yourwebsite.com/page/#swipe-1

• Adresă URL a modulului: https://www.yourwebsite.com/page/#swipe-3

Schimbați duplicatul # 2

Schimbați ID-ul CSS rând

Schimbați ID-ul CSS al celui de-al doilea duplicat.

• ID CSS: glisați-3

Schimbați culoarea pictogramei modulului Blurb (coloana 1)

Împreună cu culoarea pictogramei primului modul Blurb.

• Culoare pictogramă: # 333333

Schimbați linkurile ambelor module Blurb

Și din nou, modificați legăturile fiecărui modul Blurb în consecință:

• Adresa URL a modulului: https://www.yourwebsite.com/page/#swipe-2

• Adresa URL a modulului: https://www.yourwebsite.com/page/#swipe-4

Schimbați duplicatul nr. 3

Schimbați ID-ul CSS

Schimbați și codul CSS al celui de-al treilea rând duplicat.

• ID CSS: glisați-4

Schimbați pictograma Blurb Module (Coloana 2)

Și selectați o altă pictogramă pentru Blurb Module în coloana 3.

Schimbați linkul modulului Blurb (coloana 2)

Asigurați-vă că, la clic, vizitatorul va fi redirecționat către prima coloană a secțiunii modificând în mod corespunzător adresa URL a linkului modulului:

• Adresa URL a modulului: https://www.yourwebsite.com/page/#swipe-1

Clona rândul # 2 de trei ori

Trecem la rândul următor. Clonați acest rând și de trei ori.

Schimbați culoarea de fundal a rândului pentru duplicatul nr. 1

Schimbați culoarea de fundal a primului duplicat.

• Culoare fundal: #dcdced

Schimbați culoarea de fundal a rândului pentru duplicatul nr. 2

Al doilea duplicat folosește următoarea culoare de fundal:

• Culoare fundal: # ffeed1

Schimbați culoarea de fundal a rândului pentru duplicatul nr. 3

Modificați și culoarea de fundal a celui de-al treilea rând duplicat.

• Culoare fundal: # d6ffe5

Adăugați codul CSS și codul CSS la secțiune

Acum, că avem toate rândurile de care avem nevoie, putem face magia să se întâmple. Adăugați un ID CSS la întreaga secțiune. Mai târziu în această postare, vom folosi acest ID CSS pentru a ascunde bara de derulare.

• CSS ID: secțiune-bară de derulare

Apoi, accesați opțiunile CSS personalizate și adăugați câteva linii de cod CSS la elementul principal.

overflow-y: scroll;
display: grid;
grid-template-columns: repeat(4, 100%);
scroll-behavior: smooth;
scroll-snap-type: x mandatory;

Cu cât doriți să creați mai multe coloane de secțiune, cu atât mai multe coloane va trebui să adăugați în codul CSS. Deci, să spunem, de exemplu, că doriți să aveți aceeași structură, dar să permiteți 7 glisări în loc de 4, va trebui să modificați coloanele șablonului de grilă linia de cod CSS în consecință:

grid-template-columns: repeat(7, 100%);

Dar rețineți că va trebui să adăugați mai multe rânduri dacă creșteți numărul coloanei. Deci, în acest caz, dacă doriți să apară două rânduri pentru fiecare coloană a secțiunii, veți avea nevoie de 14 rânduri.

Ascundeți bara de derulare

De asemenea, puteți alege să ascundeți bara de derulare utilizând secțiunea CSS ID și adăugând următoarele linii de cod CSS la setările paginii:

#section-scrollbar::-webkit-scrollbar {
display: none;
}

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

Când proiectați site-uri web cu Divi, cel mai simplu lucru de făcut este să construiți în jos. Dar doar pentru că este cel mai simplu lucru de făcut, nu înseamnă că ești limitat la această opțiune. Puteți crea și o pagină de glisare complet orizontală. În acest tutorial, v-am arătat cum să realizați un design web uimitor cu glisare orizontală folosind Divi. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!