Cómo crear un botón de llamada a la acción (CTA) en los menús de Divi

¿Te gustaría resaltar algún elemento de tu menú de navegación con Divi? Vas a ver qué cosa más sencilla de hacer y el fantástico resultado…

La idea es destacar uno de los elementos de tu menú de navegación para convertirlo en un botón que atraiga atención, que llame a la acción. O sea, algo así…

Lo vamos a conseguir en solo 2 pasos, y menos de 5 minutos.

Añade un poco de CSS adicional

El primer paso es crear el código CSS que hará la magia. Para ello, como siempre, iremos a la sección CSS adicional del personalizador de WordPress, o sea, en:

Apariencia → Personalizar → CSS adicional

Una vez ahí añade el siguiente CSS:

/* Menú Divi con CTA normal */ 
@media (min-width: 980px) {
.ctamenu {
padding: 0!important;
border-radius: 30px; /* cambiar redondeado del botón */
border: solid 2px #1f769d; /* cambiar el color del borde */
transition: 0.3s;
background-color: #1f769d; /* cambiar el color de fondo */
}
.ctamenu a{
color: #f4f4f4!important; /* cambiar el color del texto del botón */
padding: 10px 15px 10px 15px!important; /* cambiar espacios de relleno del botón */
}

/* Menú Divi con CTA al pasar el cursor */
#top-menu-nav .ctamenu a:hover {
opacity: 1;
}
.ctamenu:hover {
border: solid 2px #fe8400; /* cambiar el color del borde al pasar el cursor */
background: #fe8400; /* cambiar el color de fondo al pasar el cursor */
}
}

Como se indica en los comentarios del código, puedes cambiar el aspecto a tu gusto (colores, espacios, aspecto del botón, etc.). Juega un poco con los valores cuando hayas realizado el siguiente paso…

Añade el identificador CSS al menú

Una vez creado el CSS tenemos que decidir a qué elemento de nuestro menú vamos a aplicarlo.

Sin salir del personalizador de WordPress ve a la sección de menús y, antes de nada, asegúrate de que estará visible la caja en la que añadir clases CSS.

Esto se hace en el icono del rodamiento que hay en la sección de menús del personalizador, marcando la opción de «Clases CSS»

A continuación edita tu menú de navegación y abre el elemento que quieras personalizar, añadiendo en la caja de «Clases CSS» la que creamos en el código, que es ctamenu, como en la siguiente captura:

Cuando guardes los cambios tendrás un menú en Divi en el que habrá  uno de sus elementos resaltado, convertido en un bonito menú que cambia de color al pasar el cursor, pero sobre todo que servirá como CTA, para atraer clics y llevar a tus visitantes a donde quieras orientarles.

Chulo ¿eh?

(1 votos, promedio: 5) Valora este artículo para ayudar a mejorar la calidad del blog

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

Sobre el autor

Deja un comentario

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

Información base sobre privacidad:
  • Responsable: Fernando Tellado ([email protected])
  • Fin del tratamiento: Moderación de comentarios para evitar spam
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
  • Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba Ir al contenido