Riempi una sezione di colore, foto o gradiente.

Impara DXPR BuilderCrea le pagineDai stile agli elementiGuide di design

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.

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 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