¿Te imaginas describir la página que tienes en mente y verla aparecer en Divi 5, lista para editar? Eso es justo lo que te quiero enseñar hoy. Con Claude y la OV DIVI Skill ahora podemos crear sitios web completos usando módulos nativos de Divi: secciones, textos, botones, sliders y efectos que abres en el Visual Builder y modificas como si los hubieras construido tú mismo.
En este nuevo tutorial, que forma parte de los Tutoriales Exclusivos de mi Academia OV DIVI, te comparto mi secreto: cómo crear una landing page avanzada en Divi 5 con Claude y la OV DIVI Skill, con efectos que impresionan y, lo mejor, 100% editable en el Visual Builder.
Crear sitios así en Divi nunca fue sencillo
Si llevas tiempo trabajando con Divi, sabes que un sitio con animaciones, carruseles y efectos modernos no se arma en una tarde. Divi tiene su propia forma de construir: secciones, filas, columnas y módulos, cada uno con sus ajustes de diseño, sus breakpoints y sus reglas. Llevar a esa estructura un diseño moderno, con librerías de JavaScript y CSS personalizado, requería mucho tiempo, mucha prueba y error y, muchas veces, terminar pegando código en un módulo.
Divi 5 y la inteligencia artificial lo están cambiando todo
Con la llegada de Divi 5 y de la inteligencia artificial, la forma de hacer sitios web está cambiando. Hoy herramientas como Claude o ChatGPT pueden diseñar y programar una página web por nosotros en minutos.
Pero había un problema: lo que la IA te entregaba era HTML, CSS y JavaScript, no una página de Divi. Lograr que Claude diseñara directamente con la estructura de Divi, con módulos nativos y editables, era lo realmente complicado. Ya existen algunas skills que intentan convertir sitios en HTML a Divi, pero se quedan en páginas sencillas y, en cuanto aparece un efecto avanzado, el resultado se rompe o se convierte en un bloque de código.
Así nació la OV DIVI Skill
Durante semanas entrené y probé la OV DIVI Skill sitio tras sitio, módulo por módulo, hasta lograr un resultado que de verdad me hiciera sentir orgulloso. Le enseña a Claude a pensar como un diseñador de Divi: en lugar de entregarte código, construye tu página con módulos nativos de Divi 5, igual que si la hubieras hecho tú.
Y aquí está el gran plus: no solo funciona para sitios básicos. La OV DIVI Skill está preparada para sitios avanzados y es compatible con las librerías que hacen que una web se sienta de otro nivel:
- GSAP con ScrollTrigger, SplitText y ScrambleText: animaciones al hacer scroll, textos que se revelan y letras que se descifran.
- Swiper: carruseles y sliders modernos.
- Three.js: fondos 3D con partículas, ondas, esferas o tus propios modelos .glb.
- Lenis: scroll suave.
- Vanilla Tilt: tarjetas con inclinación 3D y reflejo de luz.
- Typed.js: textos que se escriben y se borran solos.
- Lottie: animaciones con el módulo nativo de Divi 5.
Además, incluye efectos como parallax, cintas infinitas (marquee), contadores animados, tarjetas que se apilan, scroll horizontal, cursor personalizado, botones magnéticos, video que avanza con el scroll y secuencias de imágenes. Sinceramente, no conozco otra skill en el mercado que llegue a este nivel con módulos nativos, y estoy seguro de que te va a sorprender incluso frente a lo que está por llegar, como el Divi MCP.
Todo lo que la OV DIVI Skill hace por ti
- Módulos nativos de Divi 5: nada de shortcodes ni plugins extra. Todo se edita desde el Visual Builder.
- Convierte cualquier diseño: páginas en HTML, CSS y JS, sitios de varias páginas e incluso webs creadas con Higgsfield.
- Dos formas de trabajar: te entrega un archivo JSON listo para importar o, si conectas Claude con tu WordPress, instala las páginas directamente en tu sitio.
- Theme Builder listo: cabecera y pie incluidos, con menú móvil a todo el ancho, hamburguesa que cambia a X y submenús plegables.
- Colores y fuentes globales: cambias tu paleta en un solo lugar y se actualiza todo el sitio.
- Responsive de verdad: cada página se revisa en escritorio, tablet y móvil.
- Módulos de WordPress con el estilo de tu sitio: login, comentarios, barra lateral, búsqueda, formularios y suscripción, todos con tus colores y tipografías.
- Blog y contenido dinámico: listados de entradas con paginación y filtros por categoría, etiqueta, búsqueda u orden.
- Interacciones nativas de Divi 5: mostrar y ocultar elementos al hacer clic, menús desplegables, avisos que aparecen una sola vez, desplazamiento a una sección y elementos que siguen al ratón.
- Lista para WooCommerce: productos, carrito y páginas de tienda con módulos nativos.
- Perfecta para clientes: tú diseñas en minutos y tu cliente sigue editando en el Divi que ya conoce.
¿Qué haremos en el tutorial?
En el ejercicio te llevo de la mano, paso a paso. Primero creamos con Claude un sitio web avanzado en HTML, CSS y JavaScript, con animaciones, carruseles y efectos modernos. Después, con Claude y la OV DIVI Skill, lo convertimos a módulos nativos de Divi 5 y lo dejamos funcionando en WordPress, listo para editar.
¿Qué aprenderás?
- Instalar la OV DIVI Skill en Claude paso a paso.
- Diseñar un sitio avanzado con Claude en HTML, CSS y JS, y ajustarlo antes de pasarlo a Divi.
- Convertirlo a Divi 5 con módulos nativos, cabecera y pie en el Theme Builder.
- Importarlo en tu sitio y revisarlo en escritorio, tablet y móvil.
- Editar todo desde el Visual Builder, como cualquier otra página.
Tu creatividad sigue al mando
Claude no reemplaza tu criterio. Tú decides la marca, los colores, el estilo y cada ajuste. Puedes partir de una idea rápida o compartirle a Claude el manual de marca de tu cliente, su logotipo y sus tipografías para que el sitio vaya acorde a su identidad. Lo que antes te tomaba días, ahora es el punto de partida.
Y esto apenas comienza 🚀
En el próximo tutorial llevaremos esta misma landing mucho más lejos: conectaremos Claude directamente con WordPress para convertirla en un sitio completo, con varias páginas, blog y tienda WooCommerce con carrito.
¿Cómo acceder al tutorial?
Este tutorial forma parte de los Tutoriales Exclusivos de mi Academia OV DIVI, así que está disponible solo para suscriptores activos. Ahí encontrarás el video completo y podrás descargar la OV DIVI Skill.
👉 Ver tutorial y descargar la skill
👉 Únete a los Tutoriales Exclusivos de la Academia OV DIVI
Espero que este tutorial te ayude a crear sitios que te enamoren a ti y a tus clientes tanto como a mí.
¡Nos vemos en el tutorial! 🚀
0 comentarios