---
url: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/tutoriales/contenido-varias-columnas'
title: 'Crea contenido de varias columnas | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T00:57:59+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Aquí creas una página con los cuatro diseños de columnas que más usarás: contenido con barra lateral, dos mitades iguales, tres tercios y cuatro cuartos. Cada uno recibe un encabezado encima. Úsala para aprender qué ajuste encaja con cada contenido. Para cada ajuste de fila, lee Filas y columnas.
  El vídeo crea la página de recogida de residuos de un ayuntamiento.
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 contenido de varias columnas'
      description: |-
        Aquí creas una página con los cuatro diseños de columnas que más usarás: contenido con barra lateral, dos mitades iguales, tres tercios y cuatro cuartos. Cada uno recibe un encabezado encima. Úsala para aprender qué ajuste encaja con cada contenido. Para cada ajuste de fila, lee Filas y columnas.
        El vídeo crea la página de recogida de residuos de un ayuntamiento.
      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:59+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/contenido-varias-columnas'
      articleSection: 'Sigue un tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/tutoriales/contenido-varias-columnas'
      description: |-
        Aquí creas una página con los cuatro diseños de columnas que más usarás: contenido con barra lateral, dos mitades iguales, tres tercios y cuatro cuartos. Cada uno recibe un encabezado encima. Úsala para aprender qué ajuste encaja con cada contenido. Para cada ajuste de fila, lee Filas y columnas.
        El vídeo crea la página de recogida de residuos de un ayuntamiento.
      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 contenido de varias columnas.

 Aprende DXPR BuilderCrear páginasSigue un tutorial

   ## En esta guía

 Guías relacionadas

- [Añade una fila](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/filas-columnas)
- [Añade una sección](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/secciones)

Aquí creas una página con los cuatro diseños de columnas que más usarás: contenido con barra lateral, dos mitades iguales, tres tercios y cuatro cuartos. Cada uno recibe un encabezado encima. Úsala para aprender qué ajuste encaja con cada contenido. Para cada ajuste de fila, lee [Filas y columnas](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/filas-columnas).

El vídeo crea la página de recogida de residuos de un ayuntamiento.

  ## Antes de empezar

- Tu rol tiene el permiso **Editar con DXPR Builder**.
- 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 sección. Por eso cada encabezado entra tras su fila: cae encima.

## Elige un diseño

| Diseño | Va mejor para | Ajuste |
|---|---|---|
| Contenido con barra lateral | artículos con enlaces relacionados | **2/3 + 1/3** |
| Dos mitades iguales | comparaciones, antes y después | el valor por defecto de la fila |
| Tres tercios iguales | funciones destacadas, servicios | **1/3 + 1/3 + 1/3** |
| Cuatro cuartos iguales | estadísticas, tarjetas pequeñas | **1/4 + 1/4 + 1/4 + 1/4** |

Una **Fila** nueva llega con dos columnas iguales. Cada otro diseño sale del icono de cuadrícula de la fila (**Diseño de columnas**).

## Paso 1: contenido con barra lateral

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**. 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 **Texto** en la pestaña **Contenido**. Escribe el artículo, pon la primera línea en **Encabezado 3** y haz clic en **Guardar**.
4. Haz clic en **+** en la columna estrecha y elige **Texto**. Escribe «Relacionado» como **Encabezado 4**, añade una línea por página relacionada y haz clic en **Guardar**.
5. Haz clic en **+** en la sección y elige **Texto**; cae encima de la fila. Escribe «Contenido con barra lateral» como **Encabezado 2** y haz clic en **Guardar**.

## Paso 2: dos mitades iguales

1. Pasa el cursor sobre la sección y haz clic en **Añadir sección debajo**. Abre **Más** > **Ajustes** de la sección nueva, elige un **Fondo** gris claro en el panel **Estilo** y haz clic en **Guardar**.
2. Haz clic en **+** en la sección y elige **Fila**. Dos columnas iguales es el valor por defecto, así que no hay nada que cambiar.
3. Añade un elemento **Texto** en cada columna: «Antes» y «Después» como **Encabezado 4** con una línea cada uno.
4. Añade el encabezado «Dos mitades iguales» igual que en el paso 1.

## Paso 3: tres tercios iguales

1. Añade una tercera sección con **Añadir sección debajo** y dale la clase **Centrar texto**.
2. Añade una **Fila**, haz clic en su icono de cuadrícula (**Diseño de columnas**), elige el ajuste **1/3 + 1/3 + 1/3** y haz clic en **Guardar**.
3. Añade un elemento **Texto** en cada columna: «Papel», «Vidrio» y «Orgánico» como **Encabezado 4** con una línea cada uno.
4. Añade el encabezado «Tres tercios iguales».

## Paso 4: cuatro cuartos iguales

1. Añade una cuarta sección con un **Fondo** gris claro y la clase **Centrar texto**.
2. Añade una **Fila**, haz clic en su icono de cuadrícula (**Diseño de columnas**), elige el ajuste **1/4 + 1/4 + 1/4 + 1/4** y haz clic en **Guardar**.
3. Añade un elemento **Texto** en cada columna: el día como **Encabezado 4** y lo que se recoge.
4. Añade el encabezado «Cuatro cuartos iguales».

## Paso 5: 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**.

## En pantallas pequeñas

Las columnas quedan lado a lado desde 768 píxeles de ancho, así que las tabletas muestran el mismo diseño que los escritorios. En teléfonos cada columna toma todo el ancho, y las columnas se apilan en su orden. Para otro diseño en tabletas, haz clic en el icono de cuadrícula de la fila (**Diseño de columnas**) y elige **Añadir tamaño de pantalla**.

## Ve más allá

No sale en el vídeo:

- **Estrecha, ancha, estrecha**: el ajuste **1/4 + 1/2 + 1/4** mantiene legible el texto largo con márgenes vacíos.
- **Reflejar fila**: actívalo en los ajustes de la fila para intercambiar las columnas en tabletas y escritorios. Los teléfonos conservan el orden original, así que la primera columna sigue primera allí.

## Lo que ves

Cuatro bandas se siguen, cada una con su encabezado arriba. El artículo y sus enlaces relacionados comparten la primera, dos mitades quedan sobre gris, y siguen tres tercios centrados. Cuatro cuartos centrados sobre gris cierran la página.

## Si no ves las columnas como se muestra

- **La fila tiene un número equivocado de columnas.** El ajuste solo se aplica cuando haces clic en **Guardar** en el diálogo de diseño. Haz clic en el icono de cuadrícula de la fila (**Diseño de columnas**) de nuevo, elige el ajuste y haz clic en **Guardar**.
- **Un encabezado queda debajo de su fila.** El encabezado entró antes que la fila, y los elementos nuevos caen arriba de su sección. Arrastra el encabezado encima de la fila por el tirador de su barra de control.
- **Las columnas se apilan en una tableta.** La tableta mide menos de 768 píxeles, como una tableta pequeña en vertical. Añade un diseño para ese ancho con **Añadir tamaño de pantalla** en el diálogo de diseño de la fila.
- **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?

- [Filas y columnas](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/filas-columnas) para cada ajuste de fila
- [Secciones](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/secciones) para fondos y anchos de sección