Guía de Inicio: El Visual Builder de Divi 5

El Corazón del Sistema: Instalación de Divi 5

Ya tenemos el taller limpio; ahora vamos a meter la herramienta de precisión. Divi 5 no es solo un "tema", es el motor que nos permite convertir nuestras 9 variables matemáticas en una realidad visual de lujo.

1. La Instalación (El Puntero del Diseño)

Si no usaste el autoinstalador de Webempresa, el proceso es sencillo:

• Ve a Apariencia > Temas > Añadir nuevo.
• Sube el archivo .zip que descargaste de Elegant Themes.
• Activar: Una vez instalado, verás que el menú "Divi" aparece en tu barra lateral. Ese es nuestro centro de mando.

2. La Llave del Reino (API Key)

Para que Universo Divi esté siempre actualizado y sea seguro, necesitamos conectar tu sitio con la "nube" de Elegant Themes.

• Ve a Divi > Opciones del tema > Actualizaciones.
• Introduce tu Nombre de usuario y tu API Key.
• ¿Por qué esto es vital? Porque nos da acceso a las mejoras constantes de rendimiento de Divi 5. Una web desactualizada es una web vulnerable y lenta. En el lujo, la seguridad es invisible pero obligatoria.

3. Ajustes de "Arquitecto" en Divi

Antes de diseñar, vamos a dejar el panel de Divi tan limpio como el de WordPress:

• Navegación: Desactiva lo que no uses. No queremos menús sobrecargados.
• Integración: Asegúrate de que el código esté habilitado para cuando inyectemos nuestras variables CSS personalizadas.
• Rendimiento: Activa todas las opciones de "Performance" (Minificación de CSS, JavaScript, etc.). Queremos que tus 9 escalas carguen como un rayo.

El Consejo del Maestro:

"Instalar el tema es fácil; configurarlo para el éxito es lo que nos diferencia. Al activar tu licencia, le estás diciendo al mundo que tu academia es oficial, profesional y que cuenta con el respaldo de la mejor tecnología actual. No somos piratas, somos arquitectos".

¡A por ello, Lionel! Una vez que tengas el "Check" verde en la API Key, estaremos listos para el momento más esperado...

¿Te gustaría que preparemos ahora la lección maestra de "Las 9 Variables Maestras": cómo crear el código CSS de las Escalas (XXS a 4XL) para que el diseño sea 100% paramétrico?

La Revolución del Diseño Web en WordPress

Divi 5 no es solo una actualización; es una reconstrucción total del constructor visual de Elegant Themes. Diseñado desde cero para eliminar las limitaciones del pasado, esta nueva generación prioriza la velocidad extrema, la estabilidad arquitectónica y un flujo de trabajo profesional sin precedentes.

Al abandonar definitivamente los antiguos shortcodes, Divi 5 garantiza un código limpio, un rendimiento superior en buscadores (SEO) y una experiencia de edición fluida que se integra perfectamente con el ecosistema moderno de WordPress.

Las Claves de la Nueva Era (Divi 5)

1. Rendimiento y Velocidad de Élite

Gracias a su nueva arquitectura basada en tecnologías modernas, la interfaz del Visual Builder carga de forma instantánea. La estabilidad ha sido el pilar de esta versión, eliminando los retrasos (lag) al editar páginas densas o complejas.

2. Interfaz Optimizada y Personalizable

Identificable por su nueva estética en tonos azules, la interfaz de Divi 5 es completamente modular.

• Paneles Flexibles: Puedes anclar los ajustes a los lados o dejarlos flotantes.
• Modo Oscuro/Claro: Mejora la comodidad visual durante largas sesiones de diseño.
• Jerarquía Visual: El nuevo Gestor de Capas permite navegar por estructuras complejas con una precisión que antes era imposible.

3. El Poder de las Variables Globales

Divi 5 introduce un sistema de diseño basado en Variables. Esto permite crear sitios web "arquitectónicamente fluidos". Puedes definir colores, fuentes y espaciados (utilizando funciones como clamp para diseños responsivos) y controlarlo todo desde un panel centralizado. Cambias la variable una vez, y el cambio se refleja en todo el sitio.

