Hola en este tutorial aprenderás a crear una sección con un zoom en la imagen de fondo, esto obviamente lo lograremos con divi, el tema más flexible para wordpress.
En este tutorial no solo aprenderás a realizar este efecto de zoom, también aprenderás otros truquitos (trucos) que son realmente útiles a la hora de diseñar un sitio web con divi. Por ejemplo, ¿sabes cómo poner dos botones en línea con divi? Es decir, ¿un botón a un lado de otro? Si no sabes como hacerlo también te mostraré como, realmente es muy fácil.
También hay ocasiones que colocamos la sección con una altura completa (100vh) pero el contenido de la fila no queda centrado verticalmente, ¡Seguro que te ha pasado! No te preocupes, también en este tutorial aprenderás como centrar el contenido de la sección verticalmente.
Como puedes ver no solo es un tutorial para crear una sección con un zoom en la imagen de fondo, sino que también aplicamos otros trucos realmente útiles, bueno, si eres seguidor de ovdivi desde hace tiempo, sabrás que todos los tutoriales han sido así 🙂 siempre hay algo más que aprender en cada tutorial, así que te invito a verlo completo.
Para realizar este tutorial nos apoyaremos de una plataforma web llamada animista.net. Desde esta página vamos a generar el código css del efecto zoom de fondo para posteriormente integrarlo con divi.
De todas formas aquí te dejo el fragmento de código css que he generado para este tutorial (por si no quieres entrar a la web):
.kenburns-top{-webkit-animation:kenburns-top 5s ease-out infinite alternate-reverse both;animation:kenburns-top 5s ease-out infinite alternate-reverse both}
@-webkit-keyframes kenburns-top{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0);-webkit-transform-origin:50% 16%;transform-origin:50% 16%}100%{-webkit-transform:scale(1.25) translateY(-15px);transform:scale(1.25) translateY(-15px);-webkit-transform-origin:top;transform-origin:top}}@keyframes kenburns-top{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0);-webkit-transform-origin:50% 16%;transform-origin:50% 16%}100%{-webkit-transform:scale(1.25) translateY(-15px);transform:scale(1.25) translateY(-15px);-webkit-transform-origin:top;transform-origin:top}}
Si quieres generar tu propio código, puedes visitar animista y generarte tu background.
Se me estaba olvidando, aquí tienes el código css para poner dos botones en línea, es decir, uno a lado de otro:
.clase-fila .et_pb_button_module_wrapper {
display: inline-block;
}
Genial, pues ya que sabes de que trata este tutorial y las herramientas que usaremos, dale play al video para que aprendas a realizar este bonito efecto.
Oscar, muchas gracias por la enseñanza entregada, viendo y probando, se entiende muy bien tu explicación, recien estoy conociendo tu página web y me parece demasiado interesante, sobre todo por el contenido que entregas, para quienes llevamos poco tiempo en esta disciplina, se agradece por ser tan directo y entregar las líneas de comandos, que para hacer algunos efectos en divi sin eso es casi imposible, aca pude rescatar una información con respecto al ajuste de los bloques en los botones, yo estoy aún diseñando una web http://www.rubybc.com donde e tratado por todo lados hacerla que parezca una aplicación móvil y no logro hacerla que quede a mi gusto, la tengo oculta para verla desde escritorio, solo se ve en el celular, ahora probare esta opción que aprendi si me da mejores resultados, saludos y muchas gracias nuevamente.
Hola Claudio muchas gracias por las palabras. He revisado el sitio y vas muy bien, yo te recomendaría primero diseñar tu sitio web en una aplicación de interfaces como Adobe XD. Y ya teniendo una referencia de diseño ahora sí empezar a realizar el diseño con divi, teniendo el diseño definido se te hará menos complicado. Si tienes el diseño y hay algo que no puedas realizar con divi yo te puedo echar una mano.
Saludos Claudio, un abrazo.
Muchas gracias por el tutorial, es muy bueno! Me pregunto si no es posible aplicar el css para el efecto del zoom solo a la imagen directamente. Al aplicarlo a la sección completa (más alla del truco del dupliado) te genera más problemas. Por ejemplo en mi caso lo apliqué en una sección que tiene un slider (el que viene con divi) y entonces el efecto también aplica a los controles del mismo.
Desde ya muchas gracias
Hola Santiago, tienes que buscar la clase específica del slider y reemplazarla en el código CSS. Si me envías la url dónde estás aplicando el efecto te puedo ayudar.
Hola Oscar, gracias por tu respusta. La web puedes verla aquí: festivalguabinaytiple.hodiwebs.com ¿Se te ocurre algo?
Saludos!
Por fa Santiago escríbeme por aquí: https://m.me/ovdivi o por correo electrónico: [email protected]
Me gustaría entrar a tu sitio para hacer pruebas 🙂
Hola Oscar, muy buenos tus tutoriales, gracias. Dejo aquí una consulta. ¿Cómo se puede hacer este efecto en la imagen de fondo de las diapositivas? Porque en el módulo no está la opción de nombre de clase para cada diapo, sólo de css personalizado. ¡Gracias de antemano!
Hola Vero qué tal solamente reemplaza del código CSS todas las clases que dicen: “kenburns-top» por “et_pb_slide” que es la clase de los slide que viene por defecto con divi. Inténtalo y me comentas como te va. Un abrazo.
Gracias Oscar, funcionó tu recomendación. Ahora estoy tratando de hacer una animación para la imagen de fondo y otra para el título de cada diapositiva… si encuentro la forma prometo compartirla por aquí. Por ahora no lo logro
Hola Oscar, estuve viendo tu contenido y esta muy interesante, me preguntaba si en divi se puede hacer una pagina como esta https://spark.adobe.com/page/ayMrbtnKhmSSP/#índice-de-protocolos
Hola Felix qué tal, muchas gracias. ¿Qué es exactamente lo que deseas hacer de esa página? ¿El efecto parallax? Si es así, sí lo puedes replicar con divi 🙂
Si el efecto parallax del fondo, hoy creo que ya lo consegui, no es exactamente igual, pero si se parece, si puedes hacer una tutorial estaria bueno, para ver si lo haces de una forma mas optima
Hola Óscar, excelente tutorial! Muchas gracias!
A mi me pasa que mientras está haciendo el efecto, se me desborda por los lados y me sale scroll horizontal (si lo fuerzo) ¿Es posible que se quede sin scroll, siempre fijo? No se si me explico.
Gracias por tu ayuda
Hola Andrés, a la sección colócale un desbordamiento oculto desde Ajustes de la sección > Avanzado > Visibilidad… Quizá esto ayude.
Saludos.
Hola óscar, muy buen tutorial. una pregunta, ¿hay alguna forma de poder poner una fila al lado de la otra?.
Saludos.
Hola Juan, si. Solamente te vas a los ajustes de la sección > avanzado > CSS Personalizado y en elemento principal colocas:
display: flex;
Hola!!!
Qué buen post!!!
A mi me pasa que me aparece scroll horizontal, puse desbordamiento oculto, pero nada, sigue apareciendo….jugué con el ancho maximo y tampoco lo consigo….
AYUDA!!!
Gracias de antemano…
Hola Santiago, cual es la url de tu web?