---
url: 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/design/design-responsive'
title: 'Rendi il layout funzionale sui telefoni | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T03:01:29+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Le tue pagine si adattano da sole a telefoni e tablet: le colonne stanno fianco a fianco sugli schermi larghi e si impilano su quelli piccoli. Questa pagina mostra come prendere il controllo. Imposti un layout di colonna per dimensione di schermo, specchi l’ordine sugli schermi larghi e mostri gli elementi solo su alcuni dispositivi. L’esempio trasforma una riga di quattro colonne in due per due sui tablet.
  Il video nasconde una foto sui telefoni, poi restringe la finestra per mostrarne la sparizione.
tags:
  - 'Design guides'
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: 'Rendi il layout funzionale sui telefoni'
      description: |-
        Le tue pagine si adattano da sole a telefoni e tablet: le colonne stanno fianco a fianco sugli schermi larghi e si impilano su quelli piccoli. Questa pagina mostra come prendere il controllo. Imposti un layout di colonna per dimensione di schermo, specchi l’ordine sugli schermi larghi e mostri gli elementi solo su alcuni dispositivi. L’esempio trasforma una riga di quattro colonne in due per due sui tablet.
        Il video nasconde una foto sui telefoni, poi restringe la finestra per mostrarne la sparizione.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T03:01:29+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/it/hc/documentazione/impara-dxpr-builder/design/design-responsive'
      articleSection: 'Guide di design'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/design/design-responsive'
      description: |-
        Le tue pagine si adattano da sole a telefoni e tablet: le colonne stanno fianco a fianco sugli schermi larghi e si impilano su quelli piccoli. Questa pagina mostra come prendere il controllo. Imposti un layout di colonna per dimensione di schermo, specchi l’ordine sugli schermi larghi e mostri gli elementi solo su alcuni dispositivi. L’esempio trasforma una riga di quattro colonne in due per due sui tablet.
        Il video nasconde una foto sui telefoni, poi restringe la finestra per mostrarne la sparizione.
      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
---
[Centro assistenza](/it/hc)/[Documentazione](/it/hc/documentazione) /[Impara DXPR Builder](/it/hc/documentation/learn-dxpr-builder) /[Crea le pagine](/it/hc/documentation/learn-dxpr-builder/build) /[Dai stile agli elementi](/it/hc/documentation/learn-dxpr-builder/element-settings) /[Guide di design](/it/hc/documentation/learn-dxpr-builder/design/overview) # Rendi il layout funzionale sui telefoni.

 Impara DXPR BuilderCrea le pagineDai stile agli elementiGuide di design

   ## In questa guida

 Guide correlate

- [Aggiunta di una riga](/it/hc/documentazione/impara-dxpr-builder/layout/righe-e-colonne)
- [Modificare una pagina sul tuo telefono o tablet](/it/hc/documentazione/impara-dxpr-builder/modifica/modifica-da-mobile)
- [Estendi una sezione da bordo a bordo](/it/hc/documentazione/impara-dxpr-builder/design/layout-a-larghezza-intera)

Le tue pagine si adattano da sole a telefoni e tablet: le colonne stanno fianco a fianco sugli schermi larghi e si impilano su quelli piccoli. Questa pagina mostra come prendere il controllo. Imposti un layout di colonna per dimensione di schermo, specchi l’ordine sugli schermi larghi e mostri gli elementi solo su alcuni dispositivi. L’esempio trasforma una riga di quattro colonne in due per due sui tablet.

Il video nasconde una foto sui telefoni, poi restringe la finestra per mostrarne la sparizione.

  ## Prima di iniziare

- Una riga con quattro colonne uguali nella pagina; vedi [Righe e colonne](/it/hc/documentazione/impara-dxpr-builder/layout/righe-e-colonne).

## Scegli un layout per dimensione di schermo

