Cómo crear un menú vertical personalizado en Divi

En este videotutorial prémium crearemos un menú vertical personalizado en Divi. Es una de esas soluciones que parecen complejas pero que en realidad se resuelven con una clase CSS y un snippet bien comentado. Si tienes una tienda online y quieres mostrar un menú de categorías en una barra lateral —que se mantenga siempre vertical, prolijo y con estilos propios— este es el tutorial que necesitas. Te lo voy a explicar paso a paso, igual que en el video, pero distillado en una guía que puedes seguir sin pausar cada cinco segundos.

Recuerda que puedes descargar tanto el archivo .JSON como el código que se usó en el tutorial en la parte inferior, en la zona de recursos del tutorial.

¿Quieres ver el resultado? Mira la muestra acá abajo:

Por qué un menú vertical en Divi (y no el módulo de barra lateral)

El problema que resuelve este tutorial es muy concreto. Cuando quieres mostrar un menú de categorías en una tienda hecha con Divi, lo intuitivo sería arrastrar el módulo de menú a una columna lateral. Pero al hacerlo el menú se colapsa, se ve apretado o no se renderiza vertical. La solución tradicional pasa por artificios como una zona de widgets con un menú de categorías, que termina dándote menos control sobre el diseño del que realmente quieres.

La técnica que vamos a usar resuelve eso de raíz. Tomamos el módulo de menú común y corriente de Divi, le asignamos una clase CSS personalizada, y mediante un snippet de CSS lo transformamos en un menú vertical de ancho completo, con espaciado entre elementos, estilos hover, indicadores de elemento activo, íconos a la izquierda de cada ítem y submenús que se despliegan correctamente hacia el costado. Lo mejor es que funciona como una especie de filtro de categorías sin depender de plugins externos como Divi Pixel Filter o similares.

Recuerda que en estos tutoriales te damos snippets con los que puedes lograr cosas fascinantes con diseños personalizados en Divi

Paso 1: Crea el menú de categorías en WordPress

Antes de tocar Divi necesitamos un menú en WordPress. Ve a Apariencia > Menús y crea uno nuevo —en el video lo llamé "menú vertical tienda" para tenerlo identificado—. La idea es que este menú agrupe las categorías de producto de tu tienda, porque es justamente lo que el cliente va a usar para filtrar lo que quiere ver.

Agrega al menú las categorías de producto que necesites: en el ejemplo enlacé categorías como backpacks, cascos, headphones, además de agrupaciones tipo "hombre" y "mujer" con sus respectivas subcategorías. Aquí entra un concepto clave: las subcategorías se acomodan como submenús arrastrándolas ligeramente hacia la derecha dentro del editor de menús de WordPress. Así, cuando despliegues "hombre", aparecerán sus opciones hijas en un submenú lateral. Ordena los elementos según la jerarquía que tenga sentido para tu catálogo y guarda los cambios.

Importante: para que este menú funcione de verdad, cada categoría que enlaces debería tener su propia página diseñada con el Theme Builder de Divi. La gracia del menú vertical es navegar entre categorías que ya están maquetadas con tu estilo. Si todavía no las tienes, una página normal también sirve, pero el resultado profesional viene de tener esas plantillas de categoría listas.

Paso 2: Coloca el módulo de menú y asígnale la clase CSS

Ahora entra al constructor visual de Divi en la página o plantilla donde vivirá el menú. Arrastra un módulo de menú a la columna lateral y selecciona en sus opciones el menú de categorías que acabas de crear. De entrada lo verás horizontal y poco vertical —eso es normal, todavía no hemos aplicado el CSS—.

El corazón de todo el tutorial está en asignarle una clase personalizada a ese módulo. Esa clase es lo que conecta el snippet de CSS con este menú en particular, sin afectar al resto de menús del sitio. Para hacerlo, abre las opciones del módulo de menú, ve a la pestaña Avanzado > ID y clases CSS, y en el campo "Clase CSS" escribe lo siguiente:

• Clase a poner en el menú: uxd-vertical-menu (sin el punto, muy importante)

Apenas pongas la clase no pasará nada visible todavía, porque el CSS aún no está cargado. Eso es exactamente lo esperado. En el siguiente paso pegamos el código y todo cobra vida.

Paso 3: Pega el CSS y entiende qué hace cada bloque

El CSS completo lo encuentras en la zona de recursos al final de este tutorial. Tienes dos lugares donde pegarlo, y la diferencia es importante:

• En las opciones del tema Divi (Divi > Opciones del tema > CSS personalizado): el estilo se aplica a todo el sitio. Úsalo si vas a tener este menú vertical en varias páginas.
• En la configuración de la página (Avanzado > CSS personalizado dentro del constructor): el estilo se aplica solo a esa página. Útil para un caso aislado como el del ejemplo.

Lo mejor del snippet es que viene completamente comentado, así que cada sección te dice qué hace. Vamos a recorrer las partes que más vas a querer personalizar para adaptarlo a tu marca.

Ancho completo y espacio entre elementos

