Flujo de trabajo base

El flujo de trabajo en Divi 5 no es una serie de pasos aleatorios, sino un proceso iterativo y lógico. Al entender este ciclo, pasarás de "luchar contra la herramienta" a construir de manera fluida y profesional. La clave reside en respetar la jerarquía estructural y dominar el sistema de pestañas de configuración que Divi aplica de forma consistente en todos sus módulos.

La jerarquía estructural: El esqueleto de la página

Todo diseño en Divi comienza respetando su estructura base. No puedes insertar un módulo en el vacío; necesitas un contenedor. Este es el orden lógico que debes seguir siempre:

Secciones (Azul): Son los bloques contenedores más grandes. Definen el espacio principal de tu diseño.
Filas (Verde): Se sitúan dentro de las secciones y determinan la disposición horizontal (columnas) de tu contenido.
Columnas: Definen cómo se distribuye el espacio dentro de una fila (por ejemplo, mitad y mitad, o una columna ancha y una estrecha).
Módulos (Gris): Son los elementos funcionales (texto, imagen, botón, formulario) que residen dentro de las columnas.

El ciclo de configuración: Contenido, Diseño y Avanzado

Una vez que tienes la estructura, el flujo de trabajo dentro de cada módulo sigue una regla de oro. Cada vez que abras los ajustes de un módulo, encontrarás tres pestañas principales que dictan tu flujo:

Contenido: Aquí es donde defines qué es el elemento. ¿Cuál es el texto del botón? ¿Qué imagen voy a mostrar? ¿Cuál es el enlace? Es el lugar para la información esencial.
Diseño: Aquí defines cómo se ve el elemento. Márgenes, tipografías, colores, sombras, bordes y alineaciones. Es la pestaña donde pasarás la mayor parte de tu tiempo creativo.
Avanzado: Aquí controlas cómo se comporta el elemento. ID y clases CSS, visibilidad condicional, animaciones, filtros CSS y ajustes de posicionamiento. Se utiliza para personalizaciones más profundas o efectos técnicos.

Ciclo de diseño responsive

El flujo de trabajo profesional nunca termina en la versión de escritorio. Divi 5 facilita un flujo constante de "Diseñar - Verificar - Ajustar":

Diseño Base: Construye y estiliza tu diseño en la vista de escritorio (Desktop).
Adaptación: Haz clic en el icono del dispositivo en la barra de control para saltar a Tablet y Móvil.
Ajuste: Divi te permite sobrescribir los estilos base para cada dispositivo. Si el texto se ve muy grande en móvil, cámbialo solo para móvil; Divi respetará que el estilo base (escritorio) permanezca intacto.

Guardado y gestión de versiones

Gracias al nuevo motor de Divi 5, el flujo de guardado es más rápido. Sin embargo, adopta la costumbre de realizar guardados periódicos. Si cometes un error grave, el sistema de historial (que ahora es mucho más preciso) te permite volver atrás en tus acciones paso a paso. No temas experimentar, ya que el flujo de trabajo moderno está diseñado para que puedas probar diseños y descartarlos instantáneamente sin afectar a la estructura de tu sitio web.

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

Interfaz general

Diferencias frente al editor clásico