12 exemples de navigation verticale de Divi

Lors de la création d'un site Web, il y a beaucoup de choses différentes à considérer. Cela commence généralement par la façon dont vous voulez que la mise en page globale de votre site Web ressemble et se sente. Vous voulez qu'il corresponde au contenu de votre site Web afin qu'il renforce le message que vous essayez d'envoyer.

L'un des facteurs qui jouent un rôle majeur dans la façon dont votre site Web influencera le comportement des visiteurs est le menu principal. Avec Divi, il existe des tonnes de possibilités qui vous permettent de styliser votre menu d'une belle manière qui correspond au reste de votre site Web et vous aide à guider vos visiteurs à travers votre site Web.

L'une de ces possibilités consiste à utiliser une navigation verticale au lieu du menu du haut. Bien que la navigation verticale ne soit pas si souvent utilisée, elle peut donner des résultats étonnants si elle est bien pensée et si elle correspond au reste de votre site Web. Comme le menu du haut, le menu vertical suit les visiteurs tout au long de leur séjour sur le site.

Pour vous inspirer, nous avons choisi 12 sites Web qui utilisent la navigation verticale pour optimiser l'expérience du visiteur en améliorant la façon dont il navigue sur le site.

1. Master en Diseno de Interiores

Master en Diseno de Interiores est un site Web époustouflant consacré à la décoration d'intérieur. Dans l'image ci-dessus, vous pouvez voir comment ils ont utilisé le menu vertical pour donner une touche supplémentaire à leur site Web.

Les couleurs utilisées sur le site Web sont très neutres, ce qui donne une touche moderne au site Web ainsi qu'à l'entreprise ou à la marque en question.

La navigation verticale ne fait pas exception. Les couleurs utilisées sont très subtiles et ne gênent pas les yeux lors de la lecture.

2. Modèle sur le dessus

Model On Top est un site de gestion de mannequins. Ce site, réalisé avec Divi, a permis une certaine harmonie de se retrouver et de montrer le professionnalisme et l'expertise qu'ils souhaitent associer à leur entreprise.

En plus d'avoir une très belle navigation verticale qui contient tous les éléments nécessaires tels qu'un logo, les pages et une barre de recherche, ils ont également créé cet engagement en utilisant un arrière-plan vidéo dès le début de leur site Web.

La navigation verticale n'a pas eu besoin de beaucoup de conception spéciale, ils ont plutôt décidé de la garder propre et de laisser les visuels dans le reste de la page faire le travail.

3. Art-On-The-Run Filmschool Berlin

Art-On-The-Run Filmschool Berlin a parfaitement représenté le côté artistique dont une école de cinéma a besoin sur son site Web. La navigation verticale a un objectif particulier dans l'ensemble de l'image.

Ils ont délibérément utilisé une navigation verticale pour profiter des avantages de faire ressembler le menu à une sorte de « liste ». Ils ont utilisé une numérotation conforme à l'objet du site Web. La numérotation pourrait, outre les pages, aussi facilement être interprétée comme des scénarios ou des épisodes.

La combinaison des pages et du logo affiché donne un certain sens de la simplicité et de la structure. Ils n'ont pas manqué de représenter également des visuels tout à fait en phase avec ce qu'est leur site internet.

4. Marques Alex

Alex Brands est un site de e-commerce Divi qui vend toutes sortes de choses pour les enfants ; des arts et de l'artisanat aux meubles et aux jeux. Le site Web montre immédiatement le genre de sentiment qu'ils veulent représenter ; ludique et invitant.

La navigation verticale a été dans ce cas aussi très délibérément choisie. Il y a beaucoup de pages différentes, s'ils avaient opté pour un menu supérieur, la structure serait perdue et il n'y aurait pas assez d'espace.

5. Devlin Photos

Delvin Photos est probablement le site Web le plus élégant de tous ceux mentionnés dans cet article. Delvin Photos utilise son site Web pour afficher l'ensemble de son travail de manière originale et attrayante afin d'attirer de nouveaux clients pour les services qu'ils proposent.

Ils ont utilisé la navigation verticale pour souligner l'élégance qu'ils utilisent dans le reste de leur site Web et en incluant des icônes de médias sociaux dans leur menu principal ; ils s'assurent également que les gens peuvent accéder aux canaux de médias sociaux à tout moment pendant leur séjour sur le site Web.

6. Maquillage de soirée

Soiree Makeup est un site web qui tourne autour du maquillage. Le site Web est spécialement conçu pour offrir les services de maquillage d'une maquilleuse. Le site Web montre immédiatement la simplicité et l'élégance que l'on attend de chaque maquilleur. Pas trop extravagant mais joli à regarder.

Le site Web, en général, n'occupe pas tout l'écran, ce qui rend le contenu plus concentré. Dans la navigation verticale, l'attention se porte principalement sur le logo et la boîte de contact.