El bloque que hace el menú vertical aplica width: 100% a cada elemento de la lista para que ocupe todo el contenedor, y un margin que controla la separación entre un ítem y otro. Si los quieres más pegados, baja ese margen a 5; si los quieres más aireados, súbelo. En el video lo dejé en 8 píxeles, que es un buen punto medio.

Estilos de los elementos y el border-radius

Aquí controlas el padding (el relleno alrededor del texto de cada enlace), el color de fondo de cada ítem y el redondeo de las esquinas con border-radius. Si quieres botones totalmente cuadrados, pon el radius en 0. El color de fondo gris claro que se ve en el ejemplo es solo una elección estética: puedes dejarlo blanco, transparente o del color que pida tu diseño.

Hover y elemento activo

El snippet incluye reglas separadas para el estado hover (cuando pasas el mouse) y para el elemento activo (la categoría en la que estás parado). En ambos casos cambias el color de fondo, el color del texto y el color del borde. En el ejemplo usé un naranja para que el menú activo destaque, pero copia ahí el color de tu marca. Para que el elemento activo se vea, recuerda que esa página debe estar incluida en el menú —Divi le aplica la clase current-menu-item automáticamente—.

Consejo: el color de la línea divisoria del submenú desplegable no se controla desde el CSS, sino desde el propio módulo de menú de Divi, en "Enlace del menú desplegable > Color de la línea". Si quieres coherencia total, pon ahí el mismo color de acento que usaste en el hover.

Íconos a la izquierda y comportamiento en móvil

El CSS añade un ícono a la izquierda de cada elemento del menú usando la familia de íconos ETMODULES propia de Divi y la propiedad content. Cambiando ese valor cambias el ícono, y también puedes ajustar su color y el margen para crear ese pequeño desplazamiento al hacer hover, un detalle que le da mucha vida. Por último, hay un bloque con un @media (max-width: 980px) que se encarga de que todos los elementos del menú se muestren correctamente en móvil y oculta el ícono hamburguesa, ya que en este contexto queremos el menú desplegado y no colapsado.

Toques finales: tipografía y consistencia visual

Con el CSS aplicado, el menú ya funciona. Lo que separa un buen resultado de uno excelente son los detalles tipográficos que se ajustan desde el propio módulo de menú de Divi, sin tocar código. En el ejemplo cambié la fuente a Montserrat con 14 píxeles —un aire mucho más limpio y propio de una tienda online— y agregué un título tipo "Categorías" como encabezado de la columna. La recomendación de fondo es que pienses este menú como parte del sistema visual de tu tienda, no como un componente aislado: los colores del hover, del elemento activo y de la línea divisoria deberían pertenecer a tu paleta de marca. Cuando todo conversa entre sí, el menú deja de parecer un widget genérico y se convierte en una pieza de diseño intencional.

Preguntas frecuentes sobre el menú vertical en Divi

¿Necesito saber programar para hacer este menú vertical?

No. El único requisito es copiar y pegar el snippet de CSS y asignar una clase al módulo de menú. No tienes que escribir CSS desde cero. Eso sí, entender qué hace cada bloque —como te lo expliqué arriba— te da el poder de personalizar colores, espaciados e íconos a tu gusto. Si quieres dominar este tipo de personalizaciones con confianza, el curso de desarrollo HTML y CSS te da las bases.

¿Puedo usar este menú fuera de una tienda online?

Sí. Aunque el caso de uso estrella es un menú de categorías de WooCommerce en una barra lateral, la técnica funciona con cualquier menú de WordPress. Puedes usarlo para una navegación lateral en un sitio de documentación, un índice de servicios o cualquier sección donde un menú vertical aporte orden. La clase y el CSS son los mismos.

¿El menú vertical funciona bien en celulares?

Sí, gracias al bloque @media que incluye el snippet. Ese fragmento ajusta cómo se muestran los elementos en pantallas menores a 980 píxeles y oculta el ícono hamburguesa para que el menú se vea desplegado. Aun así, prueba siempre el resultado en el modo de vista responsiva de Divi para confirmar que la separación y los tamaños se ven bien en tu diseño específico.

Conclusión

Crear un menú vertical personalizado en Divi es uno de esos trucos que cambian por completo la sensación de profesionalismo de una tienda online, y lo logras sin instalar un solo plugin extra. Con una clase CSS, un snippet bien comentado y unos ajustes tipográficos desde el propio constructor, transformas el módulo de menú estándar en una navegación lateral elegante, con hover, elemento activo, íconos y submenús que se comportan como tú quieres.

Lo más valioso es que ahora entiendes qué hace cada parte del código, así que puedes adaptarlo a cualquier marca cambiando colores, espaciados e íconos. Ese es el tipo de control que te da Divi cuando combinas su flexibilidad visual con un poco de CSS dirigido. Si te quedó alguna duda o quieres mostrarme cómo te quedó tu menú, déjame un comentario aquí abajo. Y si quieres dar el siguiente paso y dominar Divi a fondo, te invito a explorar los cursos de uxdivi.com.

Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este contenido prémium.

Descarga los recursos mencionados en este tutorial acá abajo 👇 siendo premium ⭐

Recursos, Snippets y descargas de este tutorial, puedes acceder a esto siendo premium ⭐