---
url: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/tutoriales/diseno-blog'
title: 'Crea un diseño de blog | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T00:57:17+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Aquí creas la página que lista tus artículos de blog: un artículo destacado arriba, un listado de una vista de Drupal con barra lateral, y una banda de boletín. Los artículos nuevos aparecen sin editar la página. Para contar a fondo la historia de un cliente, sigue Escribe un caso práctico en su lugar.
  El vídeo crea el blog de un producto de informes.
tags:
  - 'Follow a tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Crea un diseño de blog'
      description: |-
        Aquí creas la página que lista tus artículos de blog: un artículo destacado arriba, un listado de una vista de Drupal con barra lateral, y una banda de boletín. Los artículos nuevos aparecen sin editar la página. Para contar a fondo la historia de un cliente, sigue Escribe un caso práctico en su lugar.
        El vídeo crea el blog de un producto de informes.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T00:57:17+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/tutoriales/diseno-blog'
      articleSection: 'Sigue un tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/tutoriales/diseno-blog'
      description: |-
        Aquí creas la página que lista tus artículos de blog: un artículo destacado arriba, un listado de una vista de Drupal con barra lateral, y una banda de boletín. Los artículos nuevos aparecen sin editar la página. Para contar a fondo la historia de un cliente, sigue Escribe un caso práctico en su lugar.
        El vídeo crea el blog de un producto de informes.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Inicio
            item: 'https://dxpr.com/es'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: es
---
[Centro de ayuda](/es/hc)/[Documentación](/es/hc/documentacion) /[Aprende DXPR Builder](/es/hc/documentation/learn-dxpr-builder) /[Crear páginas](/es/hc/documentation/learn-dxpr-builder/build) /[Sigue un tutorial](/es/hc/documentation/learn-dxpr-builder/tutorials/overview) # Crea un diseño de blog.

 Aprende DXPR BuilderCrear páginasSigue un tutorial

   ## En esta guía

 Guías relacionadas

- [Añade formularios a las páginas](/es/hc/documentation/learn-dxpr-builder/tutorials/add-forms)
- [Muestra una vista de Drupal en tu página](/es/hc/documentacion/aprender-dxpr-builder/integraciones/vistas-drupal)
- [Añadir un bloque de Drupal a tu página](/es/hc/documentacion/aprender-dxpr-builder/integraciones/bloques-drupal)
- [Crea una página Quiénes somos](/es/hc/documentation/learn-dxpr-builder/tutorials/about-page)

Aquí creas la página que lista tus artículos de blog: un artículo destacado arriba, un listado de una vista de Drupal con barra lateral, y una banda de boletín. Los artículos nuevos aparecen sin editar la página. Para contar a fondo la historia de un cliente, sigue [Escribe un caso práctico](/es/hc/documentacion/aprender-dxpr-builder/tutoriales/caso-practico) en su lugar.

El vídeo crea el blog de un producto de informes.

  ## Antes de empezar

- Tu rol tiene el permiso **Editar con DXPR Builder**.
- Tu sitio tiene una vista que lista artículos de blog. DXPR CMS trae una vista **Blog** con un listado **Blog** y una pantalla **Artículos destacados**.
- La página está abierta en el constructor. Para una nueva, ve a **Contenido** > **Añadir contenido** > **Página de destino** (`/node/add/landing_page`) y haz clic en **Guardar**.
- Los elementos nuevos caen arriba de su columna. Añade los elementos de una columna en orden inverso, o arrástralos a su sitio después.

## Paso 1: añade el artículo destacado

1. Haz clic en **Añadir elementos** en la página vacía y elige **Sección** en la pestaña **Diseño**.
2. Haz clic en **+** en la sección y elige **Fila**; llega con dos columnas iguales. Haz clic en su icono de cuadrícula (**Diseño de columnas**), elige el ajuste **2/3 + 1/3** y haz clic en **Guardar**.
3. Haz clic en **+** en la columna ancha y elige **Imagen** en la pestaña **Contenido**. Haz clic en **Seleccionar imagen**, marca una foto y haz clic en **Insertar selección**. Escribe el **atributo Alt** en el panel **SEO** y haz clic en **Guardar**.
4. Haz clic en **+** en la columna estrecha y elige **Botón**. Pon **Título** en «Lee más», **Enlace** en el artículo y deja **Tipo** en **Primario**, y haz clic en **Guardar**.
5. Haz clic en **+** en la columna estrecha de nuevo y elige **Texto**; cae encima del botón. Escribe el título del artículo como **Encabezado 2**, añade el extracto debajo y haz clic en **Guardar**.

