Por lo general, la gran mayoría de las webs con Divi presentan el mismo aspecto, y aunque si se tienen los conocimientos necesarios, la plantilla permite prácticamente cualquier modificación, hay una que se suele tener olvidada: El menú vertical.

Crear un menú vertical con Divi no es complicado, permite de igual manera una buena navegabilidad y permite añadir un estilo estéticamente diferente a la mayoría de webs.

Así que vamos a ver paso a paso cómo hacerlo 😉

Diseñar un menú vertical transparente con Divi paso por paso

Se puede diseñar un menú web vertical transparente o no tansparente y con diferentes elementos. En este post he decidido explicar un ejemplo con fondo transparente que se superponga al resto de contenido porque creo que así se consigue un aspecto más actual.

El primero paso a seguir para crear un menú vertical es abrir el Personalizador de temas de Divi.

divi personalizador de temas

A continuación ve a Cabecera de Navegación. Desde aquí podrás personalizar a tu gusto los elementos del menú de cabecera de Divi; la ubicación y altura del logo, el color, tamaño o tipografía de los enlaces del menú, el color y altura del fondo del menú…

En nuestro ejemplo partiríamos de un menú horizontal tal y como el que se ve en la imagen.

configurar menú vertical divi

Dspués, en Formato de cabecera, selecciona:

  • Estilo de cabecera: la opción “Por defecto”.
  • Habilitar navegavción vertical: deja esta opción seleccionada. Podrás observar los cambios instantáneamente, tal y como se ve en la imagen.
  • Orientación del menú vertical: selecciona el lateral donde desees mostrarlo. En este caso hemos seleccionado “izquierda”.

crear menú lateral divi

Como ves, ya se muestran todos los elementos del menú en el lateral pero aún se podría mejorar, de forma que todo se vea totalmente intregrado en el diseño.

Para ello, ve al CSS personalizado de la plantilla y añade el siguiente código (fuente; blog de Elegant Themes). Lo puedes añadir sin salir del Personalizador de temas:

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
	.et_vertical_nav #page-container #main-header
{
width: 200px;
}
.container {
margin-left: 15% !important;
}
#top-menu li {
margin-top: 25px;
border-bottom: 1px solid #878787;
}
.et_vertical_nav #main-header #logo {
margin-top: 80% !important;
margin-bottom: 10px !important;
}
.et_vertical_nav.et_vertical_fixed.et_header_style_left .et-fixed-header #et-top-navigation, .et_vertical_nav.et_vertical_fixed.et_header_style_split .et-fixed-header #et-top-navigation {
padding-top: 0px !important;
}}

A continuación, modifica los valores que veas convenientes. Tales como (se indican en rojo):

El ancho del menú lateral.

.et_vertical_nav #page-container #main-header{
width: 200px;
}

El margen de separación con el borde izquierdo.

.container {
margin-left: 15% !important;
}

La separación entre títulos y el grosor y color de la línea de separación.

#top-menu li {
margin-top: 25px;
border-bottom: 1px solid #878787;
}

O la altura del logo.

.et_vertical_nav #main-header #logo {
margin-top: 80% !important;
margin-bottom: 10px !important;
}

Añadiendo el código desde el personalizador de temas, podrás observar los cambios mientras los vas realizando.

Una vez quede como deseas, guarda cambios (botón de Publicar).

diseñar menú vertical lateral divi

Básicamente, el menú lateral en Divi ya estaría terminado, pero si quieres que el menú también se muestre transparente aún queda un paso más.

De esta forma la cabecera quedará integrada con la imagen de fondo.

Para ello tendrás que tener en cuenta la elección de los colores de los títulos, el color del logo y el color de fondo, de forma que no resulte incómoda su legibilidad.

Por supuesto que la imagen de fondo tenga un espacio libre de tal forma que permita dar visibilidad al menú vertical, algo clave para conseguir un diseño mucho más limpio.

De lo contrario, también puedes hacer uso de los ajustes de degradado que se pueden aplicar con el constructor de Divi Builder, para así añadir un tono más uniforme debajo del texto del menú.

Por lo tanto, para terminar de crear un menú transparente en Divi, vuelve hasta Cabecera y Navegación -> Barra del menú principal -> color de fondo. Y baja la barra de transparencia del color hasta conseguir el resultado que necesitas (sin el código anterior esta función no se aplica).

menú vertical transparente tema divi

Una vez que todos los ajustes estén correctos, clica en el botón superior de Publicar. O incluso tienes la opción de programar los cambios para más adelante en el caso de que estés realizando un rediseño completo de toda la web (opción de la ruleta).

En cuanto al formato en otros tamaños, smartphone y tablet, se mostrarán como habitualmente, con menú horizontal. Lo que sí podrás es ajustar el tamaño de la imagen de fondo con ayuda del constructor visual.

Por último, revisa que no tengas ningún otro código que pueda solaparse con este. Como podría ocurrir con los códigos para personalizar el menú principal que ya compartimos en otra ocasión o con un código que añada elementos tales como una sticky bar.

Como podrás comprobar, un menú vertical con la plantilla Divi es casi más simple que un menú horizontal estándar, incluso a lo que navegabilidad y usabilidad e refiere.

Además, en ciertas webs, puede ser útil para hacer mostrar al usuario más cómodamente la información relevante de la web, y por tanto, mejorar la converisón.

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (3 votos, ¿Te ha resultado útil? ¡Danos un 5!)
Cargando…

También te puede interesar...

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies
¡GRATIS! 

Esta guía con 7 Trucos de diseño para Divi

¡GRATIS!

Esta guía con 7 Trucos de diseño para Divi

Obtén, de forma totalmente gratuita, estos trucos de diseño que la plantilla Divi no incluye y crea webs únicas.

Consentimiento

¡Perfecto! Ahora VE A TU BANDEJA DE ENTRADA y abre el email que te he enviado desde DIVESP. ¡Gracias!