--- url: 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/layout/sezioni' title: 'Aggiunta di una sezione | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-23T23:56:02+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Una sezione è una banda della tua pagina, come una hero in alto o una banda grigia di funzionalità sotto. Dai a ogni sezione il suo sfondo, colore del testo, spaziatura e altezza, poi riempila con righe o contenuti. Leggi questa pagina per aggiungere e configurare le sezioni; per dividerne una in colonne, vedi Righe e colonne.' tags: - Layout 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: 'Aggiunta di una sezione' description: 'Una sezione è una banda della tua pagina, come una hero in alto o una banda grigia di funzionalità sotto. Dai a ogni sezione il suo sfondo, colore del testo, spaziatura e altezza, poi riempila con righe o contenuti. Leggi questa pagina per aggiungere e configurare le sezioni; per dividerne una in colonne, vedi Righe e colonne.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-23T23:56:02+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/layout/sezioni' articleSection: Layout - '@type': WebPage '@id': 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/layout/sezioni' description: 'Una sezione è una banda della tua pagina, come una hero in alto o una banda grigia di funzionalità sotto. Dai a ogni sezione il suo sfondo, colore del testo, spaziatura e altezza, poi riempila con righe o contenuti. Leggi questa pagina per aggiungere e configurare le sezioni; per dividerne una in colonne, vedi Righe e colonne.' 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) /[Aggiungi contenuti](/it/hc/documentation/learn-dxpr-builder/elements) /[Layout](/it/hc/documentation/learn-dxpr-builder/layout/overview) # Aggiunta di una sezione. Impara DXPR BuilderCrea le pagineAggiungi contenutiLayout ## In questa guida Guide correlate - [Aggiunta di una riga](/it/hc/documentazione/impara-dxpr-builder/layout/righe-e-colonne) - [Riempi una sezione di colore, foto o gradiente](/it/hc/documentazione/impara-dxpr-builder/design/sfondi) - [Estendi una sezione da bordo a bordo](/it/hc/documentazione/impara-dxpr-builder/design/layout-a-larghezza-intera) Una sezione è una banda della tua pagina, come una hero in alto o una banda grigia di funzionalità sotto. Dai a ogni sezione il suo sfondo, colore del testo, spaziatura e altezza, poi riempila con righe o contenuti. Leggi questa pagina per aggiungere e configurare le sezioni; per dividerne una in colonne, vedi [Righe e colonne](/it/hc/documentazione/impara-dxpr-builder/layout/righe-e-colonne). ## Aggiungi una sezione L’esempio crea una hero blu scuro per una clinica. Sotto segue una sezione grigio chiaro con tre colonne. 1. Fai clic su **Add Elements** su una pagina vuota e scegli **Section** dalla scheda **Layout**. Sotto una sezione esistente, fai clic su **Add Section Below**, il più rotondo sotto di essa. 2. Passa sopra alla sezione, apri **More** e scegli **Settings**. 3. Configura tutta la sezione: qui **Align text center** in **HTML classes**, uno sfondo blu scuro in **Background** e un bianco in **Font color**. Fai clic su **Save**. 4. Fai clic su **+** sulla sezione per aggiungervi contenuti direttamente, oppure aggiungi una **Row** per dividerla in colonne. 5. Fai clic su **Save** nella barra degli strumenti per salvare la pagina. **Background** e **Font color** sono nel pannello **Style** della finestra. I nuovi elementi arrivano in cima alla sezione, quindi aggiungi prima quello più in basso: nel video, il pulsante entra prima del titolo. ## Cosa vedi La banda blu scuro riempie la finestra da bordo a bordo. Il suo titolo e il suo pulsante restano in un riquadro centrato, il contenitore interno della sezione. La sezione grigia inizia subito sotto, con le sue tre colonne di funzionalità nello stesso riquadro centrato. Ogni nuova sezione porta già la classe **Vertical padding size 5 (py-5)**in **HTML classes**. Quella classe le dà lo spazio sopra e sotto il suo contenuto. ## Configura la tua sezione La finestra delle impostazioni ha cinque pannelli: **General**, **Background effects**, **Animation**, **Style** e **Hover style**. Solo le sezioni hanno **Background effects**. | Impostazione | Pannello | Cosa fa | Valore predefinito | |---|---|---|---| | **Full width** | General | Le righe vanno da bordo a bordo invece che dentro il contenitore centrato | Off | | **100% height** | General | La sezione è alta almeno quanto la finestra del browser | Off | | **Vertical centering** | General | Il contenuto sta al centro verticale di una sezione più alta di lui | Off | | **HTML ID** | General | Un nome ancora, così un link a `#name` salta a questa sezione | Empty | | **HTML classes** | General | Classi di utilità, come **Align text center** o una dimensione di padding | **Vertical padding size 5 (py-5)** | | **Background effect** | Background effects | **Simple image**, **Fixed image**, **Parallax image**, **Gradient** o **YouTube video** | **Simple image** | | **Background**, **Font color** | Style | Il colore dietro la sezione e il colore del suo testo | None: decide il tema | Lo sfondo copre sempre tutta la sezione, qualunque cosa dica **Full width**. Gli effetti immagine muovono la **Background image** scelta nel pannello **Style**; [Sfondi](/it/hc/documentazione/impara-dxpr-builder/design/sfondi) mostra ogni effetto. Per più o meno spazio, sostituisci **Vertical padding size 5 (py-5)** con una dimensione minore o **No vertical padding (py-0)**. Per pixel esatti, usa il box model nel pannello **Style**, come spiega [Spaziatura](/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/spaziatura). ## Ricette di sezione | Sezione | Impostazioni per crearla | |---|---| | Hero | **100% height** e **Vertical centering** attivi, un effetto **Parallax image**, un titolo e un pulsante | | Funzionalità | Un **Background** chiaro, un titolo, poi una riga di tre colonne | | Invito all’azione | Un **Background** forte, **Align text center**, una riga breve e un pulsante | | Testimonianze | Un **Background** chiaro e una riga di tre colonne, ciascuna con un **Block quote** | [Progetta una hero section](/it/hc/documentazione/impara-dxpr-builder/tutorial/hero-section) costruisce la prima passo passo. ## Se non lo vedi - **La pagina vuota non ha il pulsante Add Elements.** L’assistente di creazione pagina è spento, quindi la pagina vuota offre solo **Choose a template**. Fai clic sull’area vuota per aprire il selettore di elementi, oppure attiva **Enable page creation assistant** in `/admin/dxpr_studio/dxpr_builder/ai_settings`. - **Non c’è il pulsante Add Section Below.** Solo le sezioni messe direttamente sulla pagina ce l’hanno, non una sezione dentro una colonna o una scheda. Fai clic su **+** sulla colonna. - **La centratura verticale non cambia nulla.** La sezione è alta solo quanto il suo contenuto, quindi non c’è spazio in cui centrare. Attiva anche **100% height**. - **Full width sembra non fare nulla.** Lo sfondo copre già tutta la sezione; **Full width** sposta solo le righe verso i suoi bordi. Con un testo corto in una colonna, il cambiamento è difficile da notare. - **È comparsa una sezione che non hai aggiunto.** Hai scelto una **Row** o un elemento di contenuto su una pagina vuota, e ogni elemento ha bisogno di una sezione intorno. DXPR Builder ne ha aggiunta una per te; apri le sue impostazioni come qualsiasi altra. ## E adesso? - [Righe e colonne](/it/hc/documentazione/impara-dxpr-builder/layout/righe-e-colonne): dividi una sezione in colonne. - [Sfondi](/it/hc/documentazione/impara-dxpr-builder/design/sfondi): effetti parallasse, sfumatura e video per le sezioni. - [Layout a tutta larghezza](/it/hc/documentazione/impara-dxpr-builder/design/layout-a-larghezza-intera): quando lasciare che le righe vadano da bordo a bordo.