---
url: 'https://dxpr.com/it/hc/documentation/learn-dxpr-builder/tutorials/multi-column-content'
title: 'Disponi i contenuti in colonne | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-23T23:57:24+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Qui crei un’unica pagina con i quattro layout di colonna che userai di più: contenuto con barra laterale, due metà uguali, tre terzi e quattro quarti. Ciascuno riceve un’intestazione sopra. Usala per imparare quale preset si adatta a quale contenuto. Per ogni impostazione di riga, vedi Righe e colonne.
  Il video crea la pagina di raccolta rifiuti di un comune.
tags:
  - 'Volg een tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T09:09:48+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Disponi i contenuti in colonne'
      description: |-
        Qui crei un’unica pagina con i quattro layout di colonna che userai di più: contenuto con barra laterale, due metà uguali, tre terzi e quattro quarti. Ciascuno riceve un’intestazione sopra. Usala per imparare quale preset si adatta a quale contenuto. Per ogni impostazione di riga, vedi Righe e colonne.
        Il video crea la pagina di raccolta rifiuti di un comune.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-23T23:57:24+0000'
      dateModified: '2026-10-24T09:09:48+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/it/hc/documentation/learn-dxpr-builder/tutorials/multi-column-content'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/it/hc/documentation/learn-dxpr-builder/tutorials/multi-column-content'
      description: |-
        Qui crei un’unica pagina con i quattro layout di colonna che userai di più: contenuto con barra laterale, due metà uguali, tre terzi e quattro quarti. Ciascuno riceve un’intestazione sopra. Usala per imparare quale preset si adatta a quale contenuto. Per ogni impostazione di riga, vedi Righe e colonne.
        Il video crea la pagina di raccolta rifiuti di un comune.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/it'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: it
---
[Help Center](/it/hc)/[Documentation](/it/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Volg een tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # Disponi i contenuti in colonne.

 Learn DXPR BuilderBuild pagesVolg een tutorial

   ## In this guide

 Related guides

- [Aggiunta di una riga](/it/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)
- [Aggiunta di una sezione](/it/hc/documentation/learn-dxpr-builder/layout/sections)

Qui crei un’unica pagina con i quattro layout di colonna che userai di più: contenuto con barra laterale, due metà uguali, tre terzi e quattro quarti. Ciascuno riceve un’intestazione sopra. Usala per imparare quale preset si adatta a quale contenuto. Per ogni impostazione di riga, vedi [Righe e colonne](/it/hc/documentation/learn-dxpr-builder/layout/rows-and-columns).

Il video crea la pagina di raccolta rifiuti di un comune.

  ## Prima di iniziare

- Il tuo ruolo ha il permesso **Edit with DXPR Builder**.
- La pagina è aperta nel builder. Per una nuova, vai in **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) e fai clic su **Save**.
- I nuovi elementi arrivano in cima alla loro sezione. Ecco perché ogni intestazione va inserita dopo la sua riga: arriva sopra di essa.

## Scegli un layout

| Layout | Ideale per | Preset |
|---|---|---|
| Contenuto con barra laterale | articoli con link correlati | **2/3 + 1/3** |
| Due metà uguali | confronti, prima e dopo | il valore predefinito della riga |
| Tre terzi uguali | punti di forza, servizi | **1/3 + 1/3 + 1/3** |
| Quattro quarti uguali | statistiche, piccole card | **1/4 + 1/4 + 1/4 + 1/4** |

Una nuova **Row** arriva con due colonne uguali. Ogni altro layout viene dall’icona griglia della riga (**Column layout**).

## Passaggio 1: contenuto con barra laterale

1. Fai clic su **Add Elements** sulla pagina vuota e scegli **Section** dalla scheda **Layout**.
2. Fai clic su **+** sulla sezione e scegli **Row**. Fai clic sulla sua icona griglia (**Column layout**), scegli il preset **2/3 + 1/3** e fai clic su **Save**.
3. Fai clic su **+** nella colonna larga e scegli **Text** dalla scheda **Content**. Digita l’articolo, imposta la prima riga su **Heading 3** e fai clic su **Save**.
4. Fai clic su **+** nella colonna stretta e scegli **Text**. Digita "Related" come **Heading 4**, aggiungi una riga per pagina correlata e fai clic su **Save**.
5. Fai clic su **+** sulla sezione e scegli **Text**; arriva sopra la riga. Digita "Content with a sidebar" come **Heading 2** e fai clic su **Save**.

