Come sovrapporre la navigazione standard e verticale sul tuo sito web Divi

In questo post, ti mostreremo come combinare la navigazione standard e verticale. Più specificamente; come fare in modo che il menu secondario e il piè di pagina si sovrappongano alla navigazione verticale sul tuo sito web. Ciò significa che non dovrai scegliere tra avere una navigazione superiore o una navigazione verticale; puoi fare entrambe le cose! Puoi modellare il menu principale e il menu secondario come preferisci all'interno del tuo personalizzatore di temi, non è quello che ti aiuteremo a ottenere in questo post in modo esplicito. Ti mostreremo piuttosto le seguenti cose che aiutano nel processo di fare le seguenti cose:

• come sovrapporre il menu secondario alla navigazione verticale
• come rendere fisso il menu secondario durante lo scorrimento
• come sovrapporre il piè di pagina alla navigazione verticale

Queste sono tutte cose che ti aiuteranno a creare un buon equilibrio tra la navigazione standard e verticale sul tuo sito web. Facendo sovrapporre la navigazione standard e verticale, il tuo sito web non sembrerà dominato dalla navigazione verticale. Il contenuto principale del tuo sito web si adatterà alla navigazione verticale, ma il menu secondario e il piè di pagina si comporteranno nello stesso modo in cui si comportano quando la navigazione verticale non è abilitata.

Risultato

Alla fine di questo tutorial, sarai in grado di ottenere il seguente risultato su un sito Web che utilizzava la navigazione verticale:

L'ispirazione per sovrapporre la navigazione standard e verticale

In un post precedente abbiamo condiviso alcuni esempi di siti web che utilizzano la navigazione verticale. Tutti gli esempi ci hanno mostrato quanto puoi diventare creativo con un'opzione Divi che non viene utilizzata spesso. Una navigazione verticale ponderata sul tuo sito web può dare quell'interazione extra che stavi cercando di ottenere con i tuoi visitatori.

Nel mostrare gli esempi, ci sono stati alcuni commenti che ci hanno ispirato a mostrarti come ottenere determinati risultati. Questo post è uno di quei tutorial basati sull'ispirazione che ti mostreranno come apportare alcune modifiche al tuo sito Web senza dover cercare soluzioni da solo.

Ci siamo ispirati al sito web di Alex Brands che utilizza il menu secondario in alto e la navigazione verticale sul lato sinistro della pagina.

Durante lo scorrimento, scorre il menu secondario. Dà quel bel tocco in più al sito web e aiuta a mantenere l'attenzione sul contenuto all'interno del menu secondario. Alex Brands è un sito di e-commerce e il menu secondario fisso aiuta a ricordare alle persone cosa c'è nel carrello e l'offerta che stanno offrendo.

Questo tipo di navigazione verticale è particolarmente interessante per i siti di e-commerce. La navigazione verticale consente ai visitatori di navigare facilmente tra le diverse categorie di articoli offerti sul sito web. È più facile seguire le voci del menu quando si trovano in una navigazione verticale poiché è più facile interpretarlo come un elenco che le persone devono attraversare.

Come sovrapporre la navigazione standard e verticale sul tuo sito web Divi

Iscriviti al nostro canale Youtube

Passaggi generali

Prima di addentrarci nella parte in cui ti mostriamo come sovrapporre la tua navigazione standard alla navigazione verticale, esamineremo prima i passaggi generali. Questi passaggi generali sono le basi che dovrai seguire prima di applicare la sovrapposizione.

Senza ulteriori dovute; Iniziamo.

Crea il tuo menu e aggiungi voci di menu

