Diseñar un menú de navegación personalizado con Divi puede convertirse en una de esas tareas que toman más tiempo del que deberían.
Cuando queremos salir del típico menú tradicional y crear algo más elaborado —dropdowns personalizados, varios niveles, navegación móvil diferente, botones, buscadores, carrito o simplemente un diseño más original— normalmente tenemos que combinar módulos, contenedores, ajustes responsive, CSS y JavaScript.
Se puede hacer, pero puede resultar tedioso y además existen ciertas limitaciones dependiendo del diseño que queremos conseguir.
Y precisamente ahora que la inteligencia artificial nos permite generar interfaces completas en cuestión de minutos, creo que también está cambiando la forma en la que diseñamos sitios web.
En lugar de construir cada elemento visualmente desde cero, ahora podemos simplemente describir lo que queremos:
“Crea un header moderno para una tienda online con logo, menú de navegación con submenús, buscador, carrito, acceso a la cuenta del usuario y versión móvil.”
En pocos segundos podemos tener una propuesta completa en HTML, CSS y JavaScript.
El problema es que cuando llevamos ese código a WordPress, los enlaces y submenús normalmente siguen estando escritos directamente dentro del HTML.
Y ahí es donde entra OV AI Menu. 🚀
Una nueva forma de crear menús con Divi 5
OV AI Menu nace precisamente para combinar estas dos formas de trabajar.
Por un lado tenemos la velocidad y libertad de diseño que nos ofrece la inteligencia artificial.
Por otro, tenemos toda la estructura y capacidad de administración que ya nos ofrece WordPress.
Con OV AI Menu podemos crear nuestro header o navegación utilizando IA, insertar el HTML, CSS y JavaScript dentro de nuestro diseño en Divi 5 y después convertir esa navegación estática en un menú dinámico administrado desde WordPress.
De esta manera no tenemos que construir manualmente cada parte del menú utilizando el constructor visual, pero tampoco tenemos que renunciar a la facilidad de poder administrar posteriormente nuestros enlaces desde WordPress.
Diseñamos con IA y administramos con WordPress.
De un diseño generado con IA a un menú real de WordPress
El proceso es bastante sencillo.
Podemos comenzar pidiéndole a ChatGPT, Claude o nuestra IA favorita que genere el tipo de menú que necesitamos.
Puede ser un menú corporativo sencillo, un header moderno, una navegación con dropdowns, varios niveles de submenús o incluso un header completo para una tienda online.
Después podemos llevar ese código a Divi 5 y utilizar OV AI Menu para conectar la navegación del diseño con un menú real de WordPress.
Así, si mañana queremos cambiar “Servicios”, agregar una nueva página o reorganizar un submenú, podemos hacerlo desde WordPress sin tener que volver a modificar el HTML generado originalmente.
Además, OV AI Menu busca conservar la estructura, clases y diseño del código original para que podamos mantener la apariencia creada por la IA.
Menús simples, dropdowns y múltiples niveles
Una de las cosas que más me interesaba al desarrollar OV AI Menu era que no estuviera limitado únicamente a estructuras sencillas.
La IA puede generar prácticamente cualquier tipo de navegación, por lo que el plugin también debe ser capaz de trabajar con estructuras más avanzadas.
Durante el tutorial veremos diferentes ejemplos con dropdowns, submenús y múltiples niveles de profundidad, además de comprobar cómo se comportan tanto en escritorio como en dispositivos móviles.
Esto nos permite experimentar mucho más con nuestros diseños sin tener que pensar desde el principio en cómo construir cada detalle dentro de Divi.
También podemos crear headers para WooCommerce 🛒
Aquí es donde las posibilidades se vuelven todavía más interesantes.
Podemos pedirle a la IA que genere un header pensado específicamente para una tienda online, incluyendo elementos como buscador, cuenta del usuario, carrito o navegación por categorías.
OV AI Menu puede convertir varios de esos elementos estáticos en información y funcionalidades reales de WooCommerce.
Por ejemplo, podemos trabajar con Mi cuenta, el carrito y su contador de productos, e incluso utilizar categorías reales de WooCommerce dentro de determinados diseños.
La idea es que esos elementos no sean simplemente parte de una maqueta bonita creada por IA, sino que puedan formar parte de una tienda real.
La forma de diseñar sitios web está cambiando
Creo que esta es una de las partes más interesantes de todo este proceso.
Durante años hemos utilizado constructores visuales como Divi para crear una página agregando módulos, columnas, secciones y configurando cada elemento desde una interfaz.
Eso sigue siendo muy útil y Divi continúa siendo una parte fundamental del flujo de trabajo.
Pero la IA está introduciendo otra manera de construir.
Ahora podemos describir una interfaz, generar el código, probar diferentes propuestas y realizar cambios simplemente escribiendo lo que queremos.
OV AI Menu busca aprovechar precisamente esa nueva forma de trabajar dentro de Divi 5.
No pretende reemplazar a Divi ni a WordPress. Al contrario: utiliza la IA para acelerar la parte de creación y aprovecha WordPress para resolver la parte dinámica y de administración.
En lugar de pasar mucho tiempo construyendo manualmente un menú complejo, podemos dedicar ese tiempo a experimentar, probar ideas y encontrar mejores soluciones.
En este tutorial aprenderás a:
- Crear headers y menús de navegación utilizando inteligencia artificial.
- Utilizar IA para acelerar el proceso de diseño en Divi 5.
- Integrar HTML, CSS y JavaScript generado por IA.
- Convertir una navegación estática en un menú dinámico de WordPress.
- Administrar posteriormente los enlaces directamente desde WordPress.
- Trabajar con dropdowns y submenús de varios niveles.
- Mantener diseños diferentes y funcionales en escritorio y móvil.
- Crear headers más avanzados para WooCommerce.
- Utilizar elementos dinámicos como Mi cuenta, carrito y categorías de productos.
Para mí, OV AI Menu no es solamente otra forma de crear un menú en Divi. Es un pequeño ejemplo de hacia dónde está cambiando nuestra manera de diseñar sitios web:
En lugar de construir todo elemento por elemento, cada vez más vamos a describir lo que queremos, dejar que la IA nos ayude a crearlo y utilizar herramientas como Divi y WordPress para convertirlo en un sitio web real y administrable.
0 comentarios