Crear un botón destacado (CTA) en un menu con Divi y animarlo

por | 16 May, 2018 | css, Menús

Presentación del tutorial

Seguro que has visto en un montón de páginas webs que en su menú principal se integra un botón con un estilo distinto al resto de enlaces. Un botón que destaca sobre los demás componentes del menú. Es lo que llamamos un botón CTA o de llamada a la acción, puesto que nos invita a pulsar sobre él. Ya sea para favorecer la venta de algún producto, conseguir una nueva suscripción o lo que sea. Así que eso es lo que haremos. Crear un botón destacado (CTA) en un menu con Divi y animarlo.

En el blog oficial de Elegant Themes, hay un post que explica cómo integrar un botón cta en nuestro menú. Pulsando aquí puedes visitarlo.

Y es en este artículo en el que me he basado para crear este tutorial con las siguientes particularidades:

1. Por un lado, si ves el tutorial al que me refiero, verás que aplica gran cantidad de código CSS y también JQuery (JavaScript). Esto está bien porque significa que abarca muchas funcionalidades aplicadas al comportamiento del botón. Sin embargo, he querido reducir ese código a la mínima expresión. Usaré sólo el CSS necesario para un funcionamiento correcto. No tendrá tantas opciones pero creo que será suficiente para la mayoría de los casos. Y además, será más fácil de entender y podemos ir añadiendo funcionalidades según necesitemos.

2. Por otro lado, y retomando el tema del anterior punto, vamos añadir una animación al botón. Un comentario de un usuario, Tomás, sobre la posibilidad de agregarle una animación al botón cta a partir de otro tutorial que ya hicimos, aquí puedes verlo, me animo a incluirlo. Ya fue casualidad, porque coincidió que la peticion estaba estrechamente relacionada con este tutorial que estaba en proceso.

Bajo estas líneas he incluido un módulo menú con el botón CTA y la animación creada.

¿Y cómo se verá en un móvil?

 

Así es como lucirá nuestro menú con botón CTA si lo visualizamos desde un dispositivo móvil.

IPHONE-AULAMEDIA

 

Preparar el menú

Puedes crear un menú nuevo para seguir el tutorial o crear un módulo menú  si no quieres modificar tu menú principal. En cualquier caso debemos activar la opción que nos permita aplicar clases CSS a los elementos de nuestro menú.

Así que navegamos hasta Apariencia > menús y en la parte superior de la página abrimos las opciones de pantalla (1) y nos aseguramos de que esté activada la opción clases CSS (2). Fíjate en la captura que te adjunto.

opciones-de-pantalla-menus-wordpress

Una vez tengamos esta opción activada ya podemos agregar clases CSS a los elementos del menú. Agregar la clase CSS permitirá cambiar el estilo y personalizar el comportamiento de uno o varios elementos (enlaces) de nuestro menú.

Así que, teniendo en pantalla nuestro menú (ya sea el menú principal u otro que apliquemos a un módulo), pulsamos en la flechita (1) que abre el enlace que queremos convertir en botón CTA y, en el campo clase CSS, escribimos la clase, que será cta-menu (2). guardamos a continuación el menú para que actualice los cambios.

aplicar-css-a-menu

 

Personalizar nuestro botón con CSS

Bueno, ya hemos asignado la clase CSS a nuestro botón en el menú. Ahora debemos crear el código. Vamos a ponerlo en el panel CSS de las opciones de Divi. Puedes hacerlo desde Divi > opciones del tema o desde Divi > personalizador de tema >> CSS adicional, donde además podrás visualizar la página según editas el css y ver los cambios en vivo (si tienes dudas, mira el videotutorial).

Este es el código que debes incluir.

.cta-menu a {
	border: 2px solid #fff;
    padding: 10px !important;
	border-radius: 25px;
    background: #ffcd02;
    color: #fff !important;
}
    
.cta-menu a:hover {
	border: 2px solid #ffcd02;
    background: #ef5555;
    color: #000 !important;
    opacity: 1 !important;
}

Cambia si quieres grosor de contorno, colores, etc.

Aquí, una pequeña guía para cambiar el estilo de nuestro CSS.

GUIA-CSS-MENU-CTA

 

Añadir la animación

Como comentaba más arriba, a partir de un comentario sobre otro post de este sitio, Efecto latido en modulo CTA de Divi (un saludo, Tomás), queremos que nuestro botón se anime como ocurre en el citado tutorial. Así que sólo tenemos que copiar el código CSS que usamos en el efecto y lo incluimos en la clase cta-menu.

Ahora el código debería verse así:

cta-menu a {
	border: 2px solid #fff;
    padding: 10px !important;
	border-radius: 25px;
    background: #ffcd02;
    color: #fff !important;
	animation-name: pulse;
animation-duration: 3000ms;
transform-origin:70% 70%;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes pulse {
0% { transform: scale(1); }
30% { transform: scale(1); }
40% { transform: scale(1.08); }
50% { transform: scale(1); }
60% { transform: scale(1); }
70% { transform: scale(1.05); }
80% { transform: scale(1); }
100% { transform: scale(1); }

}
    
.cta-menu a:hover {
	border: 2px solid #ffcd02;
    background: #ef5555;
    color: #000 !important;
    opacity: 1 !important;
	animation: none;
}

Y ya hemos terminado. Ahora añade estilos a tu botón basándote en el post que me ha servido de referencia o buscando efectos que puedes encontrar en esta misma página.

Si te has quedado con alguna duda puede que te ayude ver el tutorial en su versión de vídeo. Si te ha gustado…¡Comparte!