🆕 Actualizado a la versión 2.0 — Ahora con contenido dinámico para WordPress, ACF y WooCommerce, soporte para variables CSS, estados Hover, embeds y muchas mejoras más.
Hace unas semanas publiqué la primera versión (leer post) de OV Code Block, un módulo para Divi 5 que nació con un objetivo muy claro: permitirte insertar código HTML, CSS y JavaScript generado por herramientas de Inteligencia Artificial y seguir editándolo de forma visual dentro de Divi.
La respuesta de la comunidad fue increíble. Muchos comenzaron a utilizar ChatGPT, Claude, Gemini, Bolt o Lovable para generar secciones completas y pegarlas dentro de Divi en cuestión de segundos.
Gracias a todas las sugerencias recibidas durante estas semanas, hoy me alegra presentar OV Code Block 2.0, una actualización que convierte este módulo en una herramienta mucho más potente, flexible y preparada para crear sitios web modernos utilizando HTML generado por IA.
¿Qué es OV Code Block?
OV Code Block es un módulo para Divi 5 que permite insertar código HTML, CSS y JavaScript directamente dentro del Visual Builder.
Pero no se limita únicamente a mostrar el código.
El plugin analiza automáticamente la estructura HTML y convierte muchos de sus elementos en contenido completamente editable desde una interfaz visual.
Esto significa que puedes generar una sección con ChatGPT, Claude, Gemini o cualquier otra IA, pegar el código dentro de Divi y editar posteriormente:
- Textos
- Imágenes
- Fondos
- Botones
- Enlaces
- Colores
- Variables CSS
- Estados Hover
- Videos
- Embeds
- Google Maps
Todo ello sin volver a modificar el código HTML.
Novedades de OV Code Block 2.0
Después de varias semanas de desarrollo, esta nueva versión incorpora una enorme cantidad de mejoras.
Editor visual mucho más inteligente
El inspector ahora detecta automáticamente una mayor cantidad de elementos HTML.
Entre ellos:
- Encabezados
- Párrafos
- Span
- Strong
- Small
- Imágenes
- Fondos
- Botones
- Enlaces
- SVG
- Videos
- Iframes
- Variables CSS
- Estados Hover
Además, el sistema es capaz de mantener correctamente estructuras HTML más complejas sin romper el diseño.
Contenido dinámico para WordPress
Una de las funciones más solicitadas por la comunidad.
Ahora cualquier texto, imagen, enlace o fondo puede convertirse en contenido dinámico utilizando los campos nativos de WordPress.
Esto permite crear plantillas completamente administrables utilizando únicamente HTML.
Compatible con Advanced Custom Fields (ACF)
OV Code Block también permite trabajar con campos de Advanced Custom Fields.
Entre los tipos de campos compatibles se encuentran:
- Texto
- Textarea
- Editor WYSIWYG
- Imagen
- URL
- Color
- Archivo
- Embed de video
- Imagen de fondo
De esta forma puedes construir páginas completamente dinámicas utilizando únicamente HTML y administrar posteriormente el contenido desde WordPress.
Compatible con WooCommerce
La versión 2.0 incorpora compatibilidad con WooCommerce para crear plantillas de productos completamente dinámicas.
Entre los campos disponibles se encuentran:
- Imagen principal
- Galería del producto
- Categoría
- Nombre
- Precio
- Precio de oferta
- Porcentaje de descuento
- Valoración mediante estrellas
- Número de reseñas
- SKU
- Estado del stock
- Descripción corta
- Descripción larga
- Cantidad
- Agregar al carrito mediante AJAX
- Comprar ahora
Todo ello sin necesidad de utilizar funciones PHP dentro del HTML.
Variables CSS
Ahora puedes trabajar con variables CSS utilizando :root.
Esto permite controlar todos los colores principales de una sección desde un único lugar, facilitando la personalización de cualquier diseño.
Estados Hover
OV Code Block ahora detecta y permite editar los estados Hover de numerosos elementos, facilitando la personalización de botones, enlaces y componentes interactivos.
Compatible con Google Maps y otros Embeds
Los contenidos embebidos también son compatibles con el editor visual.
Puedes trabajar fácilmente con:
- Google Maps
- YouTube
- Vimeo
- Spotify
- Otros iframes
¿Qué aprenderás en el nuevo tutorial?
Durante el nuevo tutorial construiremos varias secciones utilizando únicamente HTML generado por Inteligencia Artificial.
Entre ellas:
- Hero
- Servicios
- Tabla de precios
- Testimonios
- Preguntas frecuentes (FAQ)
- Google Maps con pestañas
- Contenido dinámico con ACF
- Plantillas para WooCommerce
Además compartiré los prompts utilizados para generar cada uno de estos ejemplos utilizando ChatGPT.
¿Para quién está pensado OV Code Block?
OV Code Block está pensado para cualquier usuario que trabaje con Divi 5 y utilice herramientas de Inteligencia Artificial para generar código HTML.
Si utilizas ChatGPT, Claude, Gemini, Bolt, Lovable o cualquier otra IA para crear secciones web, este módulo te permitirá integrarlas dentro de Divi sin perder la posibilidad de editarlas posteriormente desde una interfaz visual.
Tutorial completo disponible en la Academia OV DIVI
Si eres suscriptor de la Academia OV DIVI ya puedes acceder al curso completo.
Encontrarás:
- El plugin actualizado.
- Todos los ejemplos utilizados durante el tutorial.
- Los prompts completos.
- Archivos descargables.
- Recursos adicionales.
👉 Acceder al tutorial completo
Lo que viene próximamente
Aunque la versión 2.0 representa un salto enorme respecto a la versión inicial, el desarrollo continúa.
Entre las funciones que ya se encuentran en desarrollo destacan:
- Dynamic Loops.
- Plantillas para archivos del Blog.
- Plantillas para archivos de WooCommerce.
- Compatibilidad con Custom Post Types.
- Soporte para Repeater de ACF.
- Nuevos tipos de contenido dinámico.
Conclusión
OV Code Block nació como una forma sencilla de insertar HTML dentro de Divi.
Hoy, con la llegada de la versión 2.0, se ha convertido en una herramienta que conecta el trabajo generado por Inteligencia Artificial con el ecosistema de WordPress y Divi de una forma completamente visual.
Si ya utilizas IA para diseñar sitios web, estoy convencido de que este plugin se convertirá en una de las herramientas más útiles dentro de tu flujo de trabajo.
Espero que disfrutes esta nueva versión tanto como yo disfruté desarrollándola. Como siempre, seguiré escuchando las sugerencias de la comunidad para continuar mejorando OV Code Block en futuras actualizaciones.
0 comentarios