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.

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.

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».

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:

[pastacode lang=»css» manual=»%40media%20(min-width%3A%20981px)%20%7B%0A.et_vertical_nav%20%23et-main-area%2C%20.et_vertical_nav%20%23top-header%20%7B%0Amargin-left%3A%200px%20!important%3B%0A%7D%0A%09.et_vertical_nav%20%23page-container%20%23main-header%0A%7B%0Awidth%3A%20200px%3B%0A%7D%0A.container%20%7B%0Amargin-left%3A%2015%25%20!important%3B%0A%7D%0A%23top-menu%20li%20%7B%0Amargin-top%3A%2025px%3B%0Aborder-bottom%3A%201px%20solid%20%23878787%3B%0A%7D%0A.et_vertical_nav%20%23main-header%20%23logo%20%7B%0Amargin-top%3A%2080%25%20!important%3B%0Amargin-bottom%3A%2010px%20!important%3B%0A%7D%0A.et_vertical_nav.et_vertical_fixed.et_header_style_left%20.et-fixed-header%20%23et-top-navigation%2C%20.et_vertical_nav.et_vertical_fixed.et_header_style_split%20.et-fixed-header%20%23et-top-navigation%20%7B%0Apadding-top%3A%200px%20!important%3B%0A%7D%7D» message=»» highlight=»» provider=»manual»/]

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).

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).

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.