Qué es Divi como theme + builder

Para entender Divi 5, debemos dejar de verlo como un simple plugin o una plantilla aislada. Divi es un ecosistema completo. A diferencia de otros constructores visuales que funcionan como "parches" sobre un tema de terceros, Divi ha sido diseñado desde su concepción como una solución integral donde el Tema y el Constructor trabajan en perfecta sintonía.

El Tema (Theme): La base estructural

El Tema de Divi es mucho más que el diseño superficial que ves al instalarlo. Es la arquitectura sobre la que se construye todo tu sitio web. Su función principal es proporcionar la consistencia global:

Configuración global: Gestiona la tipografía, los colores corporativos, los espacios y la estructura básica de cabeceras y pies de página.
Estándares de código: Al ser un ecosistema cerrado, el tema y el builder hablan "el mismo idioma", lo que reduce drásticamente las incompatibilidades que suelen ocurrir cuando combinas un tema de un desarrollador con un constructor de otro.
Fiabilidad: Es el marco de trabajo (framework) estable que asegura que, sin importar lo complejo que sea tu diseño, la estructura web mantenga su integridad.

El Constructor (Builder): La libertad creativa

El Divi Builder es la capa visual que vive sobre el tema. Es donde ocurre la magia creativa. Su característica diferencial es la edición en tiempo real (front-end). Mientras que el Tema define las reglas, el Builder te da las herramientas para romperlas (o personalizarlas) según lo necesites:

Interfaz visual: Puedes ver exactamente cómo quedará tu página mientras diseñas, eliminando la necesidad de guardar y refrescar para previsualizar cambios.
Flexibilidad total: Te permite controlar desde el ancho de una columna hasta la sombra exacta de un botón o la animación de una sección.
Desacoplamiento creativo: Gracias a Divi 5, el builder ahora procesa la información de manera mucho más eficiente, separando la carga del editor de la carga de la página final.

Imagina que el Tema es el lienzo y las guías de estilo de una obra de arte, y el Builder es el set completo de pinceles, pinturas y espátulas. Divi no es solo el lienzo o solo los pinceles; es la combinación de ambos trabajando juntos para que no tengas que preocuparte por si tus herramientas son compatibles con tu superficie de trabajo.

En las próximas lecciones, veremos cómo esta integración profunda es la que permite que, al modificar un ajuste en el Tema, todo el diseño creado con el Builder se actualice automáticamente, ahorrándote horas de trabajo manual.

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

Para quién está pensado