L'inclusion d'une zone de contact dans la navigation verticale permet au maquilleur de mettre l'accent sur l'objectif le plus important du site Web ; obtenir de nouveaux prospects, de nouveaux clients et de nouvelles réservations.

7. Nathan Welton Photographie

Nathan Welton Photography est le deuxième site de photographie que nous avons sélectionné pour cet article. L'utilisation de la navigation verticale pour un site Web de photographie est beaucoup plus courante que pour d'autres sites Web. C'est généralement parce que les images sur le site parlent d'elles-mêmes.

Les propriétaires de sites Web de photographie utilisent une navigation verticale simple pour garder le focus sur les images en ayant un menu facile à utiliser et non distrayant.

Les images que Nathan Welton a utilisées sur son site Web sont exactement cela ; ils sont pleins d'aventures et racontent leur propre histoire. La navigation verticale n'est là qu'à des fins pratiques et ne s'interrompt pas avec la page comme le ferait un menu supérieur.

8. Lilly Photographie

Lilly Photography est le dernier site de photographie que nous avons choisi pour cet article. L'avantage de ce site Web est qu'il utilise une galerie sur la page d'accueil.

La galerie montre des travaux qui ont été réalisés dans le passé pour créer un certain sentiment d'expérience. Parce qu'en fin de compte; les gens recherchent un photographe qui prend des photos qui correspondent à ce qu'ils attendent.

La navigation verticale est similaire à la navigation verticale utilisée par Nathan Welton ; simpliste mais fait le travail.

9. Film Pittsburgh

Film Pittsburgh est une organisation de présentation de films. Une des bonnes choses qu'ils ont fait est de créer un deuxième menu en haut de leur page qui permet aux visiteurs d'obtenir les informations pratiques.

La navigation verticale, au contraire, est plutôt informative mais aide les visiteurs à comprendre leur histoire et leur mission en les dirigeant vers les bonnes pages. Diviser les pages pratiques et narratives les unes des autres permet de raconter des histoires dans le menu principal.

En plus d'utiliser la navigation verticale, Film Pittsburgh n'a pas non plus utilisé toute la taille de l'écran, ce qui leur a laissé de l'espace pour améliorer leur conception avec une image d'arrière-plan pertinente.

10. Mélanger l'amour

BlendLove est un magasin d'alimentation situé en Australie. Ils ont construit un site Web pour informer leurs clients de toutes les informations pratiques dont ils ont besoin de savoir.

L'un des extras intéressants qu'ils proposent sur leur site Web est la possibilité d'acheter un ebook contenant les aliments sains qu'ils préparent. C'est un bon moyen d'interagir avec les clients, d'apprendre qui ils sont et même de réaliser des bénéfices.

Le site Web lui-même a une palette de couleurs sombres qui crée un joli contraste avec le logo dont ils disposent. Ils ont veillé à ce que les couleurs soient cohérentes sur l'ensemble de leur site Web, ainsi que dans leur navigation verticale. Il est important de s'assurer de la cohérence car la navigation verticale occupe une partie relativement importante de l'écran, alors qu'un menu supérieur n'est généralement pas aussi visible.

11. Bon appétit

Bon Appetit est un site Web belge axé sur l'organisation d'ateliers impliquant beaucoup de saveurs et de parfums. Les exemples précédents et cet exemple diffèrent sur une chose à coup sûr ; le site Bon Appetit est plus axé sur le contenu écrit qu'il propose que sur la visuel.

Le menu vertical a été divisé en 3 types de morceaux; le logo, les pages et les services supplémentaires tels que le service client et l'expédition. La différence de style entre les pages et les services supplémentaires donne une sensation et une touche d'organisation supplémentaires au site Web.

12. Manger un restaurant thaïlandais

Eat Thai Restaurant est le dernier exemple de cet article. C'est un restaurant mobile de propriété locale qui va droit au but. Leur site Web n'a pas plusieurs pages. Ils ont plutôt pris une page et se sont concentrés sur la chose la plus importante ; la nourriture. Le site est utilisé pour rediriger les personnes qui souhaitent commander vers un site de commande.

Ce qui est bien avec la navigation verticale utilisée dans cet exemple, c'est qu'elle n'est pas vraiment là pour naviguer mais plutôt pour informer. La navigation verticale suit un visiteur tout au long de son séjour sur le site, ce qui signifie que les informations le font aussi. Ils ont fourni toutes les informations pertinentes dans le menu, ainsi que les icônes sociales et un CTA « Commandez maintenant ».

Dernières pensées

Nous espérons que cet article vous donnera des tonnes d'inspiration qui vous aideront à réfléchir à d'excellents concepts pour les sites Web actuels que vous avez ou les futurs sites Web que vous créez. Si vous avez des suggestions ou des commentaires ; n'hésitez pas à laisser un commentaire dans la section commentaire ci-dessous! Et pendant que vous y êtes, faites-le nous savoir; pour quel type de site Web utiliseriez-vous la navigation verticale ?

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !

Image en vedette par LuckyDesigner / shutterstock.com