En esta página se recogen las guías DNP necesarias para incorporarse al sistema, crear páginas, entradas y categorías, y consultar un glosario de términos como referencia práctica de trabajo.
Guías DNP de incorporación al sistema
Antes de empezar
Estas guías no pretenden enseñarte WordPress. Su único objetivo es que puedas usar DNP sin bloquearte antes de llegar a los layouts.
Si ya sabes hacer todo esto, puedes saltarte estas guías.
Crear una página en WordPress
En WordPress, una página es un contenido estático. Se usa para portadas, páginas de prueba y layouts de ejemplo.
Dónde se crea
Escritorio de WordPress
Páginas → Añadir nueva
Qué necesitas hacer
Asignar un título (por ejemplo: Prueba DNP)
Guardar o publicar
No necesitas escribir texto ni diseñar nada aquí. En DNP, las páginas sirven principalmente como soporte para layouts creados en el Theme Builder.
El diseño no se hace aquí, sino en la plantilla.
Crear una entrada (post)
Las entradas son el contenido dinámico del periódico.
Los layouts DNP muestran entradas mediante loops, no contenido escrito a mano.
Dónde se crea
Escritorio de WordPress
Entradas → Añadir nueva
Qué es suficiente
Un título
Un poco de texto
Una imagen destacada
Asignar una categoría
Con 4 entradas creadas es más que suficiente para seguir todas las guías DNP.
> Importante: si no hay entradas, los layouts no mostrarán nada.
> El diseño puede estar bien, pero el loop no tiene contenido que cargar.
Crear una categoría
Las categorías sirven para organizar las entradas y, en DNP, son la base para:
filtrar contenido en los loops
construir portadas por secciones
evitar mezclar temas distintos
Dónde se crea
Escritorio de WordPress
Entradas → Categorías
Qué necesitas hacer
Añadir un nombre (por ejemplo: Actualidad, Libros, Cultura, Tecnología)
Asignar a las entradas la categoría correspondiente
Guardar
No necesitas: descripciones, imágenes, ajustes avanzados
Importante:
Si todas las entradas están Sin categoría, los filtros del loop no tienen sentido.
Las categorías son lo que convierte un diseño en un periódico, no en un blog genérico.
Subir y preparar una imagen
Las imágenes influyen directamente en:
la velocidad del sitio
el aspecto editorial
la consistencia visual
Subir imagen
Medios → Añadir nuevo
O directamente desde una entrada
Recomendaciones DNP
Usa imágenes gratuitas (por ejemplo, Freepik filtrando por “Free”)
Ajusta el formato antes de subirla (por ejemplo, 3×2).
Paint 3D (Windows) es suficiente para recortar y ajustar el formato
Convierte la imagen a WebP antes de subirla y ajusta el tamaño (por ejemplo 900x600).
Squoosh es una opción rápida y gratuita
No necesitas software profesional
Necesitas criterio básico: imágenes proporcionadas, ligeras y coherentes
Con esto hecho
ya puedes crear contenido
ya puedes alimentar loops
ya puedes entender qué muestra un layout DNP
A partir de aquí empiezan las guías de layouts.
WordPress básico no vuelve a explicarse en DNP
Variables y presets (Cómo controla DNP el diseño)
En DNP, el diseño no se ajusta módulo a módulo.
Antes de construir layouts, conviene entender dos herramientas clave: variables y presets.
No es obligatorio dominarlas desde el primer día, pero sí saber para qué sirven y por qué DNP las usa.
Variables (la base del sistema)
Las variables guardan valores reutilizables: fuentes, colores y tamaños.
Cómo se crean
Divi → Theme Options
Ir a Variables
Crear una nueva variable
Asignar el valor
Guardar
Variables tipográficas habituales en DNP
--font-base → Inter
--font-editorial → Georgia
--font-display → Adamina
Variables de color habituales en DNP
--color-heading → negro (titulares)
--color-text → casi negro (texto)
--color-meta → gris claro (categorías, fechas)
--color-divider → azul claro (líneas y bordes)
Las variables no se aplican directamente al layout.
Sirven para alimentar los presets.
Presets (las decisiones editoriales)
Los presets guardan cómo debe verse un módulo concreto.
Cada preset representa una función, no un diseño puntual.
Cómo se crean
Abrir un módulo (Texto, Título…)
Ajustar fuente, tamaño, color
Usar variables en lugar de valores fijos
Guardar como Preset
Reutilizar en todos los layouts
Presets básicos en DNP (ejemplo)
H1
Fuente: --font-display
Color: --color-heading
Título de noticia
Fuente: --font-editorial
Color: --color-heading
Extracto
Fuente: --font-base
Color: --color-text
Categoría
Fuente: --font-base
Color: --color-meta
Título de sección (H2)
Fuente: --font-display
Color: --color-heading
Diferencia entre variables y presets
Idea clave
Variables = valores
Presets = decisiones
El layout solo organiza, no decide estilos
Error habitual
Ajustar tamaños, fuentes y colores en cada módulo.
Eso rompe la coherencia y hace el sistema inmanejable.
Resultado esperado
Un sistema donde:
cambiar una fuente o color afecta a toda la web
los layouts se construyen rápido
el diseño se mantiene estable aunque crezca el contenido
Idea clave
Si no usas variables y presets, DNP sigue funcionando.
Pero no estás usando el sistema completo.
Cuando empiezas a usarlos, el diseño deja de ser un problema y pasa a ser una consecuencia.
Glosario DNP
Este glosario no está pensado para memorizarse, sino para orientarte mientras usas DNP
Orientación básica (Esencial para no perderse antes de empezar)
Estos términos sirven solo para saber dónde estás y qué estás tocando.
WordPress. Sistema donde se crean páginas, categorías, entradas y se suben imágenes y otros contenidos multimedia.
Divi. Constructor visual que se usa para diseñar el periódico.
Theme Builder. Zona de Divi donde se crean las plantillas que controlan el diseño de la web.
Plantilla (Template) Regla que define dónde se aplica un diseño.
Página. Contenido estático usado como soporte para layouts.
Entrada (Post). Contenido dinámico que se muestra en los layouts mediante loops.
Estructura visual (Cuando empiezas a construir el layout).
Aquí se entiende cómo se organiza el diseño.
Layout. Estructura visual de un bloque (cómo se colocan tarjetas y columnas).
Sección (Section). Contenedor principal de una parte del diseño.
Fila (Row). Estructura dentro de una sección que define columnas.
Fila flexible (Row Flex). Fila con comportamiento flexible para layouts repetidos.
Columna (Column). Espacio donde se colocan módulos o loops.
Árbol de estructura. Vista jerárquica de secciones, filas, columnas y módulos.
Contenido dinámico. (Clave. Aquí ocurre el clic mental)
Esta capa explica por qué el diseño se rellena solo.
Loop (Bucle). Sistema que repite una tarjeta usando entradas reales.
Entradas por página. Número de elementos que muestra el loop.
Offset. Entradas que se saltan para evitar repeticiones.
Categoría. Forma de agrupar entradas para crear secciones del periódico.
Contenido dinámico (en módulos). Datos que se insertan automáticamente en un módulo desde una entrada.
Imagen destacada. Imagen principal asociada a una entrada.
Orden editorial (layout DNP). (Diseño. Cuando el bloque ya funciona y hay que darle forma)
Aquí aparece el estilo periódico.
Grid / Layout de columnas. Distribución de tarjetas en filas y columnas.
Número de columnas. Cuántas tarjetas se muestran por fila.
Gap. Espacio entre tarjetas o columnas.
Lectura editorial. Forma en que el ojo recorre el bloque (horizontal, vertical, jerárquica).
Ajuste avanzado DNP. (Opcional para ajustes avanzados)
Esta capa no es necesaria para empezar, pero permite afinar y escalar los layouts DNP.
fr. Unidad flexible para repartir espacio entre columnas.
Rules. Solo se usa en algunos layouts. Reglas de comportamiento condicional del diseño.
Preset. Configuración guardada para reutilizar estilos o estructuras.
Variables. Valores globales reutilizables (colores, tamaños, espacios).