Crear un botón de llamado a la acción (CTA) en Divi

Inicio / Blog / Divi Theme Builder / Crear un botón de llamado a la acción (CTA) en Divi

Autor: Jefferson M

Publicación: 07 Sep, 2022

En este tutorial te enseñaremos a crear un botón de llamado a la acción (CTA) en el menú de Divi, creado con el Theme Builder, y completamente funcional para móvil, ¡vamos a ello!

Índice

Crea un menú

En este primer paso debemos crear un menú para poder darle las configuraciones necesarias. Si ya tienes un menú creado en tu sitio, puedes pasar por alto este paso, solo tomando en cuenta que el último elemento de tu menú debe tener el texto que llevará botón CTA en Divi:

crear un menú en WordPress

Una vez que tengas el menú creado, debes activar la casilla de clases CSS de los menús, puedes hacerlo en la parte superior derecha de la pantalla de WordPress:

Activar clases CSS en menú de WordPress

Cuando tengas activada las clases CSS para los elementos del menú, debes asignarle una clase personalizada al último elemento del menú que elegiste para que fuera el CTA.

Aplicar CSS Crear un botón de llamado a la acción (CTA) en Divi

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

Asignado este elemento, podemos proceder a personalizar el menú con el Generador de temas 👇

Crea un encabezado con el Theme Builder

Este paso es quizá el más largo, para personalizar el menú con Theme Builder solo debes usar el módulo de menú de Divi, y darle los ajustes y personalizaciones que desees con el mismo módulo. Para ver a detalle como hacerlo, puedes ver nuestro videotutorial en la parte superior.

Personaliza el botón CTA en móvil con CSS

Después de que tengas ajustados los menús con el Theme Builder de Divi, podemos darle los últimos ajustes para que el botón funcione de manera correcta en móvil. Para ello, debemos aplicar, dentro de las opciones de Divi > Generales > CSS personalizado, el siguiente código:

/*---------------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;
    }
}

Recuerda cambiar los valores, como colores de fondo, texto, margen, separación y otros, a los valores que desees para tu diseño.

Resultado ✅

Como verás en este ejemplo, el resultado es totalmente estético y funcional, tanto para vista de desktop como vista responsive:

Ejemplo botón de llamado a la acción (CTA) en Divi

¿Qué te parece este diseño? ¿Te ha gustado el Botón de llamado a la accion CTA en Divi? Si es así, no olvides dejar tus comentarios acá 👇 y compartir este contenido en tus redes sociales.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Solicitud de cancelación de suscripción

Aviso importe

🚩 Debes solicitar la cancelación de tu suscripción al menos 24 horas antes de tu renovación, de otro modo, no podremos procesar a tiempo la cancelación antes de tu renovación.

Al cancelar tu suscripción, perderás el acceso a todo esto:

🚩 A más de mil contenidos especializados en el aprendizaje del diseño web
🚩 El soporte personalizado en Divi
🚩 Acceso al grupo de Discord
🚩 Acceso a la descarga de las actualizaciones de los plugins, el contenido y las descargas de nuestro sitio.
🚩 Puntos y rangos obtenidos en la plataforma

✅ Te ofrecemos la opción de pausar tu suscripción 2 o 3 meses y así no perderás el progreso obtenido en la plataforma.

Lamentamos mucho 😩 que tu experiencia en nuestra plataforma no haya sido la mejor. Para poder procesar tu solicitud y hacerla efectiva, necesitaremos que por favor nos envíes lleno este formato. Esto nos ayudará a poder seguir mejorando nuestra propuesta de valor y siendo útil para todos los usuarios.

Solicitud de cancelación

¿Por cuál o cuáles razones deseas cancelar tu suscripción?

¿Qué características mejorarías en nuestra web?

¿Cuál es tu nivel de satisfacción en relación con la calidad del soporte que ofrecemos por diferentes medios? donde 1 es insatisfecho y 5 es satisfecho

¿En esta escala que tanto recomendarías a UXDIVI a un amigo o colega? donde 1 es "no lo recomendaría" y 5 es "Lo recomendaría totalmente"

14 + 1 =


Iniciar Sesión

¿No tienes cuenta? Registrarse

Otros planes

¡Accede a más de 1330 contenidos especializados en Diseño Web con Divi por un solo precio!

Trimestral

Ahorra 6 USD 🔥

$US 18/ Mes

*Pagando US$ 54 cada 3 meses

¿A qué accedes con este plan?

Lifetime

Un solo pago 🔥

$US 499/ Lifetime

*UN SOLO PAGO DE POR VIDA

¿A qué accedes con este plan?

Con este plan accedes a:

  1. ✅ Todos los cursos
  2. ✅ Todos los tutoriales prémium
  3. ✅ Todos los plugins y layouts
  4. ✅ Soporte prémium vía email
  5. ✅ Acceso a la comunidad en Discord

Con este plan accedes a:

  1. ✅ Todos los cursos
  2. ✅ Todos los tutoriales prémium
  3. ✅ Todos los plugins y layouts
  4. ✅ Soporte prémium vía email
  5. ✅ Acceso a la comunidad en Discord
  6. ✅ Descuentos en Templates para Divi