Efecto latido en modulo CTA de Divi

por | 16 May, 2017 | animacion, css, Divi, Tutoriales | 9 comentarios

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». insertar-modulo-llamada-accion. animacion modulo llamada a la accion Divi

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.

llamada-a-la-accion-pulse

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í.

ajustes-css-divi-builder-pagina

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»