12 esempi di navigazione verticale di Divi

Quando si crea un sito Web, ci sono molte cose diverse da considerare. Di solito inizia con come vuoi che il layout generale del tuo sito web appaia e si senta. Vuoi che corrisponda al contenuto del tuo sito Web in modo che possa potenziare il messaggio che stai cercando di inviare.

Uno dei fattori che giocano un ruolo importante nel modo in cui il tuo sito web influenzerà il comportamento dei visitatori è il menu principale. Con Divi, ci sono tantissime possibilità che ti consentono di modellare il tuo menu in un modo bellissimo che si abbina al resto del tuo sito web e ti aiuta a guidare i tuoi visitatori attraverso il tuo sito web.

Una di queste possibilità è utilizzare una navigazione verticale invece del menu in alto. Sebbene la navigazione verticale non sia utilizzata molto spesso, può fornire risultati sorprendenti se è ben congegnata e se corrisponde al resto del tuo sito web. Come il menu in alto, il menu verticale segue i visitatori durante l'intero soggiorno sul sito.

Per ispirarti, abbiamo scelto 12 siti web che utilizzano la navigazione verticale per ottimizzare l'esperienza del visitatore migliorando il modo in cui naviga nel sito.

1. Master en Diseno de Interiores

Master en Diseno de Interiores è un sito web straordinario che si occupa di interior design. Nell'immagine sopra, puoi vedere come hanno usato il menu verticale per dare quel bel tocco in più al loro sito web.

I colori utilizzati sul sito Web sono molto neutri, il che conferisce un tocco moderno e un'atmosfera al sito Web, nonché all'azienda o al marchio in questione.

La navigazione verticale non fa eccezione. I colori che vengono utilizzati sono molto tenui e non danno fastidio agli occhi durante la lettura.

2. Modello in alto

Model On Top è un sito Web di gestione dei modelli. Questo sito, realizzato con Divi, ha permesso di creare una certa sintonia e mostrare la professionalità e la competenza che vogliono legare alla loro azienda.

Oltre ad avere una navigazione verticale molto bella che contiene tutti gli elementi necessari come un logo, le pagine e una barra di ricerca, hanno anche creato quel coinvolgimento utilizzando uno sfondo video proprio all'inizio del loro sito web.

La navigazione verticale non ha avuto bisogno di un design speciale, hanno deciso di mantenerla pulita e lasciare che le immagini del resto della pagina facessero il lavoro.

3. Scuola di cinema Art-On-The-Run Berlino

Art-On-The-Run Filmschool Berlin ha rappresentato perfettamente il lato artistico di cui una scuola di cinema ha bisogno sul proprio sito web. La navigazione verticale ha uno scopo particolare nell'intero quadro.

Hanno deliberatamente utilizzato una navigazione verticale per godere dei vantaggi di far sembrare il menu una sorta di "elenco". Hanno usato una numerazione in linea con l'argomento del sito. La numerazione potrebbe, oltre alle pagine, essere facilmente interpretata anche come sceneggiature o episodi.

La combinazione delle pagine e del logo che viene mostrato danno un certo senso di semplicità e struttura. Non hanno mancato di rappresentare anche elementi visivi abbastanza in linea con ciò di cui tratta il loro sito web.

4. Alex Brands

Alex Brands è un sito di e-commerce Divi che vende tutti i tipi di cose per bambini; da arti e mestieri a mobili e giochi. Il sito web mostra immediatamente il tipo di sentimento che vogliono rappresentare; giocoso e invitante.

Anche in questo caso la navigazione verticale è stata scelta molto deliberatamente. Ci sono molte pagine diverse, se avessero optato per un menu in alto, la struttura andrebbe persa e non ci sarebbe abbastanza spazio.

5. Foto di Devlin

Delvin Photos è probabilmente il sito web più elegante di tutti quelli menzionati in questo post. Delvin Photos utilizza il proprio sito Web per mostrare tutto il proprio lavoro in modo originale e coinvolgente per attirare nuovi clienti per i servizi offerti.

Hanno usato la navigazione verticale per enfatizzare l'eleganza che stanno usando nel resto del loro sito web e includendo le icone dei social media nel loro menu principale; si assicurano inoltre che le persone possano accedere ai canali dei social media in qualsiasi momento durante la loro permanenza sul sito web.

6. Trucco da sera

Soiree Makeup è un sito web che ruota intorno al trucco. Il sito Web è stato creato appositamente per offrire i servizi di trucco di un truccatore. Il sito web mostra immediatamente la semplicità e l'eleganza che ci si aspetta da ogni truccatore. Non troppa stravaganza ma carina da vedere.

Il sito web, in generale, non occupa l'intero schermo, il che rende il contenuto più concentrato. Nella navigazione verticale, la maggior parte dell'attenzione va al logo e alla casella dei contatti.

L'inclusione di una casella di contatto all'interno della navigazione verticale consente al truccatore di enfatizzare lo scopo più importante del sito Web; ottenere nuovi contatti, nuovi clienti e nuove prenotazioni.

7. Nathan Welton Fotografia

Nathan Welton Photography è il secondo sito di fotografia che abbiamo selezionato per questo post. L'utilizzo della navigazione verticale per un sito Web di fotografia è molto più comune rispetto ad altri siti Web. Di solito è perché le immagini sul sito parlano da sole.

I proprietari di siti Web di siti Web di fotografia utilizzano una semplice navigazione verticale per mantenere l'attenzione sulle immagini grazie a un menu facile da usare e che non distrae.

Le immagini che Nathan Welton ha usato sul suo sito web sono esattamente queste; sono pieni di avventura e raccontano la loro storia. La navigazione verticale è presente solo per scopi pratici e non si interrompe con la pagina come farebbe un menu in alto.

8. Fotografia di Lilly

Lilly Photography è l'ultimo sito di fotografia che abbiamo scelto per questo post. La cosa grandiosa di questo sito Web è che utilizza una galleria sulla home page.

La galleria mostra il lavoro svolto in passato per creare una certa sensazione di esperienza. Perché alla fine; le persone cercano un fotografo che scatti foto in linea con ciò che si aspettano.

La navigazione verticale è simile alla navigazione verticale utilizzata da Nathan Welton; semplicistico ma portare a termine il lavoro.

9. Film Pittsburgh

Film Pittsburgh è un'organizzazione di presentazione di film. Una delle cose belle che hanno fatto è creare un secondo menu nella parte superiore della loro pagina che consente ai visitatori di ottenere informazioni pratiche.

La navigazione verticale, al contrario, è piuttosto informativa ma aiuta i visitatori a comprendere la loro storia e missione conducendoli alle pagine giuste. Dividere le pagine pratiche e narranti l'una dall'altra potenzia la narrazione nel menu principale.

Oltre a utilizzare la navigazione verticale, Film Pittsburgh non ha utilizzato l'intera dimensione dello schermo, il che ha lasciato loro spazio per migliorare il design con un'immagine di sfondo pertinente.

10. BlendLove

BlendLove è un negozio di alimentari situato in Australia. Hanno creato un sito Web per informare i propri clienti su tutte le informazioni pratiche di cui hanno bisogno.

Uno degli extra piacevoli che forniscono sul loro sito Web è l'opportunità di acquistare un ebook pieno del cibo sano che producono. È un bel modo per interagire con i clienti, conoscere chi sono e persino realizzare profitti.

Il sito stesso ha una tavolozza di colori scuri che crea un bel contrasto con il logo che hanno. Si sono assicurati che i colori fossero coerenti in tutto il loro sito Web, anche nella loro navigazione verticale. Garantire la coerenza è importante perché la navigazione verticale occupa una parte relativamente grande dello schermo, mentre un menu in alto di solito non è così evidente.

11. Buon Appetito

Bon Appetit è un sito web belga focalizzato sull'offerta di workshop che coinvolgono molti sapori e profumi. Gli esempi precedenti e questo esempio differiscono sicuramente su una cosa; il sito Bon Appetit è più focalizzato sul contenuto scritto che forniscono che sulla visualità.

Il menu verticale è stato suddiviso in 3 tipi di pezzi; il logo, le pagine e i servizi extra come il servizio clienti e la spedizione. La differenza di stile tra le pagine e i servizi extra dà una sensazione e un tocco organizzati in più al sito web.

12. Mangia al ristorante tailandese

Eat Thai Restaurant è l'ultimo esempio in questo post. È un ristorante mobile di proprietà locale che arriva al punto. Il loro sito web non ha più pagine. Piuttosto hanno preso una pagina e si sono concentrati sulla cosa più importante; il cibo. Il sito viene utilizzato per reindirizzare le persone che desiderano ordinare a un sito Web di ordinazione.

La cosa bella della navigazione verticale utilizzata in questo esempio è che in realtà non è lì per navigare ma più per informare. La navigazione verticale segue un visitatore durante tutta la sua permanenza sul sito, il che significa che anche le informazioni lo fanno. Hanno fornito tutte le informazioni rilevanti nel menu, insieme alle icone social e a un CTA "Ordina ora".

Pensieri finali

Speriamo che questo post ti dia tonnellate di ispirazione che ti aiutino a pensare a grandi concetti per i siti Web attuali che hai o per i siti Web futuri che stai realizzando. Se hai suggerimenti o commenti; sentiti libero di lasciare un commento nella sezione commenti qui sotto! E già che ci sei, faccelo sapere; per quale tipo di sito web utilizzeresti la navigazione verticale?

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 evidenza di LuckyDesigner / shutterstock.com