Secciones

En Divi 5, las secciones son el contenedor de nivel superior y la base fundamental de cualquier layout. A diferencia de las versiones heredadas, la arquitectura de Divi 5 —construida desde cero sobre un framework React— trata a las secciones no solo como cajas contenedoras estáticas, sino como nodos de un sistema de diseño inteligente, optimizado para renderizado instantáneo y escalabilidad.

El nuevo selector de estructuras

Al insertar una sección, accedes a un catálogo inteligente que prioriza dos motores de maquetado nativos modernos, eliminando la dependencia de hacks de CSS antiguos:

Motor Flex: Ideal para alineaciones unidimensionales y flujos de contenido fluidos. Es la opción recomendada para el 80% de tus secciones (Hero, testimonios, features). Permite que los elementos hijos se distribuyan automáticamente sin necesidad de ajustar márgenes manualmente.
Motor Grid (CSS Grid): Integrado nativamente en Divi 5. Permite gestionar estructuras bidimensionales complejas, incluyendo diseños tipo Masonry y rejillas Multi-Row, facilitando layouts asimétricos sin anidación excesiva.

Nota del instructor: En Divi 5, ya no necesitas anidar filas dentro de filas para crear layouts complejos. El motor Grid permite definir cuadrículas bidimensionales desde el origen, manteniendo el código HTML limpio y optimizado para las Core Web Vitals.

Configuración y panel de control

Al seleccionar una sección en el lienzo, el panel lateral derecho se activa con tres pestañas fundamentales:

Contenido: Gestión de medios (fondos, vídeo, color). El manejo es asíncrono, permitiendo que el editor no se bloquee durante la carga.
Diseño: Control de espaciado (padding/margin), tamaño y comportamiento del motor (Flex o Grid).
Avanzado: Configuración técnica, visibilidad responsive y, muy importante, la asignación de elementos semánticos HTML5 (definir si tu sección es un <header>, <footer>, <section>, etc.).

Buenas prácticas de uso profesional

Semántica ante todo: Utiliza la configuración avanzada para definir la etiqueta HTML correcta. Esto mejora la accesibilidad y el SEO de tu estructura web.
Uso de Variables y Presets: No configures manualmente el espaciado o colores repetidamente. Define reglas en el Gestor de Variables y aplica Presets. Si cambias el espaciado de una sección "Hero", se propagará instantáneamente donde la uses.
Etiquetado Administrativo: Dado que Divi 5 permite una navegación muy ágil por capas, es obligatorio asignar nombres descriptivos a cada sección (ej. "Hero Home", "Testimonios Footer"). Esto facilita identificar bloques en la vista de estructura sin abrir cada configuración.

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

Diferencias frente al editor clásico

Filas