Come creare una pagina a scorrimento completamente orizzontale con Divi

Hai mai pensato di creare una pagina completamente orizzontale che utilizzi i collegamenti di scorrimento e di ancoraggio per navigare? Bene, se lo hai fatto e non sapevi esattamente come affrontarlo, questo è il post ideale per te. Ti mostreremo come creare una pagina a scorrimento completamente orizzontale usando Divi. Questa tecnica ti aiuta davvero a far risaltare il tuo sito web dagli altri e corrisponde alle tendenze del web design del 2019. Il risultato che creeremo sarà fantastico su tutte le dimensioni dello schermo.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Approccio

• Creeremo l'intera pagina utilizzando una sola sezione
• Stiamo trasformando quella sezione in una griglia orizzontale usando alcune righe di codice CSS alla fine del tutorial
• La griglia orizzontale posizionerà ciascuna delle righe in una colonna posizionata orizzontalmente
• Puoi decidere quante colonne orizzontali contiene una sezione
• In questo caso, utilizzeremo 4 colonne diverse che saranno composte ciascuna da 2 righe
• Puoi modificare il numero di colonne orizzontali che crei e determinare quante righe contiene ciascuna delle colonne della sezione
• Utilizziamo anche collegamenti di ancoraggio per aiutare le persone a navigare tra le diverse colonne delle sezioni
• Inoltre, stiamo aggiungendo uno scorrimento uniforme e un effetto di aggancio dello scorrimento della sezione che faciliterà la navigazione per i tuoi visitatori

Iniziamo a ricreare

Aggiungi nuova sezione

Colore di sfondo

Crea una nuova pagina e aggiungi una sezione normale. Apri le impostazioni della sezione e cambia il colore di sfondo.

• Colore di sfondo: #ffffff

Spaziatura

Quindi, vai alle impostazioni di spaziatura e aggiungi un'imbottitura personalizzata su diverse dimensioni dello schermo.

• Imbottitura superiore: 10.5vw (desktop), 15vw (tablet), 10vw (telefono)
• Imbottitura inferiore: 3vw (desktop e tablet), 10vw (telefono)

Aggiungi riga n. 1

Struttura della colonna

Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e consenti alla riga di occupare l'intera larghezza dello schermo.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Spaziatura

Vai alle impostazioni di spaziatura successiva e apporta alcune modifiche su tutte le diverse dimensioni dello schermo.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px
• Imbottitura sinistra: 6vw (tablet e telefono)
• Imbottitura destra: 6vw (tablet e telefono)
• Imbottitura inferiore colonna 1: 15vw (tablet e telefono)
• Imbottitura sinistra della colonna 2: 4vw (desktop), 0vw (tablet e telefono)

ID CSS

Avremo bisogno di assegnare un ID CSS alla prima riga di ciascuna delle colonne di sezione che creiamo. Questo ci aiuterà a creare le frecce di ancoraggio più avanti in questo post.

• ID CSS: scorrimento-1

CSS personalizzato

Come menzionato nella sezione relativa all'approccio di questo post, stiamo anche applicando al meccanismo un effetto di scorrimento uniforme e di aggancio. Per poterlo fare, dovremo aggiungere una singola riga di codice CSS alla prima riga di ciascuna delle colonne orizzontali che creiamo.

scroll-snap-align: start;

Aggiungi modulo Blurb alla colonna 1

Seleziona icona

Ora possiamo iniziare ad aggiungere moduli! Inizia con un modulo Blurb nella colonna 1. Apri le impostazioni del modulo e seleziona un'icona a forma di freccia sinistra.

Impostazioni icona

Quindi, vai alla scheda Design e apporta alcune modifiche all'aspetto dell'icona.

• Colore icona: rgba (255,255,255,0)
• Posizionamento immagine/icona: in alto
• Usa dimensione carattere icona: Sì
• Dimensione carattere icona: 5vw (desktop), 13vw (tablet), 21vw (telefono)

Spaziatura

Aggiungi successivamente alcuni valori di margine personalizzati.

• Margine superiore: 14vw (desktop), -11vw (tablet), -17vw (telefono)
• Margine sinistro: 60vw (tablet e telefono)

Visibilità

Nascondiamo il modulo anche su schermi di dimensioni inferiori.

Aggiungi modulo di testo alla colonna 2

Aggiungi contenuto H2

Il prossimo modulo di cui abbiamo bisogno è un modulo di testo nella colonna 2. Aggiungi del contenuto H2.

Impostazioni testo H2

Quindi, vai alla scheda Design e modifica le impostazioni del testo H2.

