12 ejemplos de navegación vertical de Divi

Al crear un sitio web, hay muchas cosas diferentes a considerar. Por lo general, comienza con cómo desea que se vea y se sienta el diseño general de su sitio web. Desea que coincida con el contenido de su sitio web para que pueda potenciar el mensaje que está tratando de enviar.

Uno de los factores que juega un papel importante en cómo su sitio web influirá en el comportamiento de los visitantes es el menú principal. Con Divi, hay toneladas de posibilidades que le permiten diseñar su menú de una manera hermosa que coincida con el resto de su sitio web y lo ayude a guiar a sus visitantes a través de su sitio web.

Una de esas posibilidades es utilizar una navegación vertical en lugar del menú superior. Aunque la navegación vertical no se utiliza con tanta frecuencia, puede ofrecer resultados sorprendentes si se piensa bien y si coincide con el resto de su sitio web. Al igual que el menú superior, el menú vertical sigue a los visitantes durante toda su estancia en el sitio web.

Para inspirarte, hemos elegido 12 sitios web que utilizan la navegación vertical para optimizar la experiencia del visitante mejorando la forma en que navegan por el sitio web.

1. Master en Diseno de Interiores

Master en Diseno de Interiores es un sitio web impresionante que tiene que ver con el diseño de interiores. En la imagen de arriba, puedes ver cómo han usado el menú vertical para darle ese toque extra agradable a su sitio web.

Los colores que se están utilizando en el sitio web son muy neutros, lo que le da ese toque y sensación de modernidad tanto al sitio web como a la empresa o marca en cuestión.

La navegación vertical no es una excepción. Los colores que se están utilizando son muy sutiles y no molestan a la vista durante la lectura.

2. Modelo en la parte superior

Model On Top es un sitio web de gestión de modelos. Este sitio web, creado con Divi, permitió que una cierta armonía se uniera y mostrara la profesionalidad y la experiencia que quieren vincular a su empresa.

Además de tener una navegación vertical muy agradable que contiene todos los elementos necesarios, como un logotipo, las páginas y una barra de búsqueda, también han creado ese compromiso mediante el uso de un fondo de video justo al comienzo de su sitio web.

La navegación vertical no necesitaba mucho diseño especial, sino que decidieron mantenerla limpia y dejar que las imágenes del resto de la página hicieran el trabajo.

3. Art-On-The-Run Filmschool Berlín

Art-On-The-Run Filmschool Berlin representó a la perfección el lado artístico que necesita una escuela de cine en su sitio web. La navegación vertical tiene un propósito especial en toda la imagen.

Utilizaron deliberadamente una navegación vertical para disfrutar de los beneficios de hacer que el menú pareciera una especie de "lista". Han utilizado una numeración acorde con el tema del sitio web. La numeración, además de las páginas, también podría interpretarse fácilmente como escenarios o episodios.

La combinación de las páginas y el logo que se muestra dan una cierta sensación de sencillez y estructura. No dejaron de representar también imágenes que están bastante en línea con lo que trata su sitio web.

4. Alex Brands

Alex Brands es un sitio web de comercio electrónico de Divi que vende todo tipo de cosas para niños; desde artes y manualidades hasta muebles y juegos. El sitio web muestra inmediatamente el tipo de sentimiento que quieren representar; juguetón y acogedor.

En este caso, la navegación vertical también se eligió muy deliberadamente. Hay muchas páginas diferentes, si hubieran optado por un menú superior, la estructura se perdería y no habría suficiente espacio.

5. Fotos de Devlin

Delvin Photos es probablemente el sitio web más elegante de todos los mencionados en esta publicación. Delvin Photos utiliza su sitio web para mostrar todo su trabajo de una manera original y atractiva para atraer nuevos clientes por los servicios que ofrecen.

Utilizaron la navegación vertical para enfatizar la elegancia que están usando en el resto de su sitio web y al incluir íconos de redes sociales en su menú principal; También se aseguran de que las personas puedan acceder a los canales de redes sociales en cualquier momento durante su estancia en el sitio web.

6. Maquillaje de velada

Soiree Makeup es un sitio web que gira en torno al maquillaje. El sitio web está diseñado específicamente para ofrecer los servicios de maquillaje de un maquillador. El sitio web muestra de inmediato la sencillez y la elegancia que se espera de todo maquillador. No es demasiada extravagancia, pero es bonito a la vista.

El sitio web, en general, no ocupa toda la pantalla, lo que hace que el contenido sea más concentrado. En la navegación vertical, la mayor parte de la atención se dirige al logotipo y al cuadro de contacto.

Incluir un cuadro de contacto dentro de la navegación vertical permite al maquillador enfatizar el propósito más importante que tiene el sitio web; conseguir nuevos leads, nuevos clientes y nuevas reservas.

