En esta ruta dominarás la construcción visual de tu periódico digital con las herramientas más potentes de Divi 5. Aprenderás a maquetar como un profesional usando Grid, Flexbox, Loop Builder y Theme Builder, sin escribir código, manteniendo coherencia editorial y plantillas reutilizables. El objetivo es crear una estructura visual sólida, adaptable y moderna que combine diseño y funcionalidad. Cada bloque se centrará en un aspecto esencial del proceso de maquetación para que tu medio tenga la estética y organización de un periódico digital real.

Bases — Instalar Divi 5, Variables Globales y primera plantilla

Antes de maquetar, asegúrate de tener la versión más reciente de Divi 5 activa con licencia oficial. Configura las Variables Globales de colores, tipografías y espaciados para mantener coherencia visual en todo el proyecto. Crea tu primera plantilla base con cabecera, cuerpo y pie unificados desde el Theme Builder. Esto te servirá como punto de partida para portadas, secciones y artículos, evitando repetir ajustes.

Claves rápidas

• Instala Divi 5 y activa la licencia oficial.
• Configura Variables Globales para colores y tipografías.
• Crea una plantilla base con cabecera, cuerpo y pie de página.
  👉 [Cómo preparar Divi 5 y crear tu primera plantilla]

Diseño con Grid en Divi 5 — Cuadrículas fluidas y responsivas

El nuevo sistema Grid de Divi 5 permite diseñar portadas y secciones con cuadrículas auténticas, sin depender de CSS manual. Define el número de columnas, filas y espaciado directamente desde el editor visual. Usa las opciones de alineación automática y ajuste por dispositivo para mantener el equilibrio visual en escritorio, tablet y móvil. El sistema Grid facilita crear diseños periodísticos con jerarquía visual y ritmo editorial.

Claves rápidas

• Utiliza cuadrículas CSS reales para maquetar portadas y secciones.
• Ajusta columnas y filas desde el editor visual.
• Asegura una estructura fluida y adaptable a cada dispositivo.
  👉 [Cómo usar el sistema Grid en Divi 5]

Maquetación con Flexbox en Divi — Alineación y distribución profesional

Los contenedores Flexbox en Divi 5 te permiten organizar y alinear el contenido con precisión. Podrás centrar elementos vertical y horizontalmente, controlar el espacio entre módulos y reordenar bloques según el tamaño de pantalla. Es ideal para secciones con módulos de texto, imágenes o botones que necesitan mantener proporción.

Claves rápidas

• Usa Flexbox para alinear y distribuir contenido de forma profesional.
• Controla márgenes y espaciados sin recurrir a CSS manual.
• Reordena elementos fácilmente para móviles o tabletas.
  👉 [Cómo maquetar con Flexbox en Divi 5]

Loop Builder — Listados dinámicos por categorías y etiquetas

El Loop Builder es una de las funciones más potentes de Divi 5. Permite crear listados dinámicos de noticias o secciones usando campos automáticos: imagen destacada, fecha, autor, taxonomías y lectura estimada. Con él podrás construir módulos de “últimas noticias”, “más leídas” o “por categoría” totalmente personalizables y coherentes con tu diseño.

Claves rápidas

• Usa Loop Builder para mostrar contenido dinámico por categorías o etiquetas.
• Personaliza campos automáticos como imagen, autor o lectura estimada.
• Diseña módulos coherentes con el estilo editorial del medio.
  👉 [Cómo crear loops dinámicos en Divi 5]

Theme Builder — Cabeceras, pies y plantillas globales

Con el Theme Builder puedes gestionar todas las plantillas globales: Header, Footer, Single, Archive y 404. Aplica condiciones específicas (por categoría, etiqueta o tipo de contenido) y mantén coherencia visual entre todas las páginas. Aprovecha para incluir bloques publicitarios sin afectar al diseño.

Claves rápidas

• Crea y gestiona plantillas globales desde el Theme Builder.
• Aplica condiciones según categoría o tipo de página.
• Añade espacios publicitarios sin romper la coherencia visual.
  👉 [Cómo usar el Theme Builder en Divi 5]

Portada editorial — Grid + Flex + Loop Builder (caso práctico)

Combina todo lo aprendido para crear una portada tipo periódico. Utiliza Grid para la estructura principal, Flex para alinear bloques de texto e imagen, y Loop Builder para generar listados de noticias dinámicos. Incorpora un módulo hero con la noticia destacada y una sidebar lateral con bloques de sección o publicidad.

Claves rápidas

• Estructura la portada combinando Grid, Flex y Loop Builder.
• Destaca una noticia principal con módulo hero.
• Usa sidebars o columnas laterales para secciones complementarias.
  👉 [Cómo diseñar una portada completa en Divi 5]

Páginas de categoría — Loop Builder + Theme Builder (sin duplicados)

Diseña plantillas de archivo limpias y profesionales que muestren tus noticias por sección. Configura el Loop para evitar contenido duplicado y muestra solo la información relevante: título, imagen, extracto y fecha. Mantén la misma jerarquía visual que en la portada.

Claves rápidas

• Crea plantillas de archivo con Loop Builder y Theme Builder.
• Evita contenido duplicado con filtros de categoría.
• Mantén coherencia con el diseño general de la portada.
  👉 [Cómo crear plantillas de categoría en Divi 5]

Plantillas de post — Lectura perfecta y bloques publicitarios

Optimiza la lectura de cada noticia con una estructura fluida, jerarquía tipográfica clara y espaciados cómodos. Define un ancho de texto óptimo, integra módulos publicitarios en zonas no intrusivas y usa variables globales para mantener coherencia en color y estilo.

Claves rápidas

• Define un ancho de texto cómodo para lectura continua.
• Añade bloques publicitarios sin interrumpir la experiencia.
• Usa variables globales para mantener coherencia editorial.
  👉 [Cómo diseñar plantillas de post en Divi 5]

Dominar Divi 5 te permitirá construir cualquier portada, sección o plantilla con la estética profesional de un medio real.

🟢 Bloque de temas siguiente en DiviNewsPro:
👉 Optimización SEO avanzada y medición de rendimiento – Ruta 5 Divi News Pro