Llevo un tiempo construyendo páginas completas con Divi, HTML, CSS y JavaScript. Hoy, con herramientas como Claude, ChatGPT o Gemini, podemos acelerar ese trabajo considerablemente. Si tienes conocimientos de HTML, CSS y JS puedes agregar funciones más avanzadas a tus sitios creados con Divi — pero esto tiene su proceso: necesitas saber qué código copiar, dónde pegarlo y cómo hacerlo funcionar sin romper nada.
Y luego está el paso de llevarlo a Divi manualmente. Módulo Code, sección por sección, reorganizando, separando el CSS global del HTML de cada bloque. Funciona, pero toma tiempo y requiere que sepas exactamente lo que estás haciendo.
Por eso creé OV Divi Fragment: una herramienta que hace ese trabajo por ti.
De ChatGPT o Claude a Divi 5 en segundos
Si usas IA para generar código — ya sea con Claude, ChatGPT, Gemini o cualquier otra herramienta — sabes que el resultado suele ser un archivo HTML completo con su CSS y su JavaScript todo junto. Está bien construido, se ve bien en el navegador, pero llevarlo a Divi siempre implica el mismo proceso manual: separar el CSS, identificar las secciones, crear los módulos Code uno por uno.
OV Divi Fragment elimina ese paso intermedio. Pegas el HTML que te generó la IA, presionas un botón y obtienes un JSON listo para importar en Divi 5.
Y no solo funciona con HTML generado por IA. Si encontraste una plantilla, un snippet o una sección en cualquier otro lado, el proceso es exactamente el mismo.
¿Qué es OV Divi Fragment?
Es un generador web disponible exclusivamente para suscriptores activos de los Tutoriales Exclusivos OV Divi de la Academia OV DIVI. Su función es simple pero poderosa: tomas un archivo HTML completo —o una sección individual— lo pegas en el generador, y la herramienta lo fragmenta automáticamente en secciones de Divi 5, cada una dentro de su propio módulo Code, con el CSS y el JS ya distribuidos donde corresponden.
El resultado es un archivo .json que importas directamente en Divi 5 desde los Ajustes de la página. Listo.
No necesitas reorganizar nada a mano. No necesitas copiar y pegar bloque por bloque. El generador lo hace en segundos.
¿Cómo funciona?
El proceso tiene cuatro pasos:
- Pegas tu HTML completo — puede ser una página entera generada con Claude o ChatGPT, o una sección específica que quieras incorporar a un diseño existente.
- Defines un prefijo opcional — si quieres renombrar clases e IDs automáticamente para evitar conflictos con otros estilos del sitio, escribes un prefijo (por ejemplo ov o el que prefieras).
- Presionas «Generar secciones» — el generador detecta automáticamente el header, las secciones, el footer, el CSS global y los scripts JS. Puedes activar o desactivar cada sección con un toggle antes de exportar.
- Descargas el JSON e importas en Divi 5 — vas a Ajustes de la página → Importar, seleccionas el .json y listo. Con la opción Add to Existing Content puedes añadir secciones sin borrar lo que ya tienes.
También hay una opción «CSS en módulo Code» que, cuando la activas, incluye el CSS global de la página dentro de un módulo Code dedicado en lugar de colocarlo en los Ajustes de la página / Avanzado / CSS personalizado. Útil dependiendo de cómo quieras estructurar el proyecto.
¿Para qué sirve esto en la práctica?
En el tutorial que acabo de publicar en la Academia muestro varios casos de uso reales:
- Página completa generada con IA: creas una landing entera con Claude o ChatGPT (con carrusel de testimonios, popup de médicos, secciones con GSAP), pegas el HTML, generas el JSON y lo importas en Divi con todos los módulos ya organizados.
- Secciones individuales: necesitas agregar una sección de servicios o un portafolio con filtros interactivos a una página que ya existe en Divi. Generas solo esa sección en HTML, la conviertes y la importas sin tocar el resto del diseño.
- Híbrido con diseños nativos de Divi: tienes un layout de Divi y quieres convertir una sección estática en algo dinámico — con modal, carrusel o animaciones. Describes la sección a la IA, generas el HTML con el comportamiento que necesitas, y la integras junto a los módulos nativos de Divi.
¿Necesitas saber programar para usarlo?
No es indispensable. Si tienes conocimientos básicos-intermedios, seguramente ya sabrías copiar y pegar el HTML manualmente en las secciones correspondientes de Divi — y puedes seguir haciéndolo así si lo prefieres. La herramienta no reemplaza ese conocimiento, lo acelera. Hace en segundos lo que tomaría varios minutos a mano, y elimina errores de estructura que son fáciles de cometer cuando separas el código manualmente.
Lo que viene
OV Divi Fragment está en su versión 1.1.0 y va a seguir evolucionando. La hoja de ruta tiene un objetivo claro: que el generador pueda mapear los módulos nativos de Divi y traducir el HTML directamente a la estructura JSON que Divi espera — sin necesidad de módulos Code. Eso significaría que un texto se convierte en un módulo Divi Text, una imagen en un módulo Divi Image, y así.
Cuando lleguemos ahí, el HTML quedará reservado para las composiciones más avanzadas — las cosas que los módulos nativos de Divi no pueden hacer por sí solos. Por ahora, el generador ya cubre el 80% de los casos de uso que me encuentro a diario.
¿Dónde está el tutorial y cómo accedo al generador?
El tutorial está disponible tanto en los Tutoriales Exclusivos OV Divi de la Academia como en el canal de YouTube de OV Divi.
La versión de la Academia incluye además los prompts listos para copiar y pegar, y los archivos HTML de ejemplo generados con cada prompt — para que puedas seguir el tutorial paso a paso sin tener que generar nada desde cero.
Y si eres suscriptor activo, también tienes acceso ilimitado al generador.
Puedes unirte al plan de Tutoriales Exclusivos aquí.
0 comentarios