7. Fotografía de Nathan Welton

Nathan Welton Photography es el segundo sitio web de fotografía que seleccionamos para esta publicación. El uso de la navegación vertical para un sitio web de fotografía es mucho más común que para otros sitios web. Por lo general, eso se debe a que las imágenes en el sitio web hablan por sí mismas.

Los propietarios de sitios web de sitios web de fotografía utilizan una navegación vertical simple para mantener el enfoque en las imágenes al tener un menú que es fácil de usar y que no distrae.

Las imágenes que usó Nathan Welton en su sitio web son exactamente eso; están llenos de aventuras y cuentan su propia historia. La navegación vertical solo está ahí para fines prácticos y no interrumpe la página como lo haría un menú superior.

8. Fotografía de Lilly

Lilly Photography es el último sitio web de fotografía que elegimos para esta publicación. Lo mejor de este sitio web es que utiliza una galería en la página de inicio.

La galería muestra trabajos que se han realizado en el pasado para crear una cierta sensación de experiencia. Porque al final; la gente busca un fotógrafo que tome fotografías que se ajusten a lo que esperan.

La navegación vertical es similar a la navegación vertical utilizada por Nathan Welton; simplista pero haciendo el trabajo.

9. Film Pittsburgh

Film Pittsburgh es una organización de presentación de películas. Una de las cosas buenas que hicieron fue crear un segundo menú en la parte superior de su página que permite a los visitantes obtener información práctica.

La navegación vertical, por el contrario, es bastante informativa, pero ayuda a los visitantes a comprender su historia y misión al llevarlos a las páginas correctas. Dividir las páginas prácticas y narrativas entre sí potencia la narración en el menú principal.

Además de utilizar la navegación vertical, Film Pittsburgh tampoco utilizó todo el tamaño de la pantalla, lo que les dejó espacio para mejorar su diseño con una imagen de fondo relevante.

10. BlendLove

BlendLove es una tienda de alimentos ubicada en Australia. Han creado un sitio web para informar a sus clientes sobre toda la información práctica que necesitan saber.

Uno de los buenos extras que ofrecen en su sitio web es la oportunidad de comprar un libro electrónico lleno de la comida saludable que preparan. Es una buena forma de interactuar con los clientes, conocer quiénes son e incluso obtener ganancias.

El sitio web en sí tiene una paleta de colores de tono oscuro que crea un bonito contraste con el logo que tienen. Se aseguraron de que los colores fueran consistentes en todo su sitio web, también en su navegación vertical. Asegurarse de que exista coherencia es importante porque la navegación vertical ocupa una parte relativamente grande de la pantalla, mientras que un menú superior no suele ser tan notable.

11. Bon Appetit

Bon Appetit es un sitio web belga enfocado en dar talleres que involucran muchos sabores y aromas. Los ejemplos anteriores y este ejemplo difieren en una cosa con seguridad; el sitio web de Bon Appetit se centra más en el contenido escrito que proporcionan que en la visualidad.

El menú vertical se ha dividido en 3 tipos de piezas; el logotipo, las páginas y servicios adicionales como servicio al cliente y envío. La diferencia de estilo entre las páginas y los servicios adicionales le da una sensación y un toque extra organizado al sitio web.

12. Come restaurante tailandés

Eat Thai Restaurant es el último ejemplo de esta publicación. Es un restaurante móvil de propiedad local que va al grano. Su sitio web no tiene varias páginas. Más bien tomaron una página y se enfocaron en lo que es más importante; los alimentos. El sitio se utiliza para redirigir a las personas que desean realizar pedidos a un sitio web de pedidos.

Lo bueno de la navegación vertical utilizada en este ejemplo es que en realidad no está ahí para navegar, sino más para informar. La navegación vertical sigue a un visitante durante toda su estancia en el sitio web, lo que significa que la información también lo hace. Proporcionaron toda la información relevante en el menú, junto con los íconos sociales y una llamada a la acción "Solicitar ahora".

Pensamientos finales

Esperamos que esta publicación le brinde mucha inspiración que lo ayude a pensar en conceptos geniales para los sitios web actuales que tiene o los sitios web futuros que está creando. Si tiene alguna sugerencia o comentario; ¡No dude en dejar un comentario en la sección de comentarios a continuación! Y mientras esté allí, avísenos; ¿Para qué tipo de sitio web usarías la navegación vertical?

¡Asegúrese de suscribirse a nuestro boletín informativo por correo electrónico y al canal de YouTube para que nunca se pierda un gran anuncio, un consejo útil o un obsequio de Divi!

Imagen destacada de LuckyDesigner / shutterstock.com