Hay un tipo de hero section que últimamente aparece en los sitios más llamativos: personajes o productos que se presentan en carrusel con profundidad, fondo de color animado, texto gigante de fondo y transiciones suaves que hacen que el visitante se quede. Se ve complejo de replicar, pero combinando secciones y elementos nativos de Divi con un poco de código es posible construirlo desde cero — y el resultado es un componente profesional que puedes reutilizar en proyectos de clientes.
En este tutorial construimos desde cero un hero carousel completo, combinando la estructura nativa de Divi con código propio, y con un resultado reutilizable para tus proyectos de clientes. El ejercicio está hecho en Divi 5 pero funciona exactamente igual en Divi 4.
¿Qué vas a construir?
Un hero section de pantalla completa con slides que rotan mostrando un elemento central grande y dos elementos laterales en perspectiva con efecto de desenfoque. Cada slide tiene su propio color de fondo, texto de fondo y descripción — todo animado con transiciones suaves. La navegación funciona con botones, flechas del teclado, arrastre con mouse y swipe en móvil.
En el tutorial usamos ilustraciones de personajes, pero el carrusel funciona con cualquier tipo de imagen que tenga fondo transparente: botellas, zapatos, productos cosméticos, figuras, ropa — lo que mejor se adapte al proyecto de tu cliente.
¿Qué cubre el tutorial?
Armar la sección en Divi — cómo configurar la sección, la fila y los módulos necesarios para que el componente quede bien integrado en tu página sin afectar el resto del diseño.
Copiar y pegar el código correctamente — el tutorial viene con tres bloques de código listos. Te explico dónde va cada uno, en qué módulo lo pegas y en qué orden para que todo funcione a la primera.
Personalizar los slides — cómo cambiar las imágenes, los colores de fondo, los textos y los enlaces de cada slide desde un solo lugar en el código, sin necesidad de tocar nada más.
Agregar o quitar slides — el carrusel se adapta automáticamente. Si quieres 3, 5 o 6 slides en lugar de 4, solo agregas o quitas un bloque en la lista y listo.
Cargar las fuentes correctamente — cómo asegurarte de que las tipografías que usa el componente estén disponibles en tu sitio a través de las opciones de Divi, sin depender de código externo.
Lo que necesitas
- Divi 4 o Divi 5 instalado
- Las imágenes o renders de los productos que quieras mostrar, con fondo transparente
No necesitas saber programar. El tutorial está pensado para usuarios de Divi que quieren resultados profesionales siguiendo pasos claros.
El tutorial completo con video, código y demo está disponible para suscriptores de la Academia OV DIVI.
0 comentarios