Nuevo motor interno

El cambio más significativo de Divi 5 no es visual, sino estructural. El "motor" de un constructor visual es el conjunto de scripts y procesos que traducen tus clics en el editor en código (HTML/CSS) que el navegador finalmente interpreta. En las versiones anteriores, este proceso estaba limitado por una arquitectura basada en el estándar clásico de WordPress, lo que generaba lo que llamamos "deuda técnica".

¿Por qué un nuevo motor?

La necesidad de este cambio responde a tres pilares fundamentales:

Optimización del DOM (Document Object Model): En versiones anteriores, para lograr diseños complejos, Divi a menudo necesitaba anidar múltiples capas de contenedores (divs) innecesarios. El nuevo motor genera una estructura de HTML mucho más "limpia" y semántica, lo que reduce el peso total de la página y facilita la tarea del navegador al pintar el diseño.
Procesamiento Inteligente: El antiguo motor solía cargar gran parte de sus recursos de forma global. El nuevo sistema utiliza un enfoque modular: solo carga los archivos necesarios para los elementos que están presentes en la página actual. Esto reduce drásticamente el tamaño del paquete de carga (payload) inicial.
Reactividad mejorada: La nueva arquitectura está diseñada para manejar cambios en tiempo real sin recargar o procesar tareas pesadas en segundo plano. Esto se traduce en una interfaz (UI) que responde al instante, sin el "lag" o retardo que a veces experimentábamos al arrastrar elementos o abrir paneles de configuración en entornos con muchas capas.

Impacto técnico inmediato

Para el desarrollador, este motor significa que el "bloat" o sobrecarga de código ha sido minimizado. Ya no dependemos tanto de la potencia de procesamiento del servidor para renderizar la página; ahora, la carga se distribuye de forma más eficiente, lo que se traduce en:

Menor tiempo de respuesta del servidor (TTFB): Al enviar un código más ligero desde el inicio.
Estabilidad en ediciones masivas: La capacidad de manejar páginas con cientos de módulos sin que el navegador se bloquee o la interfaz se vuelva lenta.
Compatibilidad futura: Al limpiar la base de código, Divi se posiciona mejor para integrar nuevas tecnologías web y cumplir con los estándares cambiantes de accesibilidad y SEO sin necesidad de parches externos.

Curso

Curso de Divi 5

161 lecciones

