Navegando por internet me encontré con el sitio web de ManyChat, el cual me pareció muy interesante ya que contiene efectos muy buenos. Sobre todo me gustó cómo presentaban una sección para mostrar su apartado de «verlo en acción» y dije: ¿por qué no hacerlo con Divi? 🤔
Me puse a practicar y después de muchas horas logramos un resultado muy parecido. Ahora quiero compartir contigo la solución en este nuevo tutorial único y exclusivo de la Academia OV Divi.
¿Qué tiene de especial esta sección?
Lo que más me llamó la atención de ManyChat fue cómo lograron que una sección aparentemente simple se sintiera tan dinámica e interactiva. Básicamente tienen un sidebar con varias pestañas donde cada una representa una funcionalidad diferente de su plataforma.
Pero aquí viene lo bueno: cuando haces clic en cualquier pestaña, mágicamente aparece un video mostrando esa funcionalidad en acción, acompañado de un texto explicativo. Todo esto con animaciones súper suaves que hacen que la experiencia se sienta muy premium.
El reto que me propuse
Quería lograr exactamente el mismo efecto pero usando únicamente:
- Las secciones, filas, columnas y módulos nativos que ya conocemos en Divi
- Pequeños fragmentos de HTML, CSS y JavaScript para agregar algunos estilos y funcionalidad
Nada de plugins externos, nada de librerías. Solo Divi + un poquito de código bien aplicado.
Lo que construimos juntos
El resultado final es una sección completamente funcional donde:
✨ Tienes un sidebar elegante con pestañas clickeables
✨ Cada pestaña muestra un video diferente de forma automática
✨ Los textos se actualizan dinámicamente según la pestaña activa
✨ Todo entra con animaciones suaves que se ven súper profesionales
✨ Funciona perfecto en desktop, tablet y móvil
Lo mejor de todo es que una vez que entiendes la lógica, puedes aplicarla para crear infinitas variaciones. ¿Quieres mostrar diferentes servicios? ¿Productos? ¿Testimonios? La estructura es la misma.
¿Para quién es este tutorial?
Honestamente, creo que cualquier persona que use Divi puede seguirlo. Si nunca has tocado código, te explico todo paso a paso. Si ya tienes experiencia, vas a apreciar cómo estructuramos todo de manera súper organizada.
Lo que sí te garantizo es que al final del tutorial vas a tener una sección increíble funcionando.
¿Listo para el resultado?
El tutorial completo, con todos los archivos y códigos, está disponible ahora mismo en el área de Tutoriales Exclusivos de la Academia OV Divi.
Te aseguro que después de verlo, vas a querer implementar esta técnica en todos tus proyectos. 😄
¡Nos vemos adentro! 🚀
¿Todavía no formas parte de la Academia OV Divi? Te estás perdiendo de contenido como este que realmente marca la diferencia en tus proyectos. ¡Únete ahora!
0 comentarios