Efecto latido en modulo CTA de Divi
Efecto latido en el módulo CTA. Animar el módulo para captar la atención del usuario
Como en otras ocasiones, vamos a crear una pequeña animación para atraer la atención del visitante sobre un botón. Este botón será el que está integrado en el módulo llamada a la acción. Se animará simulando un latido cada 3 segundos, puedes ver cómo quedará al final del post, pulsa AQUÍ para verlo.
Creamos el módulo
Primero, creamos una nueva entrada y activamos el constructor Divi. En la sección que se crea por defecto, insertamos un bloque de una sola columna. A continuación añadimos en la columna un módulo tipo «Llamada a la acción».
Una vez hemos seleccionado el módulo CTA (llamada a la acción), configuralo de la forma que quieras, es intrascendente cómo lo hagas para este ejemplo. Nosotros lo hemos personalizado de la siguiente manera, pero tú hazlo como más te guste.
En la pestaña CSS personalizado del módulo Llamada a la acción, añade la clase pulse.
Copia el código CSS
Ahora copia el código CSS que te proporcionamos y lo pegaremos en alguno de los dos sitios siguientes.
.pulse .et_pb_button { animation-name: pulse; animation-duration: 5000ms; 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); } } .pulse .et_pb_button:hover { animation: none; }
Puedes cambiar algunos valores del código si quieres para personalizar la animación, por ejemplo, que en principio se reproduce cada 3 segundos.
¿Donde poner el código CSS?
Cuando hayas copiado el código, puedes pegarlo en alguno de estos lugares:
Opción 1. En la página si no vas a usar el código en otras entradas, como es mi caso
Pulsa en los ajustes de página, arriba a la derecha y en la pestaña CSS, pégalo ahí.
Opción 2. En opciones del tema Divi, si quieres reutilizar el código en otras entradas o páginas
Navega desde tu escritorio de WordPres, en el menú lateral hasta Divi > Opciones del tema > CSS personalizado (abajo del todo). Pégalo donde se te indica con una flecha en la imagen inferior.
Guarda los cambios una vez pegado el código CSS. Y eso es todo. Puedes ver el ejemplo a continuación.
Llamada a la acción
Efecto animación latido sobre un módulo «llamada a la acción»
Hola, no me funciona el efecto latido.
La versión que tengo de DIVI está actualizada.
Gracias.
Hola, Juan
Acabo de comprobarlo y va ok. Prueba a poner el código en la otra opción que se propone y no olvides poner la clase al módulo.
Saludos
Ahora si, me faltaba poner la clase en el módulo.
Muchas gracias.
Fenomenal, Juan!
Gracias a tí y saludos
Súper, pero cómo hago este efecto en un botón del menú superior.
Verás: tengo un CSS para un CTA, ¿cómo agrego el efecto latido a ese CTA del menú superior?
Saludos.
Hola, Tomás
Ya es casualidad, precisamente estoy creando un tutorial que explica cómo añadir un botón CTA a un menu. Si te parece le añado el efecto latido al botón. Lo podrás ver este miércoles 16 de mayo. Mañana 15 es fiesta en Madrid, jeje.
Saludos
Sería genial que pudieras hacer este efecto latido en ese tutorial.
Créeme que lo estaré esperando.
[Por cierto, aquí en Colombia hoy es el día de fiesta 😉 ]
Un abrazo y gracias.
¡Hola!
[Comento aquí porque parece que no están habilitados los comentarios en la última entrada]
Lo dicho: siempre me salvas la vida.
Te ha quedado fenomenal el post sobre botones CTA y genial la animación. Ya estoy trabajando en ello para ponerlo en el sitio que estoy arreglando .
Gracias por tenerme en cuenta y gracias por el saludo.
Un fuerte abrazo y esperaré los nuevos tutoriales.
😉 Tomas
Gracias, Tomás!
Había olvidado activar los comentarios.
Encantado de poder ayudar
Un abrazo!