1 Introducción a Divi 5
1.1 Qué es Divi
1.1.1 Qué es Divi como theme + builder
1.1.2 Para quién está pensado
1.1.3 Casos reales de uso
1.2 Qué es Divi 5 y qué ha cambiado
1.2.1 Nuevo motor interno
1.2.2 Diferencias con Divi 4
1.2.3 Mejoras reales de rendimiento
1.2.4 Compatibilidad y futuro
1.3 Requisitos técnicos
1.3.1 Hosting recomendado
1.3.2 Versión PHP
1.3.3 WordPress necesario
1.4 Instalación y activación
1.4.1 Descargar Divi 5
1.4.2 Instalar Divi 5
1.4.3 Activar licencia de Divi 5
1.5 Primer contacto con el nuevo editor de Divi 5
1.5.1 Interfaz general
1.5.2 Flujo de trabajo base
1.5.3 Diferencias frente al editor clásico
2 Fundamentos del Divi Builder 5
2.1 Estructura de diseño en Divi
2.1.1 Secciones
2.1.2 Filas
2.1.3 Columnas
2.1.4 Módulos
2.2 Manejo del builder
2.2.1 Arrastrar y soltar
2.2.2 Controles contextuales
2.2.3 Panel de opciones
2.3 Gestión básica de contenido
2.3.1 Copiar
2.3.2 Clonar
2.3.3 Guardar elementos
2.4 Introducción a la Biblioteca
2.4.1 Guardar elementos
2.4.2 Reutilización
2.5 Layouts predefinidos de Divi 5
2.5.1 Qué son y para qué sirven
2.5.2 Tipos: layouts completos, secciones sueltas, landing pages
2.5.3 Cómo importar desde la biblioteca Divi
2.5.4 Buenas prácticas: siempre trabajar sobre copia
2.5.5 Combinación con presets para mantener identidad visual
3 Módulos Esenciales de Divi 5
3.1 Módulos de contenido básico
3.1.1 Texto
3.1.2 Títulos
3.1.3 Imagen
3.2 Módulos interactivos y visuales
3.2.1 Botones
3.2.2 Galería
3.2.3 Vídeo
3.2.4 Llamadas a la acción
3.3 Elementos de estructura
3.3.1 Espaciadores
3.3.2 Separadores
3.4 Buenas prácticas
3.4.1 Qué usar y cuándo
3.4.2 Errores comunes
4 Presets y Sistema de Diseño Global en Divi 5
4.1 Qué son los Presets
4.1.1 Concepto
4.1.2 Diferencias respecto a estilos locales
4.1.3 Cambios frente a Divi 4
4.2 Creación de Presets
4.2.1 Presets para textos
4.2.2 Presets para encabezados
4.2.3 Presets para botones
4.2.4 Presets para módulos repetidos
4.2.5 Presets para formularios
4.3 Gestión avanzada de presets
4.3.1 Editar presets
4.3.2 Actualización global
4.3.3 Duplicar
4.3.4 Resetear
4.4 Presets + layouts predefinidos
4.4.1 Aplicar presets sobre layouts importados
4.4.2 Ajustes de identidad visual global
4.4.3 Guardar layouts adaptados en la biblioteca
4.5 Presets como sistema de diseño
4.5.1 Coherencia visual
4.5.2 Flujo de trabajo profesional
4.5.3 Escalabilidad en proyectos
4.6 Presets + rendimiento
4.6.1 Menos CSS
4.6.2 Mejor carga
4.6.3 Buenas prácticas
5 Diseño Profesional y Responsive
5.1 Diseño avanzado
5.1.1 Tipografía
5.1.2 Colores
5.1.3 Espaciados
5.1.4 Bordes
5.1.5 Sombras
5.2 Responsive design
5.2.1 Ajustes por dispositivo
5.2.2 Breakpoints
5.2.3 Errores comunes
5.3 Animaciones y efectos
5.3.1 Hover
5.3.2 Scroll
5.3.3 Microinteracciones
6 Theme Builder en Divi 5
6.1 Qué es el Theme Builder
6.1.1 Concepto y utilidad real
6.1.2 Diferencias vs plantillas del tema clásico
6.1.3 Ejemplos prácticos
6.2 Cabeceras personalizadas
6.2.1 Crear una cabecera desde cero
6.2.2 Usar layouts predefinidos en cabeceras
6.2.3 Ajustes de responsive y experiencia de usuario
6.3 Pies de página personalizados
6.3.1 Diseño de footer desde cero
6.3.2 Footers globales vs footers específicos
6.3.3 Buenas prácticas de diseño
6.4 Plantillas globales
6.4.1 Qué es una plantilla global
6.4.2 Plantilla global vs plantillas específicas
6.4.3 Cuándo usar una u otra
6.5 Reglas de asignación
6.5.1 Aplicar plantillas por páginas concretas
6.5.2 Aplicar plantillas por tipo de contenido
6.5.3 Exclusiones y prioridades
7 Blog y Contenido Dinámico
7.1 Diseño del blog
7.1.1 Página de blog
7.1.2 Entradas individuales
7.2 Contenido dinámico
7.2.1 Campos dinámicos
7.2.2 Integración con WordPress
7.3 Buenas prácticas de UX & lectura
7.3.1 Diseño centrado en la experiencia del usuario
7.3.2 Lectura cómoda y retención del usuario
7.3.3 Accesibilidad, SEO y rendimiento aplicado al blog
8 WooCommerce + Divi 5
8.1 Activación e integración
8.1.1 Instalación de WooCommerce
8.1.2 Integración con Divi 5
8.1.3 Preparación de la tienda para diseño
8.2 Diseño de tienda
8.2.1 Página de tienda
8.2.2 Categorías de productos
8.2.3 Responsive y diseño móvil
8.3 Plantillas de producto
8.3.1 Crear plantilla con Theme Builder
8.3.2 Diseño estratégico de producto
8.3.3 Variaciones y elementos extra
8.4 Carrito y Checkout
8.4.1 Página de carrito
8.4.2 Checkout optimizado
8.4.3 Trust & Conversion Helpers
8.5 Conversión & UX
8.5.1 Psicología del usuario comprador
8.5.2 Microconversiones
8.5.3 Métricas y mejora continua
9 Rendimiento y Optimización
9.1 Qué mejora realmente Divi 5
9.1.1 Cambios de arquitectura
9.1.2 Impacto en rendimiento real
9.1.3 Qué ya no hace falta optimizar
9.2 Optimización de imágenes
9.2.1 Formatos recomendados
9.2.2 Compresión correcta
9.2.3 Responsive images & carga inteligente
9.3 CSS optimizado
9.3.1 Cómo gestiona CSS Divi 5
9.3.2 Evitar sobrecarga visual
9.3.3 Buenas prácticas de estilos
9.4 Core Web Vitals
9.4.1 LCP
9.4.2 CLS
9.4.3 INP (antes FID)
9.5 Buenas prácticas
9.5.1 Hosting adecuado
9.5.2 Plugins responsables
9.5.3 Mantenimiento periódico
10 Seguridad y Mantenimiento
10.1 Copias de seguridad
10.1.1 Estrategia profesional
10.1.2 Herramientas recomendadas
10.1.3 Tipos de copias
10.2 Actualizaciones
10.2.1 Actualizar Divi 5 correctamente
10.2.2 Actualizar WordPress
10.2.3 Evitar roturas
10.3 Compatibilidad con plugins
10.3.1 Selección correcta
10.3.2 Conflictos comunes
10.3.3 Cómo diagnosticar
10.4 Solución de errores comunes
10.4.1 Fallos del builder
10.4.2 Errores visuales
10.4.3 Errores graves
11 Flujo profesional de agencia
11.1 Cómo plantear un proyecto real
11.1.1 Briefing
11.1.2 Arquitectura web
11.1.3 Estándares profesionales
11.2 Sistema de diseño basado en presets
11.2.1 Definir sistema visual
11.2.2 Crear presets globales
11.2.3 Aplicación en todo el sitio
11.3 Reutilización entre proyectos
11.3.1 Biblioteca Divi
11.3.2 Exportación e importación
11.3.3 Plantillas internas de agencia
11.4 Checklist antes de entregar
11.4.1 Diseño
11.4.2 Funcionalidad
11.4.3 SEO & rendimiento
11.5 Multilenguaje
11.5.1 Opciones disponibles
11.5.2 Divi + Multilenguaje
11.5.3 Buenas prácticas
11.6 Accesibilidad
11.6.1 Principios básicos
11.6.2 Aplicación práctica en Divi
11.6.3 Errores comunes
11.7 Legal – RGPD
11.7.1 Cookies
11.7.2 Documentación legal mínima
11.7.3 Formularios

Casos reales de uso

Diferencias con Divi 4