La portada de un medio digital en Divi 5 se construye combinando tres herramientas clave: Grid, Flex Box y Loop Builder. Cada una resuelve un problema distinto. Grid define la estructura, Flex organiza la composición interna y Loop Builder genera contenido dinámico sin intervención manual. Esta guía explica cómo configurarlas técnicamente y cómo aplicarlas a una portada real sin entrar en decisiones editoriales (que corresponden al tema anterior).

🟣 Definir la estructura técnica con Grid

Grid es la base de la maquetación. Permite dividir la portada en columnas, controlar el gap y crear zonas independientes.

Ajustes clave:
– Activar Grid desde Diseño → Disposición.
– Definir columnas con fracciones (1fr, 2fr, 3fr).
– Configurar gap horizontal y vertical.
– Usar “Ubicación manual” para spans cuando un bloque debe ocupar más columnas.

Aplicación en portada:
– zona superior para el hero
– 3 columnas para noticias principales
– secciones temáticas en filas inferiores
– columna lateral estable en escritorio

Problemas habituales:
– spans que bloquean el responsive
– columnas que no se reducen en móvil
– gap demasiado pequeño que provoca sensación de compresión

🟣 Construir el hero con Flex Box

Flex Box controla la alineación interna del hero: imagen, titular y subtítulo.

Controles importantes:
– Dirección: horizontal/vertical
– Alineación: start, center, end
– Orden: invertir elementos en móvil cuando sea necesario
– Gap interno para evitar márgenes manuales

Casos prácticos:
– imagen + texto alineados verticalmente en espacios estrechos
– centrar verticalmente titulares largos
– inversión de orden en móvil (texto primero)
– hero fluido con espaciados constantes

Errores típicos:
– usar márgenes en lugar de gap
– centrar elementos que deberían alinearse al inicio
– no controlar el orden en responsive

🟣 Crear el bloque principal de noticias con Grid + Loop Builder

Loop Builder genera las tarjetas. Grid decide cómo se distribuyen.

Pasos técnicos:

1. Crear una plantilla de Loop con imagen, titular, metadatos y extracto.
2. Ajustar el orden interno con Flex Box dentro de la tarjeta.
3. Insertar el módulo Loop en la portada.
4. Activar Grid en el contenedor.
5. Configurar columnas:
   – escritorio: 3
   – tablet: 2
   – móvil: 1
6. Controlar gap para que las tarjetas no queden pegadas.

Consejos técnicos:
– forzar proporción fija de imagen
– limitar posts (6, 9, 12)
– evitar tarjetas con alturas incoherentes

🟣 Diseñar secciones temáticas con múltiples Loops

Cada sección de la portada puede usar un Loop distinto.

Configuración recomendada:
– filtrar por categoría o etiqueta
– orden por fecha descendente
– límite de posts según densidad
– diseño coherente entre tarjetas
– opcional: activar Grid si se quieren varias columnas

Problemas típicos:
– mezclar tarjetas con proporciones distintas
– loops demasiado pesados en la misma página
– padding inconsistente entre secciones

🟣 Crear una sidebar técnica con Grid + Flex Box

Sidebar = contenedor técnico, no editorial.

Cómo configurarla:
– definir 2 columnas (2fr / 1fr) con Grid
– colocar la sidebar en la derecha
– activar Flex dentro de la columna lateral
– controlar spacing con gap interno

Aplicaciones habituales:
– opinión
– más leído (loop)
– newsletter
– publicidad lateral

Errores típicos:
– sidebar demasiado ancha
– módulos mal alineados
– falta de coherencia en el padding interno

🟣 Configurar correctamente el responsive en Divi 5

Grid y Flex permiten controlar la portada sin CSS, pero hay que revisarlo manualmente.

Checklist responsive:
– convertir Grid a 1 columna en móvil
– revisar spans y desactivarlos si rompen el diseño
– ajustar tamaños tipográficos con clamp()
– reducir padding y gap
– invertir orden de elementos con Flex si es necesario

Problemas comunes:
– grid que no colapsa a 1 columna
– hero demasiado alto por padding excesivo
– tarjetas que desbordan en móvil

🟣 Ejemplo técnico completo en DiviNewsPro

– hero: Flex Box con imagen 3×2 + titular + subtítulo
– bloque principal: Loop Builder con Grid 3/2/1
– secciones temáticas: loops filtrados por categoría
– sidebar: columna fija 1fr con Flex interno
– footer independiente con estilos globales
– responsive: orden ajustado, gap reducido, clamp() en titulares

🟣 Conclusión

Grid define la estructura general, Flex Box organiza cada bloque y Loop Builder automatiza el contenido. Dominar estas tres herramientas te permite maquetar una portada limpia, estable y totalmente dinámica en Divi 5 sin necesidad de código. Una vez configurada, la portada se actualiza sola: cambia el contenido, pero la estructura permanece perfecta.

🟢 Tema anterior
👉 Theme Builder en Divi 5 para plantillas globales

🟢 Siguiente tema
👉 Plantillas de categoría en Divi 5 — Loop Builder + Theme Builder

🟢 Bloque general de temas
👉 Cómo usar Divi 5 para crear un periódico digital – Plan general