## Passaggio 2: due metà uguali

1. Passa sopra alla sezione e fai clic su **Add Section Below**. Apri il **More** > **Settings** della nuova sezione, scegli un **Background** grigio chiaro nel pannello **Style** e fai clic su **Save**.
2. Fai clic su **+** sulla sezione e scegli **Row**. Due colonne uguali è il valore predefinito, quindi non c’è nulla da cambiare.
3. Aggiungi un elemento **Text** in ogni colonna: "Before" e "After" come **Heading 4** con una riga ciascuna.
4. Aggiungi l’intestazione "Two equal halves" come nel passaggio 1.

## Passaggio 3: tre terzi uguali

1. Aggiungi una terza sezione con **Add Section Below** e dagli la classe **Align text center**.
2. Aggiungi una **Row**, fai clic sulla sua icona griglia (**Column layout**), scegli il preset **1/3 + 1/3 + 1/3** e fai clic su **Save**.
3. Aggiungi un elemento **Text** in ogni colonna: "Paper", "Glass" e "Organic" come **Heading 4** con una riga ciascuna.
4. Aggiungi l’intestazione "Three equal thirds".

## Passaggio 4: quattro quarti uguali

1. Aggiungi una quarta sezione con un **Background** grigio chiaro e la classe **Align text center**.
2. Aggiungi una **Row**, fai clic sulla sua icona griglia (**Column layout**), scegli il preset **1/4 + 1/4 + 1/4 + 1/4** e fai clic su **Save**.
3. Aggiungi un elemento **Text** in ogni colonna: il giorno come **Heading 4** e cosa si raccoglie.
4. Aggiungi l’intestazione "Four equal quarters".

## Passaggio 5: salva e vedi l’anteprima

1. Fai clic su **Save** nella barra degli strumenti del builder.
2. Apri il menu vista (l’**icona occhio**) e scegli **Preview**.

## Sugli schermi più piccoli

Le colonne stanno fianco a fianco da 768 pixel di larghezza, quindi i tablet mostrano lo stesso layout dei desktop. Sui telefoni ogni colonna prende tutta la larghezza e le colonne si impilano nel loro ordine. Per un altro layout sui tablet, fai clic sull’icona griglia della riga (**Column layout**) e scegli **Add screen size**.

## Per approfondire

Non mostrato nel video:

- **Stretta, larga, stretta**: il preset **1/4 + 1/2 + 1/4** mantiene leggibile il testo lungo con margini vuoti.
- **Mirror row**: attivalo nelle impostazioni della riga per scambiare le colonne su tablet e desktop. I telefoni conservano l’ordine originale, quindi la prima colonna viene comunque prima lì.

## Cosa vedi

Quattro bande si susseguono, ciascuna con la sua intestazione in cima. L’articolo e i suoi link correlati condividono la prima, due metà stanno sul grigio, e seguono tre terzi centrati. Quattro quarti centrati su grigio chiudono la pagina.

## Se non vedi le colonne come mostrate

- **La riga ha il numero sbagliato di colonne.** Il preset si applica solo quando fai clic su **Save** nella finestra di layout. Fai di nuovo clic sull’icona griglia della riga (**Column layout**), scegli il preset e fai clic su **Save**.
- **Un’intestazione sta sotto la sua riga.** L’intestazione è entrata prima della riga e i nuovi elementi arrivano in cima alla loro sezione. Trascina l’intestazione sopra la riga dalla maniglia di trascinamento sulla sua barra dei controlli.
- **Le colonne si impilano su un tablet.** Il tablet è più stretto di 768 pixel, come un piccolo tablet in verticale. Aggiungi un layout per quella larghezza con **Add screen size** nella finestra di layout della riga.
- **Le tue modifiche non ci sono più dopo un ricaricamento.** Hai lasciato la pagina prima di fare clic su **Save** nella barra degli strumenti del builder. Se Save mostra un errore, vedi [Le modifiche non si salvano](/it/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails).

## E adesso?

- [Righe e colonne](/it/hc/documentation/learn-dxpr-builder/layout/rows-and-columns) per ogni impostazione di riga
- [Sezioni](/it/hc/documentation/learn-dxpr-builder/layout/sections) per sfondi e larghezze di sezione