Si alguna vez un cliente te pidió una invitación de cumpleaños digital, probablemente la resolviste con una página sencilla en Divi con texto, una imagen y quizás un formulario de contacto. Cumple, pero no es lo que el cliente imaginaba cuando dijo «quiero algo bonito».
En este tutorial construimos una invitación que sí sorprende: al cargar aparece una cortina animada con un botón de play, y al hacer clic los paneles se separan como un telón revelando la invitación completa con música de fondo y confetti cayendo. Los invitados confirman su asistencia directamente por WhatsApp con su nombre, sin formularios ni plugins.
El resultado lo puedes ver aquí: Ver demo
¿Qué vas a lograr?
Una página de invitación infantil completamente funcional y visualmente llamativa, construida en Divi 5. El resultado incluye:
- Efecto cortina de apertura — dos paneles que se deslizan hacia los lados revelando el contenido, como un telón de teatro
- Botón de play animado — centrado entre los dos paneles, con un emoji rebotando que invita a hacer clic
- Música de fondo con fade in — se activa automáticamente al abrir la cortina
- Indicador de música — unas barras animadas en la esquina inferior derecha para pausar y reanudar
- Confetti animado — partículas de colores que caen al revelar la invitación
- Confirmación por WhatsApp — un modal que pide el nombre del invitado y abre WhatsApp con un mensaje pre-llenado listo para enviar
- Sin plugins, sin servicios externos — todo con CSS, JavaScript y los módulos nativos de Divi 5
¿Para qué tipo de proyectos sirve?
Este ejercicio es directamente facturable. Una vez que tienes la plantilla armada puedes reutilizarla cambiando nombre, edad, fecha, lugar, colores y música en minutos. También funciona para XV años con un diseño más elegante, baby showers, fiestas de graduación o cualquier evento donde el cliente quiera algo memorable.
¿Cómo está estructurado en Divi 5?
Aquí es donde el ejercicio se pone interesante, porque aprovechamos al máximo cómo funciona Divi 5 con Flexbox.
El contenido de la invitación lo construimos con módulos nativos: imagen del sombrero de fiesta, textos, el nombre del cumpleañero y las tarjetas de información. Pero en Divi 5 trabajamos con secciones y filas flex, lo que nos permite alinear y distribuir los módulos de forma mucho más precisa que en versiones anteriores. Aprenderás a usar grupos en Divi 5 para agrupar módulos relacionados — como los tres iconos decorativos o las tres tarjetas de fecha, hora y lugar — y controlar su comportamiento como una unidad dentro del flujo flex de la fila.
La cortina vive en una segunda sección con position: fixed, encima de todo el contenido. Cada panel es una fila independiente con su imagen de fondo configurada desde el builder de Divi, y el botón de play es otra fila centrada sobre los dos paneles. Sin salir del builder para nada de esto.
Lo que aprendes en el camino
Más allá del resultado visual, este tutorial trabaja conceptos que vas a reutilizar en muchos otros proyectos:
Cómo estructurar una página en Divi 5 usando secciones y filas flex para tener control real sobre el layout. Cómo usar grupos de Divi 5 para meter varios módulos dentro de un contenedor y manejarlos juntos. Cómo aplicar un gradiente de color al texto en Divi con un par de líneas de CSS, incluyendo por qué los prefijos -webkit- siguen siendo necesarios aunque parezcan cosa del pasado. Cómo usar position: fixed en una sección de Divi para crear una cortina que vive por encima del contenido. Cómo controlar el z-index desde JavaScript para que la cortina baje en el momento exacto y el contenido aparezca de forma fluida. Y cómo construir un modal de confirmación que abre WhatsApp con el mensaje ya escrito usando la API de wa.me.
0 comentarios