¿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.
Índice de contenidos
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?
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
