Botón CTA en Divi: cómo crear un call to action

Mira los sitios de las marcas que mejor convierten: casi todos tienen un botón destacado en la esquina derecha del menú — "Empieza gratis", "Reserva tu llamada", "Compra ahora". Ese botón de llamado a la acción (CTA) en el encabezado es de los elementos con mejor retorno en cualquier diseño web: está visible en todas las páginas, en el lugar donde el ojo termina de recorrer el menú. En este tutorial te enseño a crearlo en Divi con el Theme Builder, completamente funcional también en móvil — que es donde la mayoría de los tutoriales se quedan cortos.

El método tiene tres partes: preparar el menú en WordPress con una clase CSS, diseñar el encabezado con el módulo de menú del Theme Builder, y rematar con un snippet que hace que el CTA se comporte como botón de verdad en pantallas chicas. Vamos a ello.

Paso 1: crea el menú y activa las clases CSS

Primero necesitamos un menú de WordPress con un elemento final que será nuestro botón. Si ya tienes un menú creado, puedes saltarte la creación — solo asegúrate de que el último elemento tenga el texto que llevará el CTA ("Contactar", "Empezar", lo que corresponda a tu objetivo):

Ahora el paso que casi nadie conoce: WordPress puede asignar clases CSS individuales a cada elemento del menú, pero la opción viene oculta. Actívala desde Opciones de pantalla, en la parte superior derecha de la pantalla de menús:

Con la casilla activada, despliega el elemento del menú que será tu botón y verás un campo nuevo de "Clases CSS (opcional)". Asígnale la clase personalizada:

La clase que vas a darle al elemento del menú que quieres que sea el botón CTA es: menu-cta

Esa clase es el gancho que usaremos después para estilizar el elemento de forma independiente del resto del menú.

Paso 2: diseña el encabezado con el Theme Builder

Este paso es el más creativo. Ve a Divi → Generador de temas, crea (o edita) la plantilla de encabezado global, y construye tu header con el módulo de menú de Divi apuntando al menú que preparaste en el paso 1.

Para el CTA en desktop, el flujo dentro del módulo de menú es directo: en los ajustes de diseño puedes estilizar los enlaces del menú de forma general, y con la clase menu-cta aplicarle al último elemento un fondo de color, padding y bordes redondeados que lo conviertan visualmente en botón. En el videotutorial de la parte superior te muestro el proceso completo de personalización paso a paso.

Si buscas inspiración de diseño para esta parte, tenemos una serie completa de menús con el Theme Builder — incluyendo un menú con CTA a la izquierda que invierte la composición clásica. Y si quieres dominar los menús de Divi a fondo, el Mastery en creación de menús y blogs personalizados en Divi cubre desde headers básicos hasta mega menús.

Paso 3: el snippet CSS para que funcione en móvil

Aquí está el detalle que separa este tutorial de los demás: cuando el menú colapsa al formato hamburguesa en móvil, tu botón CTA se convierte en un elemento más de la lista desplegable — pierde todo el protagonismo. La solución es este snippet, que va en Divi → Opciones del tema → General → CSS personalizado:

/*---------------Menu CTA ---------------*/

@media only screen and (min-width: 980px) {
.menu-cta a {
   display: none !important;
    }
}

/*---------------Menu CTA Movil---------------*/

@media only screen and (max-width: 980px) {
.menu-cta a {
  background-color: #000;
  color: #fff!important;
  text-align: center;
  border-radius: 3px;
  text-transform: uppercase;
  padding-top: 15px!important;
  padding-bottom: 15px!important;
    }

  .menu-cta:hover a {
  background-color: #f6c85d;
  color: #000!important;
    }
}

¿Qué hace cada bloque?

