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?

La entrada Cómo crear un botón de llamada a la acción (CTA) en los menús de Divi la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir!

Deja una respuesta

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