--- url: 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/design/layout-a-larghezza-intera' title: 'Estendi una sezione da bordo a bordo | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T03:01:26+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Puoi lasciare che il contenuto di una sezione corra da bordo a bordo, oppure tenerlo in un riquadro centrato mentre lo sfondo riempie la finestra. Decide un toggle sulla sezione: Full width. L’esempio costruisce una sezione grigia con tre colonne, poi attiva Full width così le colonne si allungano. Per riempimenti di colore e foto, vedi Sfondi. Il video costruisce una sezione grigia con 3 colonne, poi ne lascia correre il contenuto da bordo a bordo. 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: 'Estendi una sezione da bordo a bordo' description: |- Puoi lasciare che il contenuto di una sezione corra da bordo a bordo, oppure tenerlo in un riquadro centrato mentre lo sfondo riempie la finestra. Decide un toggle sulla sezione: Full width. L’esempio costruisce una sezione grigia con tre colonne, poi attiva Full width così le colonne si allungano. Per riempimenti di colore e foto, vedi Sfondi. Il video costruisce una sezione grigia con 3 colonne, poi ne lascia correre il contenuto da bordo a bordo. 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:26+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/layout-a-larghezza-intera' articleSection: 'Guide di design' - '@type': WebPage '@id': 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/design/layout-a-larghezza-intera' description: |- Puoi lasciare che il contenuto di una sezione corra da bordo a bordo, oppure tenerlo in un riquadro centrato mentre lo sfondo riempie la finestra. Decide un toggle sulla sezione: Full width. L’esempio costruisce una sezione grigia con tre colonne, poi attiva Full width così le colonne si allungano. Per riempimenti di colore e foto, vedi Sfondi. Il video costruisce una sezione grigia con 3 colonne, poi ne lascia correre il contenuto da bordo a bordo. 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) # Estendi una sezione da bordo a bordo. Impara DXPR BuilderCrea le pagineDai stile agli elementiGuide di design ## In questa guida Guide correlate - [Riempi una sezione di colore, foto o gradiente](/it/hc/documentazione/impara-dxpr-builder/design/sfondi) - [Rendi il layout funzionale sui telefoni](/it/hc/documentazione/impara-dxpr-builder/design/design-responsive) Puoi lasciare che il contenuto di una sezione corra da bordo a bordo, oppure tenerlo in un riquadro centrato mentre lo sfondo riempie la finestra. Decide un toggle sulla sezione: **Full width**. L’esempio costruisce una sezione grigia con tre colonne, poi attiva **Full width** così le colonne si allungano. Per riempimenti di colore e foto, vedi [Sfondi](/it/hc/documentazione/impara-dxpr-builder/design/sfondi). Il video costruisce una sezione grigia con 3 colonne, poi ne lascia correre il contenuto da bordo a bordo. ## Costruisci una sezione in riquadro 1. Fai clic su **Add Elements** nell’area di contenuto vuota e scegli **Section** nella scheda **Layout**. 2. Passa sopra la sezione con il mouse, apri **More** e scegli **Settings**. 3. Apri il pannello **Style** e scegli un **Background** grigio chiaro. 4. Fai clic su **Save**. Il grigio copre già la finestra. 5. Fai clic su **+** sulla sezione e scegli **Row**. 6. Fai clic sull’icona griglia sulla riga, scegli il riquadro con tre colonne uguali e fai clic su **Save**. 7. In ogni colonna, fai clic su **+**, scegli **Text** nella scheda **Content**, digita un **Titolo 4** e una riga, e fai clic su **Save**. Le tre colonne ora stanno in un riquadro centrato sulla banda grigia. ## Attiva Full width 1. Apri **More** sulla sezione e scegli **Settings**. 2. Nel pannello **General**, attiva **Full width**. 3. Fai clic su **Save**. 4. Fai clic su **Save** nella barra di DXPR Builder. 5. Apri il menu vista, l’icona occhio sulla barra, e scegli **Preview**. ## Cosa vedrai La banda grigia sembra come prima. È cambiato solo il riquadro di contenuto: la prima colonna ora inizia dal bordo sinistro della sezione e l’ultima finisce al bordo destro. Ogni sezione ha due parti: un elemento esterno che porta lo sfondo e un riquadro interno che contiene le righe. **Full width** cambia solo il riquadro interno. Spento, è centrato con una larghezza massima; acceso, si allunga fino ai bordi della sezione. ## Impostazioni Il pannello **General** della sezione contiene tre toggle di layout, tutti spenti per impostazione predefinita: | Impostazione | Cosa fa | |---|---| | **Full width** | Le righe riempiono la sezione da bordo a bordo invece di un riquadro centrato | | **100% height** | La sezione è alta almeno quanto la finestra del browser | | **Vertical centering** | Le righe stanno al centro verticale della sezione | Le righe non hanno una propria impostazione di larghezza; decide la sezione. ## Due schemi - **Sfondo da bordo a bordo, testo in riquadro**: l’hero classico. Lascia **Full width** spento e imposta lo sfondo nel pannello **Style** o **Background effects**. - **Contenuto da bordo a bordo**: una striscia di card o immagini. Accendi **Full width** e dai alle colonne un po’ di **Padding** se il testo è troppo vicino al bordo della finestra. ## Se non vedi la modifica - **Niente cambia quando accendi Full width.** Su uno schermo stretto, come un telefono, la versione in riquadro riempie già la larghezza. Allarga la finestra del browser e guarda di nuovo. - **Lo sfondo si ferma prima dei bordi della finestra.** Il tuo tema mette il contenuto della pagina in una regione in riquadro, e la sezione può riempire solo quella regione. Scegli un layout di pagina o una regione a larghezza intera nel tuo tema. - **Il testo tocca il bordo della finestra.** È ciò che fa **Full width**. Aggiungi **Padding** nel pannello **Style** delle colonne, oppure lascia **Full width** spento. ## Prossimi passi - [Riempi una sezione di colore, foto o gradiente](/it/hc/documentazione/impara-dxpr-builder/design/sfondi): dai stile alla banda dietro i tuoi contenuti. - [Rendi il layout funzionale sui telefoni](/it/hc/documentazione/impara-dxpr-builder/design/design-responsive): controlla come si comportano le colonne sugli schermi piccoli.