Come creare una home page di navigazione con Divi

Ci sono un sacco di approcci che puoi applicare alla tua home page, ma se vuoi aggiungere quel tocco in più al tuo sito web, optare per una pagina di navigazione come home page potrebbe essere la strada da percorrere. Non lo vedrai in giro così spesso e offre ai tuoi visitatori una visione chiara di ciò che possono aspettarsi dal tuo sito web. Inoltre, aiuterà anche i tuoi visitatori a navigare visivamente attraverso le diverse pagine piene dei fantastici contenuti che fornisci.

Per mostrarti come puoi farlo con Divi, in modo elegante ed elegante, abbiamo creato un design che ti mostreremo come ricreare in questo post. Ci saranno due versioni; la versione desktop e quella adatta per tablet e telefono. Prima di immergerci nel tutorial, diamo un'occhiata al risultato finale.

Risultato sul desktop

Il risultato che andremo a ricreare assomiglia a questo sul desktop:

Risultato su cellulare

Il risultato sui dispositivi mobili è leggermente diverso e assomiglia a questo:

Come creare una home page di navigazione con Divi

Iscriviti al nostro canale Youtube

Ricrea versione desktop

Creeremo due versioni della pagina di navigazione; una versione desktop e una versione per tablet e telefono. In questo modo, saremo sicuri che la pagina di navigazione abbia un bell'aspetto su tutti i dispositivi. Come al solito, inizieremo creando la versione desktop.

Aggiungi nuova sezione

Inizia creando una nuova pagina e aggiungendovi una sezione normale. Per questo tutorial, utilizzeremo solo una sezione che includerà tutte le righe con il contenuto di cui avremo bisogno (sia per la versione desktop che per quella mobile). Tuttavia, puoi anche scegliere di separare la versione desktop e mobile in due sezioni.

Ricrea la prima riga di navigazione

Come puoi notare nell'anteprima dei risultati sopra, ognuno degli elementi di navigazione ha più o meno lo stesso design con alcuni dettagli diversi. La maggior parte delle impostazioni per ciascuno degli elementi di navigazione che si desidera creare sono le stesse. Ecco perché ti mostreremo come puoi creare la prima riga in dettaglio, e poi ti mostreremo come puoi apportare le modifiche anche per gli altri elementi di navigazione che vuoi aggiungere alla pagina.

Struttura della colonna

Prima di tutto, scegli una colonna a larghezza intera per la riga che hai appena aggiunto. Prima di aggiungere qualsiasi modulo, ci assicureremo che le impostazioni della riga siano a posto, quindi vai avanti e apri le impostazioni della riga.

Immagine di sfondo

Mentre sei nella scheda Contenuto, la prima cosa che faremo è aggiungere un'immagine di sfondo alla tua riga. Ti consigliamo di utilizzare un'immagine con una larghezza di '1400 px' e un'altezza di '934 px' in quanto porterà al miglior risultato. Inoltre, assicurati di mettere l'immagine su "nessuna ripetizione".

Allineamento

Quindi, passa alla scheda Design e aggiungi un allineamento corretto alla tua riga. In questo modo, creerai abbastanza spazio sul lato sinistro dello schermo per aggiungere la descrizione e il collegamento.

Dimensionamento

Quindi, apri la sottocategoria Dimensionamento, abilita l'opzione "Usa larghezza personalizzata" e utilizza una larghezza percentuale di "100%".

Spaziatura

Andando avanti, vogliamo aggiungere un po' di spazio bianco tra ogni elemento di navigazione, ecco perché aggiungeremo un margine superiore e inferiore di "5px" alla riga.

Visibilità

Ultimo ma non meno importante, vogliamo disabilitare questa riga su telefono e tablet poiché creeremo un'altra riga che corrisponderà a tablet e telefono più avanti in questo post.

Modulo di testo per la descrizione della pagina

Impostazioni testo

Una volta eseguite le impostazioni della riga, è possibile aggiungere un primo modulo di testo alla colonna della riga e utilizzare le seguenti impostazioni per la sottocategoria Testo nella scheda Progettazione:

• Carattere del testo: Andika
• Peso del carattere del testo: normale
• Dimensione del testo: 13px
• Colore del testo: #000000
• Altezza riga di testo: 1.1em
• Orientamento del testo: a sinistra

Dimensionamento

Scorri verso il basso, apri la sottocategoria Dimensionamento e aggiungi una larghezza del "18%". Questa larghezza assicurerà che il nostro modulo di testo non attraversi l'immagine di sfondo della nostra riga una volta aggiunto il margine sinistro negativo.

Spaziatura

