Tutorial Divi: Cómo añadir el efecto Ken Burns

¿Qué es el efecto Ken Burns?

El efecto Ken Burns es ese por el que una imagen parece que se mueve haciendo zoom y desplazamiento lentos hacia dentro, hacia afuera o en cualquier dirección.

Si te animas, en unos pocos pasos puedes aplicarlo en Divi para hacer tus imágenes de fondo más dinámicas, por ejemplo.

La magia del CSS

Lo primero de todo es añadir el CSS que creará la magia. Así que ve al Personalizador de temas de WordPress y, en la sección CSS adicional, añade lo siguiente:

Como verás es bastante largo, y puede que no uses todo finalmente, pero hazme caso y añade todo, ya decidirás más tarde tú mismo que estilos usarás y cuáles no.

El código CSS cubre todas las posibilidades de efecto zoom de Ken Burns, en todas direcciones: centrado hacia afuera y hacia adentro, desde la derecha, desde la izquierda, etc.

Añade el efecto Ken Burns a tus módulos

Donde realmente se nota y luce el efecto Ken Burns es en módulos con grandes imágenes, como el título a pantalla completa, o los carruseles de diapositivas, pero puedes usarlo en cualquier parte.

Para aplicarlo a tu módulo favorito solo tienes que cumplir 2 reglas:

  1. Añade las clases CSS de efecto Ken Burns al módulo elegido.
  2. Activa el efecto parallax en modo CSS (importante, sino no funciona) al módulo, la sección o la fila.

Así, por ejemplo, en un carrusel, añadiríamos la clase CSS siguiente:

En este caso hemos añadido la clase CSS que activa el efecto Ken Burns que acerca la imagen (zoomin) desde la derecha (right).

El efecto lo puedes ver en la diapositiva de imagen (segunda) de la web de mi coworking, aquí.

Valora este artículo para mejorar la calidad del blog ...

Al hacer una valoración se recoge una cookie con la IP de tu dispositivo

FlojitoNo está malEstá bienMe ha servidoFantástico (6 votos, promedio: 4,67 de 5)
Cargando…

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

Al dejar un comentario se solicitan datos como tu correo y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad | Responsable de los datos: Fernando Tellado García | Finalidad: Gestión y moderación de comentarios | Legitimación: Tu consentimiento expreso | Destinatario: Disqus (acogido a EU-US Privacy Shield) | Derechos: Tienes derecho al derecho al acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos

Centro de preferencias de privacidad

Cookies imprescindibles

Se usan para almacenar tu nombre, correo, IP y demás datos que dejas en los formularios de comentarios, contacto, acceso y tus preferencias de privacidad.

AUTH_KEY, SECURE_AUTH_KEY, LOGGED_IN_KEY, NONCE_KEY, comment_author, comment_author_email, comment_author_url, rated, gdpr, gawdp

Cookies de terceros

Usamos cookies de terceros en las que se almacenan externamente para conocer tus usos de navegación, si ya estás suscrito al boletín y los elementos compartidos en redes sociales

cfduit_, intercom-id, intercom-lou, mailerlite:language, mailerlite:webform, _ga, _gid
cfduit_, intercom-id, intercom-lou, mailerlite:language, mailerlite:webform
_ga, _gid

¿Quieres cerrar tu cuenta?

Se cerrará tu cuenta y todos los datos se borrarán de manera permanente y no se podrán recuperar ¿Estás seguro?

Pin It on Pinterest