La semana pasada les compartí una de las novedades más importantes de OV Divi Fragment: su nueva compatibilidad con OV Code Block 2.0.
Gracias a esta integración, ahora es posible tomar una página web generada con ChatGPT, Claude o cualquier otra IA, convertirla en un archivo JSON e importarla directamente en Divi 5, manteniendo la posibilidad de editar el HTML, CSS y JavaScript de forma completamente visual.
Muchos me preguntaron cómo era exactamente el proceso, así que en este nuevo tutorial exclusivo para suscriptores veremos todo el flujo de trabajo paso a paso.
¿Qué aprenderás?
En este tutorial te enseñaré cómo aprovechar la nueva versión de OV Divi Fragment para exportar tus proyectos en formato OV Code Block, creando un flujo de trabajo increíblemente rápido para desarrollar páginas web con inteligencia artificial.
El proceso completo es el siguiente:
- Genera tu página con ChatGPT, Claude o tu IA favorita.
- Descarga el archivo HTML generado.
- Ábrelo en OV Divi Fragment.
- Selecciona OV Code Block como modo de exportación.
- Exporta el archivo JSON e impórtalo en Divi 5.
¡Y listo!
En cuestión de minutos tendrás una página completamente integrada en Divi y podrás modificar textos, imágenes, colores, enlaces, HTML, CSS y JavaScript directamente desde el Constructor Visual gracias a OV Code Block.
Dos herramientas que trabajan juntas
Aunque OV Divi Fragment y OV Code Block pueden utilizarse por separado, es cuando se combinan que realmente muestran todo su potencial.
OV Divi Fragment se encarga de analizar el HTML, CSS y JavaScript generado por la IA, fragmentarlo automáticamente y convertirlo en un archivo JSON compatible con Divi.
Por su parte, OV Code Block transforma ese código en un módulo totalmente editable desde el Constructor Visual, permitiéndote modificar gran parte del contenido sin necesidad de volver a tocar el código fuente.
El resultado es un flujo de trabajo que reduce drásticamente el tiempo de desarrollo y te permite concentrarte en lo más importante: crear.
¿Aún no conoces estas herramientas?
Si todavía no has visto las publicaciones donde explico cada plugin con más detalle, te recomiendo comenzar por ellas.
OV Divi Fragment
En este artículo descubrirás cómo fragmentar una página HTML completa y convertirla en un archivo JSON listo para importar en Divi.
OV Code Block 2.0
Aquí encontrarás todas las novedades de la versión 2.0 y cómo editar visualmente el HTML, CSS y JavaScript generado por IA dentro de Divi 5.
Tutorial exclusivo para suscriptores
Este tutorial forma parte de los Tutoriales Exclusivos de OV Divi y está disponible únicamente para los miembros de la plataforma.
Si ya eres suscriptor, acompáñame en este nuevo video donde veremos todo el proceso desde cero. Aprenderás a generar una página con IA, convertirla con OV Divi Fragment, exportarla en formato OV Code Block e importarla en Divi 5 para editarla visualmente sin necesidad de tocar el código.
Estoy convencido de que este nuevo flujo de trabajo marcará un antes y un después en la forma de desarrollar páginas con Divi. Ahora puedes aprovechar todo el potencial de herramientas como ChatGPT o Claude sin renunciar a la comodidad del Constructor Visual de Divi.
¡Nos vemos dentro del tutorial!
Cordia saludo Oscar. Administro una pagina web de una comunidad religiosa, tengo algo de conocimientos en wordpress pero no mucho, y necesito modernizar la pagina, esto curso me ayuda a migrar imagenes y un par de videos que tengo en la página, sin tener ,mucho conocieminto?
Hola Victor, un gusto saludarte.
Este tutorial está enfocado en poder crear una página web más rápido usando IA, Divi Fragment y OV Code Block. Si quieres modernizar tu página te puede ayudar. Aunque ten en cuenta que el sitio web debe estar creado con Divi. ¿Estás usando Divi en tu WordPress?
Cordial saludo Oscar, preguntas si ¿Estás usando Divi en tu WordPress? si, el sitio usa Divi como plantilla
Genial, entonces si puedes utilizar el método que enseño en este tutorial.
Aunque debe ser la versión 5 de Divi, es decir, la versión más reciente Fernando