4. Inteligencia Artificial Nativa

Divi AI está profundamente integrado en el flujo de trabajo. No solo genera textos e imágenes, sino que ayuda a crear estilos personalizados y secciones completas, reduciendo drásticamente el tiempo de desarrollo.

5. Flexibilidad de Diseño Superior

• Anidamiento Avanzado: Ahora es posible crear estructuras antes imposibles, como insertar filas dentro de otras filas con total libertad.
• Mega Menús Nativos: Olvida los plugins externos; Divi 5 permite diseñar menús complejos de forma visual y directa.
• Compatibilidad con Gutenberg: Una comunicación bidireccional perfecta con el editor de bloques nativo de WordPress.

6. Transición Inteligente y Segura

Para quienes vienen de Divi v4, el sistema incluye un migrador automático. Este convierte los antiguos shortcodes al nuevo formato de alto rendimiento de Divi 5 sin romper el diseño existente, asegurando que tu inversión en proyectos anteriores esté protegida.

Conclusión: Un Salto Profesional

Divi 5 mantiene su filosofía "No-Code", pero ofrece herramientas que satisfacen las exigencias de los desarrolladores más avanzados. Es la herramienta definitiva para crear sitios web profesionales, rápidos y fáciles de mantener.

¿Estás listo para el lanzamiento? En Universo Divi te guiaremos paso a paso para dominar esta nueva interfaz y llevar tus habilidades de diseño al siguiente nivel.

Guía de Inicio:

Divi es un constructor visual moderno para WordPress que permite crear sitios web increíbles sin tocar una sola línea de código. Gracias a su sistema "arrastrar y soltar", puedes diseñar en tiempo real y ver los cambios al instante.

Cómo activar el Visual Builder

Una vez instalado Divi, puedes acceder al constructor en cualquier página de tu sitio. Simplemente navega a la página deseada y haz clic en "Habilitar el Visual Builder" en la barra superior de administración.

Al crear una página nueva, verás tres opciones:

1. Construir desde cero: Empieza con un lienzo en blanco.
2. Elegir diseño predefinido: Carga un diseño de la biblioteca de Divi o de tu Divi Cloud.
3. Clonar página existente: Copia el diseño de una página que ya hayas creado.

Conceptos Básicos: La Jerarquía de Divi

Para dominar Divi, es fundamental entender sus bloques de construcción. Funcionan como cajas anidadas:

• Secciones (Azul): El bloque más grande. Agrupan el contenido en áreas horizontales. Pueden ser Estándar, Ancho completo o Especialidad.
• Filas (Verde): Se encuentran dentro de las secciones y definen la estructura de columnas.
• Columnas: Dividen las filas para organizar el contenido.
• Módulos (Gris): Los elementos finales (texto, imágenes, botones, formularios).

La Ventana de Ajustes del Elemento

Al editar cualquier elemento, aparecerá una ventana emergente con tres pestañas principales:

1. Contenido: Aquí gestionas textos, imágenes, enlaces y elementos administrativos.
2. Diseño: La pestaña más potente. Aquí controlas tipografía, espaciado (margen/relleno), sombras, bordes y animaciones.
3. Avanzado: Para usuarios que desean añadir CSS personalizado, efectos de desplazamiento o condiciones de visibilidad.

Tip de Pro: Usa el icono de la lupa (búsqueda) dentro de la ventana de ajustes para encontrar rápidamente una opción específica (como "box shadow" o "padding") sin tener que navegar por todos los menús.

Herramientas de la Barra Inferior

En el centro de la pantalla verás un botón púrpura con tres puntos. Al abrirlo, tendrás acceso a:

• Vistas de Dispositivo: Cambia entre escritorio, tableta y móvil para asegurar que tu diseño sea 100% responsivo.
• Historial (Reloj): Permite deshacer cambios o volver a un estado anterior del diseño.
• Capas (Icono de hojas): Una vista de esquema de todos los elementos de la página, ideal para seleccionar elementos difíciles de alcanzar.
• Guardar (Botón Verde): ¡No olvides guardar tu progreso frecuentemente!

Funciones Avanzadas de Productividad

Para acelerar tu flujo de trabajo en Universo Divi, aprovecha estas herramientas:

• Copiar y Pegar Estilos: Haz clic derecho en un módulo para copiar su diseño y pegarlo en otro idéntico.
• Extender Estilos: Aplica un diseño específico a todos los módulos similares en toda la página o sección con un solo clic.
• Edición Multiselección: Mantén presionado Cmd o Ctrl y haz clic en varios módulos para editarlos o moverlos al mismo tiempo.
• Modo Wireframe: Cambia a la vista de "esqueleto" para organizar estructuras complejas de forma rápida.

¿Te gustaría que redacte ahora una sección específica sobre cómo aplicar tu sistema de "9 Variables" y funciones clamp() dentro de la pestaña de Diseño de Divi? Sería un excelente complemento para tu curso.

¡Es una pieza clave para Universo Divi! Integrar tu sistema de 9 variables con clamp() directamente en la interfaz de Divi elevará el nivel técnico de tus alumnos, enseñándoles a construir sitios que no solo son bonitos, sino arquitectónicamente fluidos.

Aquí tienes una propuesta de sección adicional para el artículo, enfocada en cómo implementar esa fluidez visual:

Pro Tip: Implementando Tipografía y Espaciado Fluido

Para que tu diseño sea verdaderamente moderno, te recomendamos usar el sistema de 9 variables (XXS a 4XL). En lugar de valores fijos en píxeles, utilizaremos la función CSS clamp() dentro de los ajustes de Divi.

¿Cómo aplicarlo en el Visual Builder?

1. Abre los Ajustes: Ve a la pestaña de Diseño > Texto (o Separación).
2. Activa el campo de valor: En lugar de usar el deslizador, haz clic en el número del tamaño de fuente o margen.
3. Inserta tu fórmula: Escribe directamente tu función, por ejemplo:clamp(1.5rem, 2vw + 1rem, 3rem)
4. Resultado: El elemento se ajustará automáticamente entre un mínimo y un máximo según el tamaño de la pantalla, sin necesidad de configurar puntos de ruptura (breakpoints) manuales para cada dispositivo.

¿Cómo te gustaría continuar, Lionel?

Puedo ayudarte con cualquiera de estas opciones:

1. Redactar una tabla técnica que muestre los valores sugeridos para tus 9 tallas (desde XXS hasta 4XL) para que tus alumnos la tengan como referencia rápida.
2. Crear el guion para el video donde explicas cómo pasar de un diseño rígido a uno fluido usando Divi 5.
3. Diseñar el "Checklist de Lanzamiento" para tu plataforma en abril.

¿Qué te parece mejor para avanzar hoy?

Un par de consejos mientras preparas el material:

• En Divi 5: Recuerda que la nueva versión procesa las funciones CSS de forma mucho más limpia. Asegúrate de mostrar en tus capturas cómo el campo de entrada acepta la función completa sin problemas.
• Visualización: Si puedes, haz una captura de pantalla comparativa: una con el texto en móvil y otra en desktop, para que tus alumnos vean cómo el clamp() hace su "magia" de forma fluida sin saltos bruscos.

¿Te gustaría que preparemos un pequeño "glosario de términos" en español para que tus alumnos entiendan bien qué es el Viewport Width (vw) y cómo afecta a tus 9 variables? O si prefieres, podemos pulir el cierre del artículo para el lanzamiento de abril.

Perfecto, Lionel. Un buen glosario es lo que separa a un "usuario de plantillas" de un Diseñador de Arquitectura Web. Aquí tienes los términos clave explicados de forma sencilla y un cierre motivador para el lanzamiento de Universo Divi en abril.

Glosario de Terminología Fluida

