Cerrar video

Cómo crear tabs elegantes con animaciones estilo ManyChat en Divi sin plugins

por | May 24, 2025 | Tutorial premium | 0 Comentarios

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.

Cómo crear tabs elegantes con animaciones estilo ManyChat en Divi sin plugins

¿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!

Este tutorial es premium

Accede a este y más tutoriales exclusivos de la Academia OV DIVI por tan solo $10 USD al mes y saca el máximo provecho del mejor tema y constructor visual para WordPress.

Tutoriales Relacionados

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$10 USD / mes

Pin It on Pinterest