• Carattere titolo 2: Source Serif Pro
• Intestazione 2 Allineamento del testo: a sinistra
• Titolo 2: Dimensione testo: 3vw (desktop), 7vw (tablet e telefono)

Dimensionamento

Modificare la larghezza nelle impostazioni di dimensionamento successivo.

• Larghezza: 77%

Spaziatura

E aggiungi un margine inferiore per schermi di dimensioni più piccole.

• Margine inferiore: 15vw (tablet e telefono)

Aggiungi modulo pulsante alla colonna 2

Aggiungi contenuto

Proprio sotto il modulo di testo che hai aggiunto, vai avanti e aggiungi un modulo pulsante. Inserisci qualche copia.

Impostazioni dei pulsanti

Quindi, vai alla scheda Design e modifica le impostazioni del pulsante.

• Usa stili personalizzati per il pulsante: Sì
• Dimensione del testo del pulsante: 0.9vw (desktop), 2vw (tablet), 3.5vw (telefono)
• Colore del testo del pulsante: #000000
• Larghezza bordo pulsante: 1px

• Colore bordo pulsante: #000000
• Raggio bordo pulsante: 0px
• Carattere pulsante: Mukta
• Peso del carattere: grassetto
• Stile carattere: maiuscolo

Spaziatura

Aggiungi un margine personalizzato e un'imbottitura successiva.

• Margine superiore: 6vw (desktop), 4vw (tablet e telefono)
• Imbottitura superiore: 15px
• Imbottitura inferiore: 15px
• Imbottitura sinistra: 50 px
• Imbottitura destra: 50px

Aggiungi modulo Blurb alla colonna 3

Seleziona icona

Il prossimo e ultimo modulo di cui abbiamo bisogno in questa riga è un altro modulo Blurb nella colonna 3. Seleziona un'icona a tua scelta.

Collegamento

Quindi, vai alle impostazioni del collegamento e aggiungi un collegamento che conduca i visitatori alla seconda colonna orizzontale della sezione.

• URL collegamento modulo: https://www.yourwebsite.com/page/#swipe-2

Impostazioni icona

Vai avanti e modifica anche le impostazioni dell'icona.

• Colore icona: #333333
• Posizionamento dell'icona dell'immagine: in alto
• Usa dimensione carattere icona: Sì
• Dimensione carattere icona: 5vw (desktop), 13vw (tablet), 21vw (telefono)

Spaziatura

Continua aggiungendo un margine superiore e sinistro personalizzato su diverse dimensioni dello schermo.

• Margine superiore: 14vw (desktop), -11vw (tablet), -17vw (telefono)
• Margine sinistro: 60vw (tablet e telefono)

Aggiungi riga #2

Struttura della colonna

La seconda riga di cui abbiamo bisogno utilizza la seguente struttura a colonne:

Colore di sfondo

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e cambia il colore di sfondo.

• Colore di sfondo: #f7f7f7

Dimensionamento

Modificare le impostazioni di dimensionamento successivamente.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Spaziatura

Insieme al riempimento personalizzato e ai valori dei margini nelle impostazioni di spaziatura.

• Margine superiore: -3,5 vw (desktop), -10 vw (tablet), -17 vw (telefono)
• Imbottitura superiore: 8vw (desktop), 15vw (tablet), 20vw (telefono)
• Imbottitura inferiore: 8vw (desktop), 15vw (tablet), 20vw (telefono)
• Imbottitura sinistra: 24vw (desktop), 5vw (tablet e telefono)
• Imbottitura destra: 24vw (desktop), 5vw (tablet e telefono)
• Imbottitura destra della colonna 1: 2vw (desktop), 0vw (tablet e telefono)
• Imbottitura sinistra della colonna 2: 2vw (desktop), 0vw (tablet e telefono)

Aggiungi modulo di testo alla colonna 1

Aggiungi contenuto

Vai avanti e aggiungi un modulo di testo alla prima colonna. Inserisci una copia a tua scelta (incluso un titolo H3).

Impostazioni testo

Vai alla scheda Design e modifica le impostazioni del testo.

• Carattere del testo: Open Sans
• Dimensioni del testo: 0,65 vw (desktop), 1,8 vw (tablet), 2,7 vw (telefono)
• Altezza riga di testo: 1,8 em

Impostazioni testo H3

Insieme alle impostazioni del testo H3.

• Intestazione 3 Carattere: Mukta
• Intestazione 2 Peso del carattere: grassetto
• Intestazione 3 Stile carattere: maiuscolo
• Titolo 3: Dimensione testo: 0.8vw (desktop), 3vw (tablet), 4vw (telefono)
• Altezza della linea di intestazione 3: 1,8 em

Spaziatura

Aggiungi un margine inferiore anche per schermi di dimensioni più piccole.

• Margine inferiore: 5vw (tablet e telefono)

Clona modulo testo e posiziona nella colonna 2

Dopo aver modificato il modulo di testo nella colonna 1, puoi clonarlo e posizionare il duplicato nella seconda colonna.

Modifica contenuto

Assicurati di modificare il contenuto.

Clona riga n. 1 tre volte

Una volta completate entrambe le righe, puoi clonare la prima riga 3 volte.

Modifica duplicato #1

Modifica ID CSS riga

Dovremo cambiare l'ID CSS del primo duplicato.

• ID CSS: swipe-2

Cambia il colore dell'icona del modulo Blurb (colonna 1)

Insieme al colore del primo modulo Blurb.

• Colore icona: #333333

Cambia i link di entrambi i moduli Blurb

Per far funzionare i collegamenti di ancoraggio, dovrai modificare il collegamento di ciascuna delle frecce di conseguenza:

• URL collegamento modulo: https://www.yourwebsite.com/page/#swipe-1

• URL collegamento modulo: https://www.yourwebsite.com/page/#swipe-3

Cambia duplicato #2

Modifica ID CSS riga

Modifica l'ID CSS del secondo duplicato.

• ID CSS: swipe-3

Cambia il colore dell'icona del modulo Blurb (colonna 1)

Insieme al colore dell'icona del primo modulo Blurb.

• Colore icona: #333333

Cambia i link di entrambi i moduli Blurb

E ancora, modifica di conseguenza i collegamenti di ciascun modulo Blurb:

• URL collegamento modulo: https://www.yourwebsite.com/page/#swipe-2

• URL collegamento modulo: https://www.yourwebsite.com/page/#swipe-4

Cambia duplicato n. 3

Modifica ID CSS

Modifica anche l'ID CSS del duplicato della terza riga.

• ID CSS: scorrimento-4

Cambia l'icona del modulo Blurb (colonna 2)

E seleziona un'altra icona per il Modulo Blurb nella colonna 3.

Cambia il collegamento del modulo Blurb (colonna 2)

Assicurati che al clic, il visitatore venga reindirizzato alla prima colonna della sezione modificando di conseguenza l'URL del collegamento al modulo:

• URL collegamento modulo: https://www.yourwebsite.com/page/#swipe-1

Clona riga n. 2 tre volte

Alla prossima riga. Clona anche questa riga tre volte.

Cambia il colore di sfondo della riga del duplicato n. 1

Cambia il colore di sfondo del primo duplicato.

• Colore di sfondo: #dcdced

Cambia il colore di sfondo della riga del duplicato n. 2

Il secondo duplicato utilizza il seguente colore di sfondo:

• Colore di sfondo: #ffeed1

Cambia il colore di sfondo della riga del duplicato n. 3

Cambia anche il colore di sfondo della terza riga duplicata.

• Colore di sfondo: #d6ffe5

Aggiungi ID CSS e codice CSS alla sezione

Ora che abbiamo tutte le righe di cui abbiamo bisogno, possiamo realizzare la magia. Aggiungi un ID CSS all'intera sezione. Più avanti in questo post, useremo questo ID CSS per nascondere la barra di scorrimento.

• ID CSS: barra di scorrimento sezione

Quindi, vai alle opzioni CSS personalizzate e aggiungi alcune righe di codice CSS all'elemento principale.

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

Più colonne di sezione vuoi creare, più colonne dovrai aggiungere nel codice CSS. Quindi, supponiamo, ad esempio, che desideri avere la stessa struttura ma consentire 7 passaggi anziché 4, dovrai modificare la riga di codice CSS delle colonne del modello di griglia di conseguenza:

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

Ma tieni presente che dovrai aggiungere più righe se stai aumentando il numero di colonna. Quindi, in questo caso, se vuoi che appaiano due righe per colonna di sezione, avrai bisogno di 14 righe.

Nascondi barra di scorrimento

Puoi anche scegliere di nascondere la barra di scorrimento utilizzando la sezione ID CSS e aggiungendo le seguenti righe di codice CSS alle impostazioni della pagina:

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

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Pensieri finali

Quando si progettano siti Web con Divi, la cosa più semplice da fare è creare verso il basso. Ma solo perché è la cosa più semplice da fare, non significa che sei limitato a questa opzione. Puoi anche creare una pagina a scorrimento completamente orizzontale. In questo tutorial, ti abbiamo mostrato come ottenere uno straordinario web design a scorrimento orizzontale utilizzando Divi. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!