Menú con CTA a la izquierda en Divi (Theme Builder)

El menú por defecto de Divi agrupa todo en una sola fila: logo, enlaces, y los íconos de carrito y búsqueda pegados al final. Pero a veces necesitas separar esos elementos — por ejemplo, dejar el carrito y la lupa de búsqueda en un extremo y los enlaces del menú en otro, con un CTA bien posicionado a la izquierda. En este tutorial te muestro cómo crear un menú con CTA a la izquierda en Divi usando el Theme Builder, separando el carrito y la búsqueda del resto de los ítems del menú.

Esta personalización nació de la petición de una suscriptora, y es perfecta cuando quieres un header con una jerarquía visual más trabajada que la que ofrece el menú estándar. Vamos a construirlo desde cero con el generador de temas de Divi, así que tienes control total sobre cada elemento.

¿Por qué usar el Theme Builder para el menú en lugar del menú nativo?

El menú nativo de Divi es rápido de configurar pero limitado en cuanto a distribución de los elementos. Cuando construyes el header con el Theme Builder, puedes ubicar el módulo de menú, el carrito y la búsqueda en columnas independientes, lo que te da libertad para distribuirlos como quieras: el CTA a la izquierda, los enlaces al centro, los íconos a la derecha, o cualquier combinación. Si quieres dominar este flujo a fondo, lo cubrimos paso a paso en el Curso de Menús y Blogs Personalizados en Divi.

Paso 1: Crea una plantilla de header en el Theme Builder

Ve a Divi → Generador de temas (Theme Builder). Aquí puedes asignar el menú a todo el sitio o solo a una página específica. Si quieres que aplique globalmente, lo asignas al template por defecto; si solo lo quieres en una página concreta (útil para probar), crea una plantilla nueva asignada a esa página. Una vez creada, haz clic en Añadir encabezado personalizado (Custom Header) y entra a construirlo.

Consejo: si vas a aplicar este menú a una sola página de prueba, configura esa página con la plantilla "Blank Page" (página en blanco) para que el menú por defecto del tema no aparezca encima del que estás construyendo. En producción, cuando lo asignas globalmente, este paso no es necesario.

Paso 2: Inserta el módulo de menú

Dentro del encabezado, crea una fila y añade un módulo de Menú. Elige el menú que quieras mostrar (el principal u otro que hayas creado en Apariencia → Menús). Por defecto, el módulo de menú de Divi incluye el ícono de carrito y el de búsqueda integrados al final de los enlaces. Lo que vamos a hacer es separarlos para colocarlos donde queramos.

Paso 3: Estructura las columnas para distribuir los elementos

La clave está en la estructura de columnas de la fila. En lugar de dejar todo en una sola columna, divide la fila en varias: por ejemplo, una columna para el logo o el CTA a la izquierda, una para los enlaces del menú al centro, y una para los íconos de carrito y búsqueda a la derecha. Cada elemento va en su propia columna, lo que te permite alinearlos de forma independiente.

Para el CTA a la izquierda, puedes usar un módulo de botón con tu llamado a la acción ("Reserva ahora", "Empieza gratis", lo que necesites) y posicionarlo en la primera columna. Así el primer elemento que ve el usuario al escanear el header de izquierda a derecha es tu acción principal.

🎓 ¿Quieres dominar el Theme Builder de Divi de verdad?
En uxdivi.com/cursos tenemos el Curso de Divi 5 completo donde cubrimos el generador de temas, headers y footers personalizados, y todas las posibilidades de distribución de elementos. Accede como suscriptor y construye headers profesionales sin límites.

Paso 4: Separa el carrito y la búsqueda del menú

Para que el carrito y la lupa de búsqueda no aparezcan pegados a los enlaces del menú, tienes dos caminos. El primero es desactivar el ícono de carrito y búsqueda dentro de las opciones del módulo de menú (en la pestaña de Elementos) y añadirlos por separado en su propia columna con módulos independientes o con CSS personalizado. El segundo es usar clases CSS para reposicionar esos íconos dentro del header. En el video del tutorial muestro el método exacto con las clases CSS que reposicionan el carrito y la búsqueda en su columna propia.

Consejo: trabaja siempre el header en vista de escritorio primero y luego ajusta el comportamiento responsive. Los menús con muchos elementos distribuidos en columnas necesitan atención especial en móvil, donde normalmente se colapsan en un menú hamburguesa. Revisa cómo se ve en tablet y móvil antes de dar por terminado el diseño.

Paso 5: Ajusta el responsive

En pantallas pequeñas, las columnas que distribuiste horizontalmente tienden a apilarse. Configura el comportamiento del módulo de menú para que colapse en hamburguesa en móvil, y decide qué haces con el carrito y la búsqueda: normalmente conviene dejarlos visibles junto al ícono de hamburguesa para que el usuario tenga acceso rápido al carrito en cualquier momento. Si quieres ir más allá con la navegación móvil, te puede interesar el tutorial sobre el menú móvil tipo app en Divi 5.

Otras personalizaciones de menú que combinan con este header

Una vez que dominas la estructura de columnas en el header, se abren muchas posibilidades. Por ejemplo, puedes añadir un contador de productos en el carrito del menú para que el usuario vea cuántos artículos lleva, o aplicar un efecto hover de subrayado en los enlaces del menú para darle más personalidad. Cada uno de estos detalles suma a un header que se siente diseñado, no plantilla.

Preguntas frecuentes sobre el menú con CTA en Divi

¿Necesito saber CSS para hacer este menú?

Para la distribución básica con columnas no necesitas CSS — el Theme Builder lo permite visualmente. Para separar con precisión el carrito y la búsqueda en su columna propia, el tutorial usa unas clases CSS sencillas que puedes copiar tal cual.

¿Funciona este menú en Divi 5?

Sí, el Theme Builder está disponible tanto en Divi 4 como en Divi 5. La lógica de columnas y módulos es la misma, aunque la interfaz de Divi 5 es más moderna. El concepto de separar los elementos en columnas aplica igual en ambas versiones.

¿Puedo aplicar este header solo a algunas páginas?

Sí. En el Theme Builder puedes crear plantillas con asignaciones específicas: a todo el sitio, a un tipo de contenido, a categorías, o a páginas individuales. Eso te permite tener un header distinto en la home, en la tienda, o donde lo necesites.

¿El carrito separado sigue funcionando con WooCommerce?

Sí, mientras uses el ícono de carrito nativo de Divi (que está conectado a WooCommerce), separarlo visualmente del menú no afecta su funcionalidad. Sigue mostrando el contenido del carrito y enlazando a la página de carrito o checkout.

Conclusión

Separar el carrito y la búsqueda del menú y colocar un CTA a la izquierda es de esas personalizaciones que elevan un header de "plantilla" a "diseño a medida". Con el Theme Builder de Divi y una estructura de columnas bien pensada, lo logras sin depender de plugins externos. La clave está en distribuir cada elemento en su columna y reforzar la separación del carrito y la búsqueda con un poco de CSS.

🎓 ¿Quieres crear menús y headers personalizados de nivel profesional?
En uxdivi.com/cursos tenemos el Curso de Menús y Blogs Personalizados en Divi donde construimos headers complejos, menús de pantalla completa, megamenús y mucho más. Accede como suscriptor y diseña navegaciones que destacan.

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 todo este contenido siendo premium ⭐