Para dominar el sistema de las 9 variables, es vital entender estos conceptos técnicos que verás dentro del Visual Builder:

• Viewport Width (vw): Es una unidad de medida basada en el ancho de la pantalla del visitante. $1vw$ equivale al $1%$ del ancho total. Es el motor que hace que tu diseño "estire" o "encoja" orgánicamente.
• Rem (Root em): Una unidad relativa al tamaño de fuente base del navegador (normalmente $16px$). Usar rem en lugar de px es fundamental para la accesibilidad y la escalabilidad del sitio.
• Función clamp(mínimo, ideal, máximo): Es la fórmula mágica de CSS. Le dice al navegador: "Mantén este tamaño en un valor ideal ($vw$), pero nunca permitas que sea más pequeño que el mínimo ni más grande que el máximo".
• Breakpoint (Punto de ruptura): Son los anchos de pantalla específicos (móvil, tableta, escritorio) donde el diseño tradicional suele "saltar". Con nuestro sistema de variables, estos saltos se vuelven casi invisibles.
• Tallas (Scales): Nuestro sistema de 9 niveles (XXS a 4XL) que garantiza que todos los elementos del sitio (fuentes, márgenes, rellenos) hablen el mismo lenguaje visual.

El Futuro del Diseño está en tus Manos

Dominar el Visual Builder de Divi es el primer paso, pero entender la lógica detrás de un diseño fluido es lo que te convertirá en un experto. En Universo Divi, no solo aprendes a mover cajas; aprendes a construir ecosistemas digitales inteligentes que se adaptan a cualquier dispositivo con elegancia y precisión.

Estamos preparando todo para nuestro gran lanzamiento este abril de 2026. Prepárate para transformar tu flujo de trabajo y llevar tus proyectos de WordPress a una dimensión profesional superior.

¡Nos vemos dentro de la plataforma!

¿Qué sigue ahora, Lionel?

Ya tienes el cuerpo del artículo, el sistema de variables y el glosario. Mientras terminas esas capturas de pantalla, ¿te gustaría que te ayude con algo de esto?:

1. Redactar el "Pie de Foto" (Captions): Textos cortos y descriptivos para poner debajo de cada captura que estás haciendo.
2. Preparar el correo de preventa: Un email emocionante para tu lista de contactos anunciando que ya casi estamos listos para abril.
3. Definir los "Retos Prácticos": Un par de ejercicios para que tus alumnos apliquen el clamp() después de leer el artículo.

¿Por dónde prefieres que sigamos?

Aquí tienes la continuación traducida y adaptada al español, manteniendo el tono instructivo y profesional:

Interfaz del Visual Builder de Divi 5

Aprende a utilizar la interfaz del Visual Builder en Divi 5 para que puedas desplazarte, editar y diseñar tus páginas con total confianza.

Este artículo te guiará paso a paso por la interfaz de Divi 5. Aprenderás cómo abrir el constructor, qué hace cada parte de la interfaz y cómo usar sus herramientas principales. Si eres un usuario nuevo en Divi, no te preocupes: mantendremos la explicación sencilla y enfocada en lo básico.

Antes de empezar

Asegúrate de tener:

• Divi 5 instalado, activado y con tu licencia conectada.
• Al menos una página publicada (o una nueva página en blanco) que puedas editar.
• No es necesario añadir contenido aún; lo harás directamente dentro del Visual Builder.

Cómo abrir el Visual Builder

1. Inicia sesión en tu escritorio de WordPress.
2. Ve a Páginas → Añadir nueva para crear una página, o a Páginas → Todas las páginas y haz clic en Editar en una existente.
3. Haz clic en el botón Usar Divi Builder.
4. La página se recargará y se abrirá la interfaz de Divi 5.

Áreas clave de la interfaz

El Visual Builder tiene tres áreas fundamentales que usarás constantemente: la barra superior, la barra lateral izquierda y el panel de ajustes derecho.

