--- url: 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/design/sfondi' title: 'Riempi una sezione di colore, foto o gradiente | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T03:01:19+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Puoi riempire qualsiasi sezione di colore, foto o gradiente. Colore e foto vengono dal pannello Style, che hanno sezioni, righe, colonne ed elementi. Le sezioni aggiungono un pannello Background effects per gradienti, foto fisse e parallasse e video YouTube. L’esempio costruisce una sezione blu navy con una foto di città, testo bianco e un gradiente sopra. Il video aggiunge una foto dietro una sezione, poi la copre con un gradiente. 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: 'Riempi una sezione di colore, foto o gradiente' description: |- Puoi riempire qualsiasi sezione di colore, foto o gradiente. Colore e foto vengono dal pannello Style, che hanno sezioni, righe, colonne ed elementi. Le sezioni aggiungono un pannello Background effects per gradienti, foto fisse e parallasse e video YouTube. L’esempio costruisce una sezione blu navy con una foto di città, testo bianco e un gradiente sopra. Il video aggiunge una foto dietro una sezione, poi la copre con un gradiente. 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:19+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/sfondi' articleSection: 'Guide di design' - '@type': WebPage '@id': 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/design/sfondi' description: |- Puoi riempire qualsiasi sezione di colore, foto o gradiente. Colore e foto vengono dal pannello Style, che hanno sezioni, righe, colonne ed elementi. Le sezioni aggiungono un pannello Background effects per gradienti, foto fisse e parallasse e video YouTube. L’esempio costruisce una sezione blu navy con una foto di città, testo bianco e un gradiente sopra. Il video aggiunge una foto dietro una sezione, poi la copre con un gradiente. 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) # Riempi una sezione di colore, foto o gradiente. Impara DXPR BuilderCrea le pagineDai stile agli elementiGuide di design ## In questa guida Guide correlate - [Estendi una sezione da bordo a bordo](/it/hc/documentazione/impara-dxpr-builder/design/layout-a-larghezza-intera) - [Anima gli elementi allo scorrimento, al passaggio del mouse o al clic](/it/hc/documentazione/impara-dxpr-builder/design/scheda-animazione) - [Progetta una hero section](/it/hc/documentazione/impara-dxpr-builder/tutorial/hero-section) Puoi riempire qualsiasi sezione di colore, foto o gradiente. Colore e foto vengono dal pannello **Style**, che hanno sezioni, righe, colonne ed elementi. Le sezioni aggiungono un pannello **Background effects** per gradienti, foto fisse e parallasse e video YouTube. L’esempio costruisce una sezione blu navy con una foto di città, testo bianco e un gradiente sopra. Il video aggiunge una foto dietro una sezione, poi la copre con un gradiente. ## Aggiungi colore e foto 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 e apri **More > Settings**. 3. Apri il pannello **Style**. 4. Scegli un campione navy scuro per **Background**. 5. Scegli il bianco per **Font color**. 6. In **Background image**, fai clic su **Select Image**. Cerca nella libreria dei media, spunta una foto e fai clic su **Insert selected**. 7. Imposta **Background style** a **Cover**. 8. Imposta **Background position** a **Center center** e fai clic su **Save**. 9. Fai clic su **+** sulla sezione e scegli **Text** nella scheda **Content**. 10. Digita un titolo, come `Evening lectures`, e una riga sotto di esso. Imposta il titolo a **Heading 2** e centra entrambe le righe nella barra dell’editor. 11. Apri il pannello **Style**, imposta **Font color** a bianco e fai clic su **Save**. ## Aggiungi un gradiente 1. Passa sopra la sezione con il mouse e apri di nuovo **More > Settings**. 2. Apri il pannello **Background effects** e imposta **Background effect** a **Gradient**. 3. Scegli uno **Start color** e un **End color**, poi fai clic su **Save**. 4. Fai clic su **Save** nella barra, apri il menu vista (l’icona occhio) e scegli **Preview**. ## Cosa vedrai Dopo i primi passaggi, la foto riempie l’intera sezione dietro il titolo bianco. **Cover** ritaglia ciò che non entra, e **Center center** tiene in vista il centro della foto. Il colore navy si vede solo mentre la foto si carica o dove la foto non arriva. Il gradiente sfuma dal colore iniziale in alto al colore finale in basso. Sta sopra la foto. I colori opachi coprono del tutto la foto; i colori un po’ trasparenti la lasciano intravedere. ## Impostazioni ### Pannello Style (ogni sezione, riga, colonna ed elemento) | Impostazione | Cosa fa | Predefinito | |---|---|---| | **Background** | Un colore di riempimento dal selettore di colori o da un campione del tema | Nessuno | | **Background image** | Un’immagine dalla libreria dei media, scelta con **Select Image** | Nessuno | | **Background style** | **Cover** riempie l’elemento e ritaglia; **Contain** mostra l’intera immagine e può lasciare spazi; **No repeat** la mostra una volta alla sua dimensione; **Repeat** la ripete a mosaico | **Theme defaults** | | **Background position** | Quale parte dell’immagine resta in vista quando è ritagliata, come **Center center** o **Left top** | **Theme defaults** | Quando la generazione di immagini AI è configurata, **Background image** accetta anche un prompt. Vedi [Generazione di immagini AI](/it/hc/documentation/learn-dxpr-builder/ai/image-generation). ### Pannello Background effects (solo sezioni) | Effetto di sfondo | Cosa fa | Impostazioni extra | |---|---|---| | **Simple image** (predefinito) | La foto scorre con la pagina | Nessuno | | **Fixed image** | La foto resta ferma mentre la pagina le scorre sopra | Nessuno | | **Parallax image** | La foto si muove più lenta della pagina. Vedi [Sezione hero](/it/hc/documentazione/impara-dxpr-builder/tutorial/hero-section) per un esempio. | **Parallax speed**, **Parallax mode** (**Fixed** o **Local**), **Disable on mobile** | | **Gradient** | Due colori si fondono nella sezione, sopra la foto se ce n’è una | **Start color**, **End color**, **Gradient direction** (180 gradi va dall’alto in basso), **Start position**, **End position** | | **YouTube video** | Un video YouTube muto riempie la sezione; spunta **Loop** per ripeterlo | **YouTube video URL**, **Video options**, **Start time in seconds**, **Stop time in seconds** | Gli effetti fisso e parallasse muovono la foto impostata nel pannello **Style**. Un video YouTube non richiede foto. ## Se non vedi lo sfondo - **Non c’è il pannello Background effects.** Solo le sezioni lo hanno. Passa sopra la sezione, non una riga, colonna o elemento, e apri **More > Settings**. - **La foto è tagliata.** **Cover** ritaglia ciò che non entra nella sezione. Cambia **Background position** per tenere il soggetto in vista, oppure scegli **Contain**. - **Il gradiente nasconde la foto.** Il gradiente sta sopra, e i colori opachi coprono la foto. Abbassa l’opacità di **Start color** e **End color** nel selettore di colori. - **La sezione non mostra gradienti.** Un gradiente richiede entrambi i colori. Scegli uno **Start color** e un **End color**. - **Il video YouTube non si avvia.** **YouTube video URL** è vuoto o non è un link a un video. Incolla l’indirizzo completo del video, come `https://www.youtube.com/watch?v=` seguito dal suo ID. ## Prossimi passi - [Layout a larghezza intera](/it/hc/documentazione/impara-dxpr-builder/design/layout-a-larghezza-intera): lascia che sfondo e contenuto corrano da bordo a bordo. - [Scheda Animation](/it/hc/documentazione/impara-dxpr-builder/design/scheda-animazione): fai apparire il testo in dissolvenza mentre la sezione scorre in vista. - [Sezione hero](/it/hc/documentazione/impara-dxpr-builder/tutorial/hero-section): costruisci un header di pagina intera con una foto parallasse.