---
url: 'https://dxpr.com/it/hc/documentation/learn-dxpr-builder/layout/rows-and-columns'
title: 'Aggiunta di una riga | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-23T23:55:59+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Una riga divide una sezione in colonne, così puoi mettere contenuti fianco a fianco:
  tre servizi, una foto accanto al suo testo, una barra laterale accanto a un articolo. Scegli
  la divisione tra dodici preset e puoi dare ai telefoni un layout proprio.
  Leggi questa pagina per aggiungere una riga; per una riga dentro una colonna, vedi
  Annidamento.
tags:
  - Lay-out
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: 'Aggiunta di una riga'
      description: |-
        Una riga divide una sezione in colonne, così puoi mettere contenuti fianco a fianco:
        tre servizi, una foto accanto al suo testo, una barra laterale accanto a un articolo. Scegli
        la divisione tra dodici preset e puoi dare ai telefoni un layout proprio.
        Leggi questa pagina per aggiungere una riga; per una riga dentro una colonna, vedi
        Annidamento.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-23T23:55:59+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/layout/rows-and-columns'
      articleSection: Lay-out
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/it/hc/documentation/learn-dxpr-builder/layout/rows-and-columns'
      description: |-
        Una riga divide una sezione in colonne, così puoi mettere contenuti fianco a fianco:
        tre servizi, una foto accanto al suo testo, una barra laterale accanto a un articolo. Scegli
        la divisione tra dodici preset e puoi dare ai telefoni un layout proprio.
        Leggi questa pagina per aggiungere una riga; per una riga dentro una colonna, vedi
        Annidamento.
      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) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Lay-out](/hc/documentation/learn-dxpr-builder/layout/overview) # Aggiunta di una riga.

 Learn DXPR BuilderBuild pagesAdd contentLay-out

   ## In this guide

 Related guides

- [Aggiunta di un layout annidato](/it/hc/documentation/learn-dxpr-builder/layout/nesting)
- [Aggiunta di una sezione](/it/hc/documentation/learn-dxpr-builder/layout/sections)
- [Rendi il layout funzionale sui telefoni](/it/hc/documentation/learn-dxpr-builder/design/responsive-design)

Una riga divide una sezione in colonne, così puoi mettere contenuti fianco a fianco: tre servizi, una foto accanto al suo testo, una barra laterale accanto a un articolo. Scegli la divisione tra dodici preset e puoi dare ai telefoni un layout proprio. Leggi questa pagina per aggiungere una riga; per una riga dentro una colonna, vedi [Annidamento](/it/hc/documentation/learn-dxpr-builder/layout/nesting).

## Aggiungi una riga

L’esempio aggiunge a una sezione una riga di tre colonne, una per ogni servizio offerto da un team.

1. Fai clic su **+** su una sezione per aprire il selettore di elementi.
2. Scegli **Row** dalla scheda **Layout**. Arriva con due colonne uguali.
3. Fai clic sull’icona griglia (**Column layout**) sulla barra dei controlli della riga, scegli un preset di colonna come tre colonne uguali e fai clic su **Save**.
4. Fai clic su **+** in una colonna per aggiungervi contenuti.
5. Fai clic su **Save** nella barra degli strumenti per salvare la pagina.

  L’icona griglia sta subito dopo la maniglia di trascinamento della riga. Un preset cambia le colonne appena fai clic; **Cancel** ripristina il vecchio layout.

## Cosa vedi

I tre servizi stanno fianco a fianco, ogni colonna un terzo della larghezza della sezione. Sugli schermi più stretti di 768 pixel, le colonne si impilano: ognuna prende tutta la larghezza, nell’ordine che hanno nella pagina.

Le colonne sono alte solo quanto il loro contenuto, quindi una colonna corta finisce prima delle vicine. Lo noti quando le colonne hanno un colore di sfondo; **Equal-height columns** le pareggia.

## Configura la tua riga

### Layout di colonna

L’icona griglia apre un pannello per ogni dimensione di schermo con un proprio layout. Ogni pannello mostra questi dodici preset come tessere:

| Preset | Layout |
|---|---|
| 1/1 | Una colonna a tutta larghezza |
| 1/2 + 1/2 | Due colonne uguali |
| 1/3 + 1/3 + 1/3 | Tre colonne uguali |
| 1/4 + 1/4 + 1/4 + 1/4 | Quattro colonne uguali |
| 1/6 + 1/6 + 1/6 + 1/6 + 1/6 + 1/6 | Sei colonne uguali |
| 1/4 + 1/2 + 1/4 | Stretta, larga, stretta |
| 1/6 + 4/6 + 1/6 | Stretta, molto larga, stretta |
| 1/4 + 3/4 | Un quarto a sinistra, tre quarti a destra |
| 3/4 + 1/4 | Tre quarti a sinistra, un quarto a destra |
| 2/3 + 1/3 | Larga a sinistra, stretta a destra |
| 1/3 + 2/3 | Stretta a sinistra, larga a destra |
| 5/12 + 7/12 | Leggermente stretta a sinistra, leggermente larga a destra |

Per qualsiasi altra divisione, fai clic su **Custom Layout** e digita le larghezze come frazioni, per esempio `1/6 + 5/6`. Larghezze che sommano più di 1 vanno a capo su una nuova riga. Quando riapri la finestra, **Custom Layout** è marcato e mostra il layout, per esempio **Custom Layout (1/6 + 5/6)**.

### Un layout per dimensione di schermo

Il primo pannello, **Medium devices (≥ 768px)**, imposta il layout dai tablet in su. Per cambiare anche i telefoni, fai clic su **Add screen size** in cima alla finestra. Si apre un pannello per **Extra small (< 576px)**; scegli un’altra dimensione dal suo elenco se te ne serve una, poi un preset. **Remove screen size** elimina di nuovo un pannello.

### Impostazioni di riga e colonna

Apri **More** > **Settings** sulla barra dei controlli della riga, o su quella della colonna per l’impostazione di colonna.

| Impostazione | Elemento | Cosa fa | Valore predefinito |
|---|---|---|---|
| **Equal-height columns** | Row | Allunga ogni colonna all’altezza della più alta | Off |
| **Mirror row** | Row | Mostra le colonne in ordine inverso da 768 pixel in su; le colonne impilate conservano l’ordine della pagina | Off |
| **Vertical centering** | Column | Centra il contenuto in una colonna più alta di lui | Off |

**Mirror row** è adatto a una pagina di righe alternate: foto a sinistra, poi foto a destra, mentre i telefoni mostrano sempre prima la foto.

### Spostare e rimuovere colonne

Trascina una colonna dalla sua maniglia, oppure usa **More** > **Move Left** o **Move Right** sulla sua barra. Le colonne non hanno **Delete**: scegli invece un preset con meno colonne. I contenuti non si perdono mai così; si spostano nell’ultima colonna rimasta.

## Se non lo vedi

- **La centratura verticale su una colonna non cambia nulla.** La colonna è alta solo quanto il suo contenuto, quindi non c’è spazio in cui centrare. Attiva **Equal-height columns** nelle impostazioni della riga.
- **Le colonne si impilano sul telefono.** Sotto i 768 pixel è il comportamento predefinito. Fai clic sull’icona griglia, poi su **Add screen size**, e scegli un preset per **Extra small (< 576px)**.
- **Il testo è saltato in un’altra colonna.** Hai scelto un preset con meno colonne e il contenuto delle colonne rimosse si è spostato nell’ultima. Premi **Ctrl+Z** (**Cmd+Z** su Mac) per annullare la modifica.
- **Una colonna non ha Delete nel menu More.** Le colonne si rimuovono tramite il layout. Fai clic sull’icona griglia della riga e scegli un preset con meno colonne.

## E adesso?

- [Annidamento](/it/hc/documentation/learn-dxpr-builder/layout/nesting): metti una riga dentro una colonna per una griglia più fine.
- [Sezioni](/it/hc/documentation/learn-dxpr-builder/layout/sections): dai alla banda intorno alle tue colonne uno sfondo proprio.
- [Design reattivo](/it/hc/documentation/learn-dxpr-builder/design/responsive-design): come il tuo layout si adatta a ogni dimensione di schermo.