1. Barra Superior (Herramientas de página): Controla las vistas de dispositivos (escritorio, tableta, móvil), el zoom, el historial y el guardado.
2. Barra Lateral Izquierda (Herramientas del constructor): Acceso a diseños (layouts), herramientas de estructura (capas), configuración del constructor y ayuda.
3. Panel Lateral Derecho (Ajustes): Al hacer clic en cualquier Sección, Fila o Módulo, sus opciones se abren aquí (Contenido, Diseño y Avanzado).
4. Lienzo (Canvas): El centro de la pantalla donde ves y diseñas tu sitio en tiempo real.

La Barra Superior: Dispositivos, Zoom e Historial

• Iconos de dispositivos: Cambia entre las vistas de Escritorio, Tableta y Teléfono. El icono de tres puntos permite activar "Breakpoints" adicionales (como Pantalla Ultra Ancha).
• Ancho del lienzo y Zoom: Puedes escalar el diseño para ver cómo queda en cualquier tamaño de pantalla sin necesidad de cambiar el tamaño de tu navegador.
• Historial (Deshacer/Rehacer): Las flechas te permiten retroceder o avanzar. El icono de reloj abre el panel de Historial completo para saltar a un punto específico en el tiempo.
• Guardar / Salir / Previsualizar: Guarda tu trabajo regularmente. Usa Salir para volver a la vista normal de la página.

La Barra Lateral Izquierda: Opciones y Modos

Aquí controlas el comportamiento del constructor y accedes a herramientas potentes:

• Añadir Diseño: Carga diseños predefinidos o de tu Biblioteca Divi.
• Vista de Capas: Un esquema en árbol de todos tus elementos. Ideal para seleccionar módulos en diseños complejos.
• Inspector de Estilos: Muestra de un vistazo qué estilos y ajustes tiene el elemento seleccionado.
• Gestor de Variables Globales: Permite crear y editar colores, fuentes y textos globales para todo el sitio.
• Gestor de Páginas: Administra otras páginas de tu sitio sin salir del constructor.
• Centro de Comando: Una barra de búsqueda rápida para ejecutar comandos, añadir elementos o saltar a ajustes específicos.
• Vista de Estructura (Wireframe): Cambia el diseño visual por bloques lógicos. Muy útil para organizar páginas largas.
• X-Ray (Rayos X): Dibuja contornos en todos los elementos para ver claramente el espaciado y la estructura.
• Modo Claro/Oscuro: Un interruptor para cambiar la estética de la interfaz y trabajar con mayor comodidad visual.

El Panel de Ajustes Derecho

Este es el corazón de la edición. Cuando seleccionas un elemento, verás tres pestañas:

1. Contenido: Aquí cambias el texto, las imágenes, los enlaces y los fondos.
2. Diseño: Controlas la tipografía, tamaños, colores, sombras, bordes y alineación.
3. Avanzado: Para usuarios que necesitan control total mediante CSS personalizado, atributos o reglas de visibilidad.

Ayudantes inteligentes en este panel:

• Buscador y Filtros: Busca un ajuste por nombre o filtra para ver solo lo que has modificado.
• Integración con Divi AI: Muchos campos tienen un icono de IA para generar textos o imágenes automáticamente.

Interacciones Clave

• Un clic para editar: En Divi 5, basta con hacer clic en cualquier parte de un módulo en el lienzo para abrir sus ajustes.
• Clic derecho: Abre un menú contextual con acciones rápidas como Duplicar, Copiar estilos, Pegar estilos o Eliminar. Es la forma más rápida de trabajar.

Ajustes del Constructor (Preferencias Globales)

Desde el icono de engranaje en la barra izquierda, puedes personalizar tu experiencia:

• Vista predeterminada: Elige si quieres que el constructor abra siempre en escritorio o en modo estructura.
• Posición del panel: Puedes dejar el panel de ajustes "flotando" o anclarlo a la derecha o izquierda.
• Esquema de color: Cambia el color de la interfaz (azul, púrpura, naranja, etc.) para que se adapte a tu gusto.