• El primer bloque (pantallas de 980px o más) oculta el elemento menu-cta del menú de desktop — útil cuando en tu header de escritorio el CTA es un módulo de botón independiente junto al menú, y no quieres duplicarlo.
• El segundo bloque (pantallas menores a 980px) transforma el elemento dentro del menú hamburguesa en un botón completo: fondo negro, texto blanco centrado en mayúsculas, bordes redondeados y padding generoso para que sea cómodo de tocar.
• El hover cambia el fondo a amarillo (#f6c85d) con texto negro — ajusta ambos colores a tu paleta.

Consejo: si en tu diseño de desktop el CTA sí es el último elemento del menú (y no un botón separado), elimina el primer bloque del snippet y agrega en su lugar los estilos de botón para desktop bajo la misma clase. La clase menu-cta te da control total sobre ambos contextos.

El resultado

Como verás en este ejemplo, el resultado es totalmente estético y funcional, tanto en vista de escritorio como en responsive — el botón mantiene su jerarquía visual en ambos contextos:

Buenas prácticas para un CTA que convierte

El botón ya existe — ahora hagamos que trabaje. Tres principios que aplico en todos los proyectos:

1. Un solo CTA primario por header. Si el menú tiene tres botones compitiendo, no hay llamado a la acción — hay ruido. Elige la acción más valiosa para tu negocio y dale el protagonismo exclusivo.
2. Texto de acción específico. "Reserva tu llamada gratis" supera a "Contacto". El usuario debe saber qué pasa al hacer clic antes de hacerlo.
3. Contraste real. El botón debe romper con el resto del menú: si tus enlaces son oscuros, el CTA va en tu color de acento. Verifica el contraste también con el header transparente sobre imágenes, si tu diseño lo usa.

Para llevar el botón un paso más allá visualmente, prueba agregarle un efecto hover de pulso — un detalle de microinteracción que atrae la mirada sin ser invasivo.

Errores comunes

La clase CSS no aparece en el menú

Si no ves el campo de clases al desplegar el elemento del menú, la casilla de "Clases CSS" no está activada en Opciones de pantalla. Es la causa del 90% de los "no me funciona" de este tutorial.

El botón se ve bien en desktop pero desaparece en móvil

Revisa el breakpoint del snippet: usamos 980px porque es donde Divi colapsa el menú por defecto. Si tu tema tiene un breakpoint personalizado, iguala los valores de las media queries al tuyo.

Los estilos no se aplican

Casi siempre es especificidad: otro CSS del tema pisa tus reglas. Por eso el snippet incluye !important en las propiedades conflictivas. Si agregaste estilos propios y no aplican, inspecciona el elemento con las DevTools y verifica qué regla está ganando.

Preguntas frecuentes

¿Funciona este método en Divi 5?

Sí. El sistema de menús de WordPress, las clases CSS personalizadas y el módulo de menú del Theme Builder se mantienen en Divi 5. Como siempre con CSS personalizado, verifica el resultado en staging al actualizar — y aprovecha que Divi 5 trae opciones nuevas de diseño responsive que pueden simplificar parte del trabajo.

¿Puedo tener dos botones CTA en el menú?

Técnicamente sí (con dos clases distintas), pero no te lo recomiendo: dos llamados a la acción compiten entre sí y diluyen la conversión. Si necesitas una acción secundaria, dale estilo de enlace destacado, no de botón.

¿Cómo hago que el CTA lleve a una sección de la misma página?

Usa un enlace ancla como URL del elemento del menú (por ejemplo #contacto). Funciona igual con la clase aplicada — el botón hace scroll hasta la sección en lugar de cambiar de página.

¿Esto funciona con menús móviles personalizados?

Si reemplazaste el menú hamburguesa nativo por una solución custom (como un menú móvil tipo app), los selectores del snippet pueden variar. El principio se mantiene: clase personalizada + estilos de botón en el breakpoint móvil.

Mis recomendaciones finales

1. Define la acción del CTA según tu objetivo de negocio antes de diseñar — el diseño sigue a la estrategia, no al revés.
2. Usa la clase menu-cta de forma consistente en todos tus proyectos; tu CSS se vuelve reutilizable de sitio en sitio.
3. Prueba el botón en un celular real: el área táctil debe ser cómoda (mínimo 44px de alto) y el texto legible sin zoom.
4. Combina el CTA del menú con el resto del header pensado como sistema — logo, navegación y botón con una jerarquía clara.
5. Mide los clics del botón (GA4 con eventos) — el header es de los lugares más valiosos del sitio y merece datos, no intuición.

Conclusión

Crear un botón de llamado a la acción en el menú de Divi es un proyecto de menos de una hora con retorno permanente: una clase CSS en el menú, el diseño en el Theme Builder y un snippet para móvil. El resultado es un CTA presente en cada página del sitio, funcional en todos los dispositivos y alineado con tu marca. Configúralo una vez y deja que trabaje por ti en cada visita.

🎓 ¿Quieres dominar los menús de Divi a nivel profesional?
En el Mastery en creación de menús y blogs personalizados en Divi construimos headers completos con el Theme Builder: menús fijos, transparentes, mega menús, CTAs y navegación móvil tipo app. Accede como suscriptor y eleva cada header que diseñes.