Come creare una navigazione verticale con Divi che guida il business

Nel tutorial Divi di oggi, ti mostreremo come creare una navigazione verticale che guidi il business per il tuo sito web. La navigazione verticale che ti mostreremo come realizzare verrà in genere utilizzata per le aziende che ritengono importante che i visitatori agiscano immediatamente. Ad esempio, se possiedi un ristorante che consente ai clienti di ordinare online, potresti volere che il tuo sito web aiuti i visitatori ad agire rapidamente.

La navigazione verticale che ti mostreremo come effettuare conterrà informazioni importanti e inviti all'azione al posto delle pagine. Includere questi nella navigazione verticale stimolerà i visitatori all'ordine e, quindi, aumenterà il tasso di conversione del sito web.

Risultato

Prima di immergerci nei diversi passaggi e nell'ispirazione, diamo un'occhiata al risultato di navigazione verticale che potrai ottenere alla fine di questo post:

Oltre a mostrarti come aggiungere tutte le diverse voci di menu alla navigazione verticale, utilizzeremo anche la navigazione fissa. In questo modo, sei sicuro che le informazioni seguano i visitatori per tutta la pagina.

Ispirazione

L'ispirazione che abbiamo avuto per questo sulla navigazione verticale che guida il business proviene da un sito web che abbiamo mostrato in un post precedente. In quel post, abbiamo elencato 12 siti Web che utilizzano la navigazione verticale per gli scopi del proprio sito Web. Uno degli esempi che ha attirato l'attenzione della gente è stato il sito web del ristorante Eat Thai. La loro navigazione verticale è uno di quei concetti fuori dagli schemi. Il loro sito web è di una sola pagina, ma hanno trovato un bel modo per sfruttare ancora le possibilità di navigazione. Il loro sito web si presenta così:

Come creare una navigazione verticale con Divi che guida il business

Iscriviti al nostro canale Youtube

Abilita la navigazione verticale

Per iniziare, dovremo attivare l'opzione di navigazione verticale offerta da Divi. Per farlo, vai alla dashboard di WordPress > Aspetto > Intestazione e navigazione > Formato intestazione > Abilita navigazione verticale.

Abilita navigazione fissa

La navigazione verticale che stiamo ricreando, come il sito web di Eat Thai Restaurant, verrà corretta. Per rendere fissa la tua navigazione verticale, vai alla dashboard di WordPress > Divi > Opzioni del tema > scheda Generale > Abilita navigazione fissa.

Impostazioni del menu principale (personalizzazione del tema)

La prossima cosa che devi fare è apportare alcune modifiche al tuo menu principale. Se sei nella dashboard di WordPress, vai su Aspetto > Personalizza > Intestazione e navigazione > Barra dei menu principale . Una volta che sei lì, puoi apportare le seguenti modifiche (o qualsiasi altra modifica che desideri apportare):

• Nascondi immagine logo: Disattiva
• Altezza massima del logo: 100
• Menu Margine Superiore: 0
• Dimensione del testo: 14
• Spaziatura lettere: -1
• Carattere: Lato Light
• Colore del testo: #FFFFFF
• Colore collegamento attivo: #FFFFFF
• Colore di sfondo: #004159
• Colore di sfondo del menu a discesa: #004159

Impostazioni del menu di navigazione fisse (personalizzazione del tema)

L'ultima cosa che dovremo fare in Theme Customizer è assicurarci che il logo appaia anche durante lo scorrimento. Se sei ancora nella personalizzazione del tema, vai su Intestazione e navigazione > Impostazioni di navigazione fisse > E assicurati che l'opzione "Nascondi logo" sia disabilitata.

Aggiungi voci di menu

Andando avanti, aggiungeremo le voci di menu alla nostra navigazione verticale. Questa parte del post probabilmente occuperà la maggior parte del tuo tempo. Devi aggiungere ciascuno degli elementi individualmente tramite collegamenti personalizzati.

Attiva classi CSS

Ma prima di iniziare ad aggiungere le voci di menu, dovrai assicurarti che l'opzione Classi CSS sia abilitata. Questa opzione ti consente di assegnare una classe a ciascuna delle voci di menu individualmente. In questo caso, è necessario poiché la maggior parte degli elementi avrà le proprie impostazioni di stile. Per abilitare l'opzione Classi CSS, fare clic su "Opzioni schermo" nella parte superiore destra della pagina Menu e abilitare l'opzione Classi CSS come mostrato nella schermata sottostante.

Aggiungi nuovo menu

Una volta che hai attivato le classi CSS per le tue voci di menu, puoi andare avanti e creare un nuovo menu. Dagli un nome e assicurati di rendere questo nuovo menu il tuo menu principale.

Dopo aver aggiunto tutte le voci di menu (che ti mostreremo passo dopo passo), il tuo menu apparirà così nel backend:

Numero di telefono

Poiché si tratta di una pagina singola, non ci saranno pagine incluse nel menu. Tutti gli elementi che andremo ad aggiungere al menu saranno piuttosto collegamenti personalizzati. Questo ci dà la possibilità di giocare con le cose che vogliamo aggiungere.

Per aggiungere la tua prima voce di menu, fai clic su Collegamenti personalizzati e aggiungi il numero di telefono nel campo Etichetta di navigazione. Puoi scegliere se aggiungere o meno un URL. Tuttavia, quando aggiungi la voce di menu al tuo menu, dovrai inserire un URL. Dopo che la voce di menu è stata aggiunta al tuo menu, puoi cancellare l'URL e sarai sicuro che non accadrà nulla quando qualcuno fa clic sulla voce di menu.

Dopo aver aggiunto la voce di menu al tuo menu, vedrai apparire anche la classe CSS. È qui che dovrai decidere una classe CSS che modificherà lo stile della voce di menu. In questo caso, stiamo usando la classe "numero di telefono". Se vuoi semplicemente copiare e incollare le righe di codice CSS alla fine di questo post, assicurati di utilizzare le classi CSS menzionate in questi passaggi.

Indirizzo

Allo stesso modo, aggiungeremo l'indirizzo. Compila l'indirizzo nell'etichetta di navigazione e aggiungi un URL se lo desideri. La classe che stiamo usando per la voce di menu indirizzo è semplicemente 'indirizzo'.

Icone sociali

Aggiungere le icone social alla tua navigazione verticale richiede un po' più di sforzo. In un post precedente, abbiamo esplicitamente gestito l'aggiunta di icone social al tuo menu principale. Tuttavia, in questo caso, il metodo sarà leggermente diverso poiché dovremo disporre le icone allineate una accanto all'altra nella navigazione verticale.

Aggiungi carattere fantastico

La prima cosa che devi fare, se non l'hai già fatto, è aggiungere Font Awesome alle tue Opzioni del tema. Per farlo, vai alla dashboard di WordPress > Divi > Opzioni del tema > Integrazione > E incolla il seguente shortcode nell'intestazione del tuo sito web:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />

Ottieni shortcode

Per ottenere gli shortcode per le icone social; apri questa pagina sul sito Web di Font Awesome. Nel campo di ricerca che vedrai in quella pagina, cerca le diverse icone che desideri aggiungere alla tua navigazione verticale.

Dopo aver fatto clic sull'icona, vedrai lo shortcode collegato all'icona. Salva ognuno di questi shortcode da qualche parte.

Aggiungi icone social al menu

Andando avanti, aggiungeremo le icone social. Normalmente, puoi aggiungere singolarmente ciascuna delle icone social come voci di menu. Ma poiché vogliamo che appaiano uno accanto all'altro, dovremo inserirli nella stessa voce di menu. Il codice HTML che dovrai aggiungere all'etichetta di navigazione è il seguente:

<a href="#" target="_blank"><i class="fa fa-facebook-official facebook" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-instagram instagram" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-envelope envelope" aria-hidden="true"></i></a>

Non dimenticare di aggiungere un URL a ciascuna delle icone. La classe che stiamo usando per tutte e tre le icone social combinate è "icon-wrapper", ma abbiamo anche assegnato una classe extra a ciascuna delle icone social per apportare modifiche individuali. Puoi notare queste classi subito dopo la classe Font Awesome. Si chiamano "facebook", "instagram" e "busta".

Indicazioni

Per la prossima voce di menu, abbiamo usato la parola "direzioni" come nome della classe CSS.

Linea

Per aggiungere una riga proprio sotto le indicazioni, dobbiamo aggiungere un carattere vuoto nella Navigazione etichetta. Questo perché WordPress non ti consente di creare una voce di menu senza avere un'etichetta collegata ad essa. Per aggiungere un carattere vuoto alla voce del menu di linea, aggiungi semplicemente " " all'etichetta di navigazione. Inoltre, aggiungi anche 'line' come nome della classe CSS a questa voce di menu.

Orari di apertura

Andando avanti, aggiungeremo gli orari di apertura e gli assegneremo il nome della classe CSS "ore".

CTA 1

Successivamente, aggiungeremo il primo CTA. Gli assegneremo il nome della classe CSS 'cta-1'.

CTA 2

Per il secondo CTA, useremo il nome della classe CSS 'cta-2'.

Pulsante CTA

L'aggiunta del pulsante CTA alla navigazione verticale richiede alcuni passaggi in più rispetto alle normali voci di menu che sono solo testo. Inizia aprendo la pagina che stai utilizzando come one pager e segui i passaggi successivi indicati di seguito.

Pulsante Crea sulla pagina di destinazione

Se desideri utilizzare un pulsante CTA nella tua navigazione verticale, dovrai avere lo stesso pulsante da qualche parte sul tuo one-pager. Dopo averne creato uno, puoi ispezionare l'elemento e copiare le seguenti righe di codice (collegate al pulsante che hai creato) che appaiono nel codice del tuo sito web:

<div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center"> 
<a class="et_pb_button et_pb_button_0 et_pb_module et_pb_bg_layout_light"> 
ORDER NOW 
</a> 
</div>

Ovviamente, questo codice potrebbe differire a seconda del modo in cui lo stilizzi. Dipende anche dalla presenza o meno di altri pulsanti nella stessa pagina. Sappi che il pulsante apparirà solo con lo stile che gli hai assegnato nella pagina in cui si trova il pulsante. Ecco perché l'aggiunta di un pulsante alla navigazione verticale è solitamente preferibile solo quando si tratta di una pagina singola.

Nota: assicurati di regolare la dimensione del carattere e l'imbottitura del pulsante all'interno del Modulo pulsanti in modo che si adatti perfettamente alla tua navigazione verticale.

Aggiungi come voce di menu

Ora che hai copiato il codice HTML necessario collegato al pulsante, aggiungi un nuovo collegamento personalizzato e aggiungi il codice all'etichetta di navigazione. La classe CSS che stiamo usando per questa voce di menu è 'cta-3'.

Aggiungi righe di codice CSS

La parte successiva di questo post è dedicata alla condivisione delle righe di codice CSS che ti aiutano a raggiungere il risultato finale e il layout. Noterai che abbiamo usato le classi CSS che abbiamo assegnato alle diverse voci di menu. Se, tuttavia, hai deciso di utilizzare nomi di classe diversi, assicurati di cambiarli nel codice CSS per farlo funzionare.

Per aggiungere il codice CSS, vai alla dashboard di WordPress > Divi > Opzioni del tema > Scorri verso il basso la scheda Generale e aggiungi le seguenti righe di codice CSS alla casella CSS personalizzato:

@media only screen and (min-width:992px) {
.et_vertical_nav #page-container #main-header {
margin: 10px !important;
height: 93% !important;
z-index: 9999;
}}
.phone-number {
font-size: 1.9em !important;
font-weight: 400 !important;
}
.address {
font-weight: 300 !important;
}
@media only screen and (min-width:769px){
#main-header div#et-top-navigation {
padding-top: 110px;
height: 100%;
position: static !important;
}}
@media only screen and (min-width:769px){
.et_vertical_nav span.logo_helper {
display: none;
}}
@media only screen and (min-width:769px){
.et_vertical_nav #main-header #logo {
margin-bottom: 28px;
}}
@media only screen and (min-width:769px){
.et_vertical_nav #main-header .container {
margin-left: 25px !important;
margin-right: 25px !important;
height: 100% !important;
}}
.facebook, .instagram, .envelope {
padding: 7px 13px 7px 13px;
font-size: 1.6em;
}
.icon-wrapper a {
display: inline-block !important;
}
.directions {
font-size: 1.2em;
font-weight: 400;
padding-top: 0;
text-align: center;
}
.line {
border-top: 1px solid;
color: #fff;
margin: 8px auto auto;
width: 20%;
}
.hours {
color: #ffffff;
font-size: 10px;
font-weight: 300;
text-align: center;
}
.cta-1 {
margin-top: 5px !important;
font-size: 1.3em;
font-weight: 600;
text-align: center;
}
.cta-2{
font-size: 1.1em;
font-weight: 300;
letter-spacing: 0.02em;
text-align: center;
}
#page-container {
background: #d6d4d1;
}

@media only screen and (max-width:768px) {
.directions, .line, .cta-1, .cta-2, .cta-3 {
display: none !important;
}}

#main-header #top-menu-nav .nav li {
line-height: 10.5px;
}

Cambia il colore di sfondo delle sezioni

L'ultimo passaggio che devi fare è cambiare i colori di sfondo delle sezioni sulla tua pagina singola. Assicurati che questo colore sia lo stesso di quello che stai utilizzando per il contenitore della pagina. In questo caso, è '#d6d4d1'.

Risultato

Dopo aver aggiunto tutte le voci di menu e il codice CSS collegato a ciascuna di queste voci di menu, dovresti essere in grado di ottenere il seguente risultato:

Pensieri finali

In questo post, ti abbiamo mostrato come creare una navigazione verticale per il tuo one-pager. Questo post è stato ispirato dal sito web di Eat Thai Restaurant che è stato realizzato anche con Divi. Se hai seguito l'intero post passo dopo passo, dovresti essere in grado di ottenere il risultato mostrato sopra. 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 Vectomart / shutterstock.com