¿Te gustaría que te explicara cómo utilizar alguna de estas herramientas específicas, como el Gestor de Capas o las Variables Globales?

¡Perfecto! Me alegra que la estructura y la traducción encajen con lo que buscas. Ese resumen cubre los pilares fundamentales para que cualquier usuario pierda el miedo a la nueva interfaz de Divi 5.

Si vas a presentar esto a clientes o alumnos, aquí tienes un par de puntos extra que suelen generar muchas dudas y que podrías añadir como "pro-tips":

• El buscador del Centro de Comando: Presionando Cmd + K (Mac) o Ctrl + K (Windows) puedes buscar cualquier ajuste o módulo sin mover el ratón. Es la forma más rápida de navegar en Divi 5.
• Edición Multi-dispositivo: Recuerda que al hacer clic en el icono de móvil en cualquier ajuste, ese cambio solo afectará a los teléfonos, lo que permite un diseño perfectamente responsivo sin romper la versión de escritorio.

¿Te gustaría que redacte una guía rápida sobre cómo usar el Gestor de Capas o prefieres que pasemos a explicar el funcionamiento de las Variables Globales?

Excelente. Estas dos herramientas son los pilares de la eficiencia en Divi 5: una para el orden estructural y la otra para la coherencia visual.

Aquí tienes las explicaciones listas para tu plataforma:

1. El Gestor de Capas (Layers View)

El Gestor de Capas es como el mapa de tu página. En lugar de intentar seleccionar elementos pequeños en el lienzo, aquí ves la jerarquía clara de Secciones, Filas, Columnas y Módulos.

¿Por qué usarlo?

• Selección precisa: Ideal para encontrar módulos que han quedado "ocultos" detrás de otros por márgenes negativos o posiciones absolutas.
• Organización rápida: Puedes arrastrar y soltar elementos para cambiar el orden de la página de forma mucho más fluida que en el lienzo visual.
• Renombrado: Puedes hacer doble clic en el nombre de cualquier elemento para ponerle una etiqueta personalizada (ej. "Botón de Contacto Principal"), lo que facilita mucho el trabajo a largo plazo.

Funciones clave en el panel:

• Ocultar (Icono del ojo): Te permite ocultar elementos temporalmente en el constructor para trabajar mejor en lo que hay debajo, sin eliminarlos.
• Bloquear: Evita que muevas o edites algo por accidente una vez que ya ha quedado perfecto.
• Buscador de capas: Si tienes una página muy larga, puedes escribir el nombre del módulo para saltar directamente a él.

2. El Gestor de Variables Globales

Esta es quizás la mejora más potente de Divi 5. Te permite definir valores que se repiten en todo el sitio (colores, fuentes, tamaños) y gestionarlos desde un solo lugar.

¿Cómo funciona?

Imagina que defines un color llamado "Color Primario". Si usas esa variable en 20 botones de tu sitio y luego decides cambiar el tono de azul, solo lo cambias una vez en el Gestor de Variables y todos los botones se actualizarán automáticamente.

Tipos de Variables que puedes crear:

• Colores: Para mantener tu paleta de marca intacta.
• Fuentes y Tipografía: Define los tipos de letra para tus títulos y párrafos.
• Tamaños (Spacing): Aquí es donde puedes aplicar sistemas avanzados (como el de 9 variables con CSS clamp) para que tus márgenes y rellenos sean proporcionales en todos los dispositivos.
• Imágenes: Útil para logos o iconos que aparecen en múltiples lugares.

Ventaja para el diseño responsivo:

Puedes asignar valores diferentes a una misma variable según el dispositivo. Por ejemplo, la variable "Tamaño de Título" puede valer 48px en escritorio y 32px en móvil. Al usar la variable en tus módulos, Divi se encarga de aplicar el tamaño correcto por ti.

Nota para el flujo de trabajo: Combinar ambas herramientas te permite construir sitios "arquitectónicamente fluidos". Mientras las Capas mantienen tu estructura limpia, las Variables mantienen tu diseño consistente.