La prima cosa che devi fare (se non l'hai già fatto) è aggiungere un menu e le voci di menu al tuo sito web. Queste sono le voci di menu che appariranno nella tua navigazione verticale. Per aggiungere un nuovo menu al tuo sito web, vai alla dashboard di WordPress > Aspetto > Menu. Una volta che sei su quella pagina, dai un titolo al tuo nuovo menu e crea il menu.

Continua aggiungendo voci di menu e rendendolo il tuo menu principale.

Aggiungi icone social al menu secondario

La prossima cosa che devi fare è attivare il tuo menu secondario. Per assicurarti che il menu secondario appaia sul tuo sito web, il tuo menu secondario deve avere un elemento attivato. In questo post, aggiungeremo solo le icone dei social media, ma puoi, ovviamente, aggiungere quello che vuoi.

Per attivare il menu secondario e visualizzare le icone social, inizia andando sul dashboard di WordPress > Personalizza > Intestazione e navigazione > Elementi intestazione > Abilita l'opzione "Mostra icone social".

Attiva la navigazione verticale

Il prossimo passo che dovrai compiere è abilitare la navigazione verticale all'interno del tuo Divi builder. Per farlo, vai alla dashboard di WordPress > Aspetto > Personalizza > Intestazione e navigazione > Formato intestazione > Abilita la navigazione verticale.

Oltre a ciò, puoi anche scegliere dove vuoi che appaia la tua navigazione verticale; sul lato sinistro o destro del tuo sito web.

Disabilita la navigazione fissa per il tuo menu principale

Prima di passare alle modifiche avanzate, resta un'ultima cosa da fare: disabilitare la navigazione fissa per il menu principale. Se hai già disabilitato il menu principale, salta questo passaggio. Se, tuttavia, il tuo menu principale è attualmente fisso, vai alla dashboard di WordPress > Divi > Opzioni del tema > E disabilita la navigazione fissa.

Combina navigazione standard e verticale

Nella prossima parte di questo post, ti mostreremo come trasformare la tua navigazione standard e verticale in qualcosa di diverso dal solito. Quando si tratta di navigazione verticale, siamo abituati a vedere una parte dello schermo coperta da essa. Il menu secondario e il piè di pagina, per impostazione predefinita, non supereranno la navigazione verticale.

Ma in alcuni casi, vogliamo assicurarci che la navigazione secondaria e il piè di pagina siano in cima alla navigazione verticale. In questo modo, l'unica cosa che dipenderà dalla navigazione verticale è il contenuto principale. Il tuo sito web non sembrerà completamente diviso in due parti; la navigazione verticale e il resto del sito.

Aggiungi codice CSS alle opzioni del tema

Puoi aggiungere il codice CSS in due modi: tramite le Opzioni del tema di Divi o tramite il Personalizzatore di temi. Per aggiungere il codice alle Opzioni del tema, vai alla dashboard di WordPress > Divi > Opzioni del tema > Generale > Scorri verso il basso la scheda e incolla le seguenti righe di codice CSS nella casella CSS personalizzato:

@media screen and (min-width: 769px) {.et_vertical_nav #top-header, .loaded.et_vertical_nav #top-header {
margin-left: 0 !important; 
z-index: 10000;
position: fixed;
width: 100%;
}
.et_vertical_nav #main-header {
position: absolute;
z-index: 1!important;
overflow: hidden;
}
#et-main-area {
width: auto !important;
}
#main-footer {
margin-left: -225px !important;
left: 0 !important;
z-index: 1000 !important;
position: absolute;
width: 117.4%;
height: auto;
}}

Aggiungi codice CSS a Theme Customizer

L'altra possibilità che hai è aggiungere le righe di codice CSS al Personalizzatore di temi. Per farlo, vai alla dashboard di WordPress > Aspetto > Personalizza > CSS aggiuntivi > E incolla le righe CSS nel campo CSS personalizzato:

@media screen and (min-width: 769px) {.et_vertical_nav #top-header, .loaded.et_vertical_nav #top-header {
margin-left: 0 !important; 
z-index: 10000;
position: fixed;
width: 100%;
}
.et_vertical_nav #main-header {
position: absolute;
z-index: 1!important;
overflow: hidden;
}
#et-main-area {
width: auto !important;
}
#main-footer {
margin-left: -225px !important;
left: 0 !important;
z-index: 1000 !important;
position: absolute;
width: 117.4%;
height: auto;
}}

Pensieri finali

In questo post, ti abbiamo mostrato come combinare la navigazione standard e verticale sul tuo sito web. Più precisamente; ti abbiamo mostrato come fare in modo che il menu secondario e il piè di pagina si sovrappongano alla navigazione verticale e come rendere fisso il menu secondario. Se hai domande o suggerimenti; sentiti libero 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 Line design / shutterstock.com