Come accennato nel passaggio precedente, vogliamo che il modulo di testo si trovi sul lato sinistro della nostra riga senza sovrapporsi allo sfondo della riga. Vogliamo anche avere uno spazio tra la parte superiore dell'immagine della riga e l'inizio del modulo di testo, ecco perché stiamo usando anche un margine superiore.

• Margine superiore: 150 px
• Margine sinistro: -20px
• Imbottitura superiore: 10px
• Imbottitura inferiore: 10px

Modulo divisore

Visibilità

Quindi, vai avanti e aggiungi un modulo Divisore proprio sotto il modulo di testo. All'interno della sottocategoria Visibilità, abilita l'opzione "Mostra divisore".

Colore

Quindi, passa alla scheda Design e aggiungi "#FFFFFF" come colore del divisore.

Stili

Andando avanti, scegli "Solido" come stile del divisore e "Alto" come posizione del divisore.

Dimensionamento

Infine, applica le seguenti impostazioni alla sottocategoria Dimensionamento:

• Peso del divisore: 5px
• Altezza: 23px
• Larghezza: 47%
• Allineamento del modulo: a sinistra

Modulo di testo per voce di menu

Testo del collegamento nella casella del contenuto

Una volta che hai finito con il modulo divisore, vai avanti e aggiungi un altro modulo di testo proprio sotto di esso. Questo modulo di testo sarà il nostro elemento di navigazione. Apri le impostazioni, inserisci il testo e aggiungi un collegamento.

Colore di sfondo sfumato

Mentre sei ancora nella scheda Contenuto, usa le seguenti impostazioni di sfondo sfumato:

• Primo Colore: #FFFFFF
• Secondo colore: rgba (12,113,195,0.62)
• Tipo di gradiente: lineare
• Direzione del gradiente: 108 gradi
• Posizione di partenza: 31%
• Posizione finale: 21%

Link alle impostazioni del testo

Quindi, vai alla scheda Progettazione e applica le seguenti impostazioni alla scheda Collegamento della sottocategoria Testo:

• Carattere del collegamento: Andika
• Peso del carattere del collegamento: grassetto
• Stile carattere collegamento: maiuscolo e sottolineato
• Stile di sottolineatura del collegamento: solido
• Dimensione del testo del collegamento: 100 px
• Colore del testo del collegamento: #000000
• Altezza della linea di collegamento: 1 em

Spaziatura

Questo modulo di testo dovrà apparire anche sul lato sinistro dello schermo, ecco perché stiamo aggiungendo il margine sinistro. Vogliamo anche che lo spazio tra il modulo divisore e questo modulo di testo sia più piccolo, è qui che entra il margine superiore negativo. Per creare quell'allineamento orizzontale centrale, aggiungeremo anche un margine inferiore. E infine, vogliamo che lo sfondo sfumato sia più grande, ecco perché stiamo usando il padding superiore e inferiore.

• Margine superiore: -33 px
• Margine inferiore: 250 px
• Margine sinistro: -20px
• Imbottitura superiore: 80px
• Imbottitura inferiore: 80 px

Clona la prima riga di navigazione tutte le volte necessarie

I diversi elementi di navigazione sulla tua pagina di navigazione avranno, più o meno, le stesse impostazioni. Ecco perché consigliamo di clonare la riga tutte le volte che è necessario e di apportare successivamente le modifiche dei dettagli. Ci sono tre cose che devi cambiare, diamo un'occhiata.

Cambia sfondo riga

La prima cosa che devi fare è cambiare le immagini di sfondo dei duplicati della tua riga. Ancora una volta, assicurati di utilizzare un'immagine con una larghezza di "1400 px" e un'altezza di "943 px" per ottenere il miglior risultato.

Modifica modulo testo per voce di menu

Cambia collegamento

Quindi, apri l'elemento di navigazione Modulo di testo e modifica il testo insieme al collegamento.

Cambia sfondo sfumato in base alla lunghezza del testo

Infine, dovrai anche cambiare lo sfondo sfumato di questo modulo di testo. Cambia il secondo colore del gradiente in "rgba(224,43,32,0.62)" e cambia il valore della posizione iniziale in base alla lunghezza del tuo nuovo elemento di navigazione. Se disponi di un elemento di navigazione piuttosto lungo, ti consigliamo di modificare la percentuale della posizione iniziale su un valore più alto finché non lo vedrai andare a posto.

Ricrea la versione mobile

Ora che abbiamo creato la versione desktop, creeremo anche la versione tablet e mobile. Lo stile dei diversi moduli è più o meno lo stesso della versione desktop, ma dietro le quinte la struttura delle nostre file è completamente diversa. A causa delle numerose modifiche che dovresti apportare a ciascun modulo se dovessi clonarli, ti mostrerò semplicemente come crearlo da zero senza clonare alcun modulo dalla versione Desktop.