## Paso 2: añade el listado y la barra lateral

1. Pasa el cursor sobre la sección y haz clic en **Añadir sección debajo**. Añade una **Fila** con el ajuste **2/3 + 1/3**.
2. Haz clic en **+** en la columna ancha y abre la pestaña **Vistas de Drupal**. Elige **Vista: Blog (Blog)** y haz clic en **Guardar**; muestra tus artículos.
3. Haz clic en **+** en la columna estrecha y abre la pestaña **Vistas de Drupal**. Elige **Vista: Blog (Artículos destacados)** y haz clic en **Guardar**.
4. Haz clic en **+** en la columna estrecha de nuevo y abre la pestaña **Bloques de Drupal**. Elige **Bloque: Formularios: Formulario de búsqueda** y haz clic en **Guardar**; cae encima de los artículos destacados.

## Paso 3: añade la banda de boletín

1. Añade una tercera sección con **Añadir sección debajo**. Abre **Más** > **Ajustes**, elige el **Fondo** azul marino en el panel **Estilo** y haz clic en **Guardar**.
2. Haz clic en **+** en la sección y elige **Botón**. Pon **Título** en «Suscríbete al boletín», **Enlace** en `/newsletter` y **Tipo** en **Claro**, y haz clic en **Guardar**.
3. Haz clic en **+** de nuevo y elige **Texto**; cae encima del botón. Escribe «Mantente al día» como **Encabezado 2** y una línea sobre el boletín debajo. Pon **Color de fuente** en blanco en el panel **Estilo** y haz clic en **Guardar**.

## Paso 4: guarda y muestra la vista previa

1. Haz clic en **Guardar** en la barra de herramientas del constructor.
2. Abre el menú de vista (el **icono de ojo**) y elige **Vista previa**.

## Ve más allá

No sale en el vídeo:

- **Formulario de alta**: añade un bloque de formulario de boletín desde la pestaña **Bloques de Drupal** en lugar del botón; lee [Añade formularios a las páginas](/es/hc/documentation/learn-dxpr-builder/tutorials/add-forms)
- **Categorías**: añade una vista de tus categorías de blog a la barra lateral
- **Tono de barra lateral**: abre los ajustes de la columna estrecha y dale un **Fondo** gris claro y algo de relleno en el panel de **Estilo** correspondiente

## Lo que ves

El artículo destacado abre la página: una foto ancha a la izquierda, su título, extracto y botón **Lee más** a la derecha. Debajo tus artículos llenan la columna ancha, con el formulario de búsqueda y los artículos destacados en la barra lateral. Una banda azul marino cierra la página con el encabezado **Mantente al día** y el botón **Suscríbete al boletín**.

## Si no ves tus artículos

- **La vista Blog no está en la pestaña Vistas de Drupal.** La vista está desactivada, o tu perfil de usuario del constructor la esconde. Actívala en **Estructura** > **Vistas** (`/admin/structure/views`), o pide a una persona administradora que la marque en **Vistas** en tu perfil de usuario.
- **La columna de listado queda vacía.** La vista no tiene artículos publicados que mostrar. Publica un artículo en **Contenido** > **Añadir contenido** > **Artículo de blog**, y recarga la página.
- **El formulario de búsqueda no está en la pestaña Bloques de Drupal.** El módulo **Búsqueda** del núcleo ofrece ese bloque. Actívalo en **Extender** (`/admin/modules`).
- **Tus cambios desaparecieron tras recargar.** Saliste de la página antes de hacer clic en **Guardar** en la barra de herramientas del constructor. Si Guardar muestra un error, lee [Los cambios no se guardan](/es/hc/documentacion/aprender-dxpr-builder/solucion-problemas/cambios-no-guardan).

## ¿Qué sigue?

- [Añade formularios a las páginas](/es/hc/documentation/learn-dxpr-builder/tutorials/add-forms) para formularios de alta
- [Integración con Vistas de Drupal](/es/hc/documentacion/aprender-dxpr-builder/integraciones/vistas-drupal) para configurar vistas
- [Integración con bloques de Drupal](/es/hc/documentacion/aprender-dxpr-builder/integraciones/bloques-drupal) para bloques de barra lateral
- [Página Quiénes somos](/es/hc/documentation/learn-dxpr-builder/tutorials/about-page) para el siguiente tutorial