1. Passa sopra la riga con il mouse e fai clic sull’icona griglia nella sua barra di controllo. La finestra dei layout si apre con un pannello **Medium devices (≥ 768px)**.
2. Fai clic su **Add screen size**. Si apre un secondo pannello, impostato a **Extra small (< 576px)**.
3. Nel menu a discesa di quel pannello, scegli **Small devices (≥ 576px)**.
4. Fai clic su **Custom Layout**, digita `1/2 + 1/2 + 1/2 + 1/2` e fai clic su **Save**.
5. Fai clic su **Save** sulla barra.

Quattro metà mantengono tutte e quattro le colonne e ne mettono due per riga. Il riquadro con due colonne uguali ridurrebbe la riga a due colonne su ogni dimensione di schermo.

## Cosa vedrai

Su un desktop le quattro colonne stanno ancora in una riga. Restringi la finestra del browser sotto i 768 pixel e vanno a capo due per due. Sotto i 576 pixel si impilano, una per riga, nell’ordine che vedi nell’editor.

Un layout vale dalla sua dimensione di schermo in su, finché una dimensione maggiore ha il suo layout. Ogni riga nuova inizia con un layout per **Medium devices (≥ 768px)**, quindi le sue colonne si impilano su telefoni e piccoli tablet. **Remove screen size** in un pannello elimina di nuovo quel layout.

## Specchia l’ordine sugli schermi larghi

Apri il menu **More** della riga, scegli **Settings** e attiva **Mirror row**. Da 768 pixel in su, le colonne si mostrano in ordine inverso; sugli schermi più piccoli si impilano nell’ordine dell’editor.

Usalo per righe alternate di immagine e testo. Metti l’immagine prima nell’editor, così i telefoni la mostrano sopra il testo, e specchia ogni seconda riga così i desktop mostrano l’immagine a destra.

## Mostra o nascondi un elemento per dimensione di schermo

1. Apri il menu **More** dell’elemento e scegli **Settings**.
2. In **HTML classes**, scegli un chip dal gruppo **Responsive Visibility**, ad esempio **Hidden on extra small devices, phones (<576px)**.
3. Fai clic su **Save**.

Ogni chip **Hidden on** nasconde l’elemento su una sola dimensione di schermo. Ogni chip **Visible on** lo mostra su quella dimensione e lo nasconde ovunque altro.

## Dimensioni di schermo

| Etichetta nella finestra dei layout | Larghezza schermo |
|---|---|
| **Extra small (< 576px)** | Telefoni in verticale |
| **Small devices (≥ 576px)** | Telefoni grandi, piccoli tablet |
| **Medium devices (≥ 768px)** | Tablet |
| **Large devices (≥ 992px)** | Portatili |
| **Extra large (≥ 1200px)** | Desktop |
| **Extra extra large (≥ 1400px)** | Desktop grandi |

Un elemento **Positioned layers** ha il suo toggle **Responsive**, spento per impostazione predefinita. Accendilo per scalare l’altezza del canvas e il suo testo con la larghezza della finestra, così la composizione mantiene le proporzioni.

## Se non vedi la modifica

- **Le colonne si impilano ancora su un tablet.** La riga non ha layout per quella dimensione di schermo, quindi le colonne si impilano sotto i 768 pixel. Apri l’icona griglia della riga, fai clic su **Add screen size** e scegli **Small devices (≥ 576px)**.
- **Un elemento è sparito su ogni dimensione di schermo.** Porta due chip **Visible on**, e ciascuno lo nasconde dove l’altro lo mostra. Tienine uno, oppure usa chip **Hidden on**, uno per dimensione da nascondere.
- **Mirror row non fa niente su un telefono.** **Mirror row** funziona da 768 pixel in su. Per cambiare l’ordine sui telefoni, sposta invece le colonne nell’editor.

## Prossimi passi

- [Righe e colonne](/it/hc/documentazione/impara-dxpr-builder/layout/righe-e-colonne): costruisci le righe che rendi responsive qui.
- [Modifica una pagina su telefono o tablet](/it/hc/documentazione/impara-dxpr-builder/modifica/modifica-da-mobile): controlla e sistema le pagine su uno schermo piccolo.
- [Estendi una sezione da bordo a bordo](/it/hc/documentazione/impara-dxpr-builder/design/layout-a-larghezza-intera): decidi quanto è largo il tuo contenuto.