Ricrea la prima riga di navigazione

Inizia aggiungendo un'altra riga alla sezione che abbiamo creato all'inizio di questo post.

Struttura della colonna

Questa colonna, come la versione desktop, richiederà anche una sola colonna.

Dimensionamento

Il dimensionamento di questa riga è il seguente:

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

Queste impostazioni assicureranno che la nostra riga occupi l'intera larghezza dello schermo.

Visibilità

E infine, disabilita questa riga sul desktop perché abbiamo altre righe che verranno invece visualizzate sul desktop.

Modulo di testo per la descrizione della pagina

Impostazioni testo

Vai avanti e aggiungi il primo modulo di testo alla riga. Applica le seguenti impostazioni alla sottocategoria Testo:

• Carattere del testo: Andika
• Peso del carattere del testo: normale
• Dimensione del testo: 13px
• Colore del testo: #000000
• Altezza riga di testo: 1.1em
• Orientamento del testo: al centro

Dimensionamento

Quindi, apri la sottocategoria Dimensionamento e usa una larghezza di "71%" e un allineamento del modulo centrale.

Spaziatura

Infine, questo modulo di testo avrà bisogno di un'imbottitura superiore e inferiore di "10px". Come puoi notare, non sono necessari valori di margine nella versione tablet e mobile perché optiamo invece per un allineamento al centro.

Modulo di testo per voce di menu

Testo del collegamento nella casella del contenuto

Per la versione mobile, non abbiamo bisogno di un modulo divisore, quindi salteremo questo passaggio. Invece, aggiungeremo immediatamente l'elemento di navigazione Modulo di testo proprio sotto il precedente modulo di testo che abbiamo creato. Dopo averlo fatto, aggiungi il testo con il collegamento al riquadro dei contenuti nella scheda Contenuto.

Colore di sfondo sfumato

Lo sfondo sfumato che useremo per questo modulo di testo è lo stesso della versione desktop:

• Primo Colore: #FFFFFF
• Secondo colore: rgba (12,113,195,0.62)
• Tipo di gradiente: lineare
• Direzione del gradiente: 108 gradi
• Posizione di partenza: 31%
• Posizione finale: 21%

Link alle impostazioni del testo

Utilizza le seguenti impostazioni per la sottocategoria di testo:

• Carattere del collegamento: Andika
• Peso del carattere del collegamento: grassetto
• Dimensione del testo: 65px
• Colore del testo: #000000
• Altezza riga di testo: 1em
• Orientamento del testo: a sinistra

Spaziatura

Come la versione desktop, questo modulo di testo dell'elemento di navigazione avrà bisogno di un'imbottitura superiore e inferiore di "80 px" per ingrandire lo sfondo sfumato.

Modulo immagine

Carica immagine

Infine, aggiungi un modulo immagine come ultimo modulo nella tua riga e carica un'immagine a scelta.

Clona la prima riga di navigazione tutte le volte necessarie

Stessa cosa vale per la versione mobile; puoi clonare la riga appena creata tutte le volte necessarie per aggiungere anche gli altri elementi di navigazione. Ci sono tre cose che dovrai modificare ogni volta che aggiungi un nuovo elemento di navigazione, diamo un'occhiata.

Modifica modulo testo per voce di menu

Cambia collegamento

La prima cosa che devi modificare è il testo e il collegamento all'interno della casella dei contenuti della scheda Contenuto del modulo di testo dell'elemento di navigazione.

Cambia sfondo sfumato in base alla lunghezza del testo

Quindi, puoi anche cambiare il secondo colore del gradiente in "rgba (224,43,32,0.62)" e modificare il valore della posizione iniziale in base alla lunghezza del testo.

Modifica modulo immagine

Infine, puoi anche modificare l'immagine del Modulo immagine all'interno di quella riga.

Risultato

Dopo aver creato sia la versione desktop che quella mobile, avrai una splendida pagina di navigazione che avrà un bell'aspetto su desktop, tablet e telefono. Diamo un'ultima occhiata al risultato.

Risultato sul desktop

Risultato su cellulare

Pensieri finali

Creare una pagina di navigazione come homepage lascerà sicuramente un segno sui tuoi visitatori. Non solo aiuta i tuoi visitatori a navigare in modo più visivo, ma consente loro anche di vedere un'anteprima più elaborata di ciò che il tuo sito web ha da offrire. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!

Assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da non perdere mai un grande annuncio, un consiglio utile o un omaggio Divi!

Immagine in primo piano di LanKogal / shutterstock.com