Creazione di una navigazione laterale personalizzata della colonna per One-Pager con Divi

Quando decidi di creare una pagina singola, l'esperienza utente di navigazione diventa completamente diversa. Sebbene le persone non siano destinate a lasciare la pagina, vuoi rendere il loro soggiorno facile da usare. Ecco perché la maggior parte degli utenti di una pagina utilizza collegamenti di ancoraggio in-page. Puoi posizionare questi collegamenti di ancoraggio in un menu principale tradizionale o scegliere invece la navigazione laterale. In questo tutorial, ti mostreremo come creare un bellissimo design di navigazione laterale delle colonne per la tua pagina utilizzando le nuove opzioni di colonne di Divi. Inseriremo tutti gli elementi in un'altezza di 100 viewport per creare un'esperienza a schermo intero. Potrai anche scaricare gratuitamente il file JSON!

Andiamo ad esso.

Anteprima

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

Desktop

Mobile

Scarica GRATUITAMENTE il layout di navigazione laterale della colonna

Per mettere le mani sul layout di navigazione laterale della colonna gratuita, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Iniziamo a ricreare!

Iscriviti al nostro canale Youtube

Crea nuova pagina vuota

La prima cosa che devi fare è creare una nuova pagina vuota. Una volta fatto, passa a Visual Builder.

Aggiungi nuova sezione

Colore di sfondo

Andremo ad adattare tutto il contenuto della nostra pagina in una sezione, una riga e due colonne. Aggiungi una nuova sezione normale alla tua pagina con un colore di sfondo bianco.

• Colore di sfondo: #FFFFFF

Spaziatura

Rimuovi tutto il riempimento superiore e inferiore predefinito della sezione.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi nuova riga

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 modifica le impostazioni di dimensionamento di conseguenza:

• Equalizza le altezze delle colonne: Sì
• Larghezza: 100%
• Larghezza massima: 100%
• Altezza: 100vh

Spaziatura

Passa alle impostazioni di spaziatura e rimuovi tutto il riempimento superiore e inferiore predefinito.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Impostazioni colonna 1

Una volta completate le impostazioni generali della riga, apri le impostazioni della colonna 1.

Colore di sfondo

Aggiungi un colore di sfondo bianco.

• Colore di sfondo: #FFFFFF

Scatola ombra

Insieme a un'ombra sottile della scatola.

• Posizione orizzontale dell'ombra del riquadro: 80 px
• Forza sfocatura ombra scatola: 75 px
• Colore ombra: rgba(0,0,0,0.07)

Trasforma scala

Stiamo anche riducendo le dimensioni della colonna sul desktop.

• In basso: 75% (desktop), 100% (tablet e telefono)
• A destra: 75% (desktop), 100% (tablet e telefono)

Trasforma Traduci

Modificare la posizione della colonna utilizzando successivamente alcune impostazioni di conversione di trasformazione personalizzate.

• In basso: -5vw (desktop), 0px (tablet e telefono)
• Destra: 0px

Impostazioni colonna 2

Continua aprendo le impostazioni della colonna 2.

Spaziatura

Passa alla scheda Design e aggiungi i seguenti valori di riempimento sinistro e destro su diverse dimensioni dello schermo:

• Imbottitura sinistra: 2vw (Desktop), 4vw (Tablet), 5vw (Telefono)
• Imbottitura destra: 2vw (Desktop), 4vw (Tablet), 5vw (Telefono)

Classe CSS

Più avanti nel post, aggiungeremo uno scorrimento uniforme e nasconderemo la barra di scorrimento. Per fare ciò, dovremo aggiungere una classe CSS personalizzata alla colonna.

• Classe CSS: scroll-colonna

Visibilità

I moduli che aggiungiamo nella seconda colonna rappresenteranno il contenuto della nostra pagina. Per consentire lo scorrimento, modificheremo le impostazioni di overflow.

• Overflow orizzontale: nascosto
• Overflow verticale: scorrimento

Aggiungi il modulo di testo della voce di menu alla colonna 1

Aggiungi copia

Iniziamo ad aggiungere moduli! Aggiungi una prima voce di menu Modulo di testo alla colonna 1 con un contenuto a tua scelta.

Aggiungi collegamento

Aggiungi un collegamento di ancoraggio alla voce di menu.

• URL del collegamento al modulo: www.yourwebsite.com/yourpage/#home

Impostazioni testo

Passa alla scheda Design e modifica le impostazioni del testo di conseguenza:

• Carattere del testo: Montserrat
• Allineamento del testo: Centro
• Colore del testo: #383838
• Dimensione del testo: 3vw
• Spaziatura tra lettere del testo: -3px (desktop), -2px (tablet), -1px (telefono)

Spaziatura

Aggiungi successivamente alcuni valori di margine superiore e inferiore personalizzati.

• Margine superiore: 23vw (desktop), 3vw (tablet e telefono)
• Margine inferiore: 3vw (desktop), 2vw (tablet), 1vw (telefono)

Clona voce di menu due volte

Una volta completata la prima voce di menu, clonala due volte.

Modifica il contenuto di entrambi i duplicati

Modificare il contenuto della voce di menu di entrambi i duplicati.

Cambia i collegamenti di entrambi i duplicati

Insieme ai collegamenti di ancoraggio.

• Duplicato 1: /#about
• Duplicato 2: /#servizi

Cambia la spaziatura di entrambi i duplicati

Completa i duplicati modificando i valori di spaziatura di conseguenza:

• Margine superiore: 3vw (desktop), 2vw (tablet), 1vw (telefono)
• Margine inferiore: 3vw (desktop), 2vw (tablet), 1vw (telefono)

Aggiungi modulo divisore alla colonna 1

Visibilità

Aggiungi un modulo divisore proprio tra il primo e il secondo modulo di testo nella colonna 1. Assicurati che l'opzione "Mostra divisore" sia abilitata.

• Mostra divisore: Sì

Linea

Cambia il colore della linea dopo.

• Colore linea: #ffebc9

Dimensionamento

Insieme alle impostazioni di dimensionamento.

• Peso del divisore: 1vw
• Altezza: 0px

Modulo divisore clone

Clona il modulo divisore e posiziona il duplicato sotto il secondo modulo di testo.

Aggiungi il modulo Segui social media alla colonna 1

Aggiungi social network

Il prossimo e ultimo modulo di cui abbiamo bisogno nella colonna 1 è un modulo di follow sui social media. Aggiungi i social network di tua scelta.

Allineamento

Quindi, vai alla scheda Progettazione e modifica l'allineamento del modulo.

• Allineamento del modulo: Centro

Spaziatura

Modificare successivamente i valori dei margini.

• Margine superiore: 12vw (desktop), 5vw (tablet e telefono)
• Margine inferiore: 3vw (tablet e telefono)

Frontiera

E aggiungi "50vw" a ciascuno degli angoli per creare una forma circolare.

Aggiungi modulo immagine alla colonna 2

Carica immagine

Alla seconda colonna! Aggiungi tutti i moduli che desideri, ma non dimenticare di aggiungere un ID CSS a ciascun modulo a cui desideri fare riferimento un collegamento di ancoraggio. Se vuoi ricreare il design esatto che è stato mostrato nell'anteprima di questo post, inizia aggiungendo un modulo immagine e carica un'immagine a tua scelta.

Allineamento

Passa alla scheda Design e scegli l'allineamento dell'immagine a sinistra.

• Allineamento immagine: a sinistra

Dimensionamento

Modificare le impostazioni di dimensionamento successivo.

• Forza intera larghezza: Sì

Spaziatura

E aggiungi un po' di imbottitura giusta.

• Imbottitura destra: 20vw

ID CSS

Infine, vai alla scheda Avanzate e aggiungi il primo ID CSS. Assicurati che corrisponda al link di ancoraggio della prima voce di menu.

• ID CSS: Home

Aggiungi il modulo di testo del titolo alla colonna 2

Aggiungi contenuto H2

Al modulo successivo, che è un modulo di testo. Inserisci alcuni contenuti H2 a tua scelta.

Impostazioni testo H2

Passa alla scheda Design e modifica le impostazioni del testo H2 di conseguenza:

• Intestazione 2 Carattere: Montserrat
• Intestazione 2 Allineamento del testo: a sinistra
• Colore testo titolo 2: #383838
• Titolo 2: Dimensione testo: 2vw (desktop), 4vw (tablet), 5vw (telefono)
• Intestazione 2 Spaziatura lettere: -1px

Spaziatura

Aggiungi successivamente alcuni valori di margine personalizzati.

• Margine superiore: 6vw (desktop), 10vw (tablet), 12vw (telefono)
• Margine inferiore: 2vw (desktop), 4vw (tablet), 6vw (telefono)

Aggiungi modulo divisore alla colonna 2

Visibilità

Il modulo successivo di cui abbiamo bisogno è un modulo divisore. Assicurati che l'opzione "Mostra divisore" sia abilitata.

• Mostra divisore: Sì

Linea

Modifica il colore della linea.

• Colore linea: #ffebc9

Dimensionamento

E modifica le impostazioni di dimensionamento di conseguenza:

• Peso del divisore: 15 px
• Larghezza: 16%
• Allineamento del modulo: a sinistra

Aggiungi il modulo del corpo del testo alla colonna 2

Aggiungi contenuto

Aggiungi un altro modulo di testo alla seconda colonna con un contenuto di paragrafo a tua scelta.

Impostazioni testo

Passa alla scheda Design e modifica le impostazioni del testo di conseguenza:

• Carattere del testo: Roboto
• Allineamento del testo: giustifica
• Colore del testo: #a8a8a8
• Dimensione del testo: 1vw (desktop), 2vw (tablet), 3vw (telefono)
• Spaziatura delle lettere del testo: 1px
• Altezza riga di testo: 2vw (desktop), 3.5vw (tablet), 4.5vw (telefono)

Spaziatura

Aggiungi successivamente alcuni valori di spaziatura personalizzati.

• Margine superiore: 3vw (desktop), 5vw (tablet), 7vw (telefono)
• Margine inferiore: 3vw (desktop), 5vw (tablet), 7vw (telefono)
• Margine destro: 20vw (desktop e tablet), 5vw (telefono)

Aggiungi modulo pulsante alla colonna 2

Aggiungi contenuto

Continua aggiungendo un modulo pulsante con una copia a tua scelta.

Allineamento

Seleziona l'allineamento del pulsante sinistro nella scheda Progettazione.

• Allineamento dei pulsanti: a sinistra

Pulsante

Modificare le impostazioni del pulsante di conseguenza:

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 1vw (desktop), 2vw (tablet), 3vw (telefono)
• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: #0072ff
• Larghezza bordo pulsante: 0px
• Raggio bordo pulsante: 0px
• Carattere pulsante: Montserrat
• Peso del carattere del pulsante: semi grassetto

Spaziatura

E gioca anche con i valori di spaziatura.

• Margine superiore: 4vw (desktop), 6vw (tablet), 8vw (telefono)
• Margine inferiore: 4vw (desktop), 6vw (tablet), 8vw (telefono)
• Imbottitura superiore: 1.5vw (desktop), 3vw (tablet), 4vw (telefono)
• Imbottitura inferiore: 1.5vw (desktop), 3vw (tablet), 4vw (telefono)
• Imbottitura sinistra: 3vw (Desktop), 6vw (Tablet), 8vw (Telefono)
• Imbottitura destra: 3vw (Desktop), 6vw (Tablet), 8vw (Telefono)

Clona tutti i moduli nella colonna 2 due volte e posizionali nello stesso ordine

Una volta completati tutti i moduli nella colonna 2, puoi clonarli due volte e posizionarli nell'ordine corretto.

Modifica immagine duplicata Modulo #1 CSS ID

Modificare l'ID CSS del primo modulo immagine duplicato.

• ID CSS: circa

Modifica l'ID CSS del modulo n. 2 dell'immagine duplicata

Fai lo stesso per il secondo modulo immagine duplicato.

• ID CSS: servizi

Nascondi la barra di scorrimento e aggiungi scorrimento uniforme

Apri le impostazioni della pagina

Ora, per creare un effetto di scorrimento uniforme e nascondere la barra di scorrimento della colonna 2, aggiungeremo alcune righe di codice CSS. Apri le impostazioni della pagina.

Aggiungi CSS personalizzato

Quindi, vai alla scheda Avanzate e aggiungi del codice CSS. Una volta completato questo passaggio, il gioco è fatto!

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

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

Anteprima

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

Desktop

Mobile

Pensieri finali

In questo post, ti abbiamo mostrato come creare una bella navigazione laterale a colonne per il tuo one-pager con le nuove opzioni di colonna di Divi. Questo è un ottimo modo per aggiungere link di ancoraggio alla tua pagina che ti aiuteranno a migliorare l'esperienza utente del tuo sito web. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!

Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.