Mettere un colore o una foto dietro il contenuto.
Dai a una fascia della tua pagina un colore del brand o una foto, così un titolo risalta e la fascia si legge come un unico blocco. Imposti il colore e la foto nel pannello Stile di qualsiasi elemento. Una Sezione aggiunge un pannello Effetti di sfondo per una foto fissa, parallasse, un gradiente o un video YouTube.
Il video segue la ricetta sotto: mette una foto dietro un titolo e un gradiente scuro sopra la foto, così il titolo bianco resta leggibile.
Prima di iniziare
- Apri la pagina in DXPR Builder; indicare un elemento mostra la sua barra di controllo con Altro. È la prima volta che usi il page builder? Vedi La tua prima pagina.
- Salva nella finestra mantiene una modifica nell’editor. Salva nella barra degli strumenti del page builder sopra i tuoi contenuti memorizza la pagina e mostra “Campo salvato”.
- Usa una Sezione per una fascia intera della pagina. Solo una Sezione ha Effetti di sfondo.
- Usa un elemento Testo o Card per un riquadro colorato dietro poche righe dentro una colonna.
- Usa il tuo tema per sfondi su ogni pagina, come il corpo della pagina o il footer.
- Tieni le parole fuori dalla foto. Un’immagine di sfondo non ha testo alternativo, quindi gli screen reader la saltano. Metti il tuo messaggio in un titolo sopra.
Ricetta: un titolo leggibile su una foto
Il testo bianco su una foto affollata è difficile da leggere. Un gradiente scuro sopra la foto risolve il problema, e continua a funzionare quando scambi la foto. Ti serve una Sezione che contiene il tuo titolo in un elemento Testo.
- Passa sopra la Sezione, fai clic su Altro, poi Impostazioni.
- Apri il pannello Stile e fai clic su Seleziona immagine sotto Immagine di sfondo. Scegli una foto. Appare una miniatura, con un elenco di dimensioni immagine.
- Nell’elenco di dimensioni immagine, scegli una dimensione almeno larga quanto lo schermo più largo per cui progetti, o Immagine originale (Nessun ridimensionamento). Evita Ottimizza per caricamento veloce per una fascia intera.
- Imposta Stile sfondo su Cover e Posizione sfondo su Center center.
- Apri il pannello Effetti di sfondo e imposta Effetto di sfondo su Gradiente. La tua foto resta; il gradiente sta sopra di essa.
- Nel campo colore di Colore iniziale, digita
rgba(0, 0, 0, 0.6): nero al 60%. Digitargba(0, 0, 0, 0.3)per Colore finale. Lascia Direzione gradiente a 180, così il velo va dall’alto in basso. - Fai clic su Salva nella finestra. La sezione mostra la foto sotto un velo scuro.
- Passa sopra l’elemento Testo, fai clic su Altro, poi Impostazioni. Nel suo pannello Stile, imposta Colore carattere su bianco e fai clic su Salva.
- Fai clic su Salva nella barra degli strumenti.
Controlla il titolo contro la parte più chiara della foto. Punta a un contrasto di almeno 4,5 a 1, o 3 a 1 per titoli grandi; la pagina tipografia spiega questi obiettivi. Ancora difficile da leggere? Alza entrambi i valori, ad esempio a 0,8 e 0,5.
Cosa vedi
La sezione mostra la tua foto sotto un velo scuro, più scuro in cima, con il titolo bianco sopra. Cover riempie l’intera sezione, così su uno schermo stretto vengono tagliati di più i lati della foto.
Come funzionano le impostazioni
| Controllo | Cosa fa |
|---|---|
| Sfondo | Un colore dietro il contenuto. Il cursore di opacità del selettore lo rende trasparente. |
| Immagine di sfondo | Un’immagine dietro il contenuto: da Seleziona immagine, da un URL, o da Generazione immagini AI a meno che il tuo sito l’abbia disattivata. |
| Stile sfondo | Come l’immagine riempie l’elemento. Vedi la prossima tabella. |
| Posizione sfondo | Il punto a cui l’immagine è fissata. Con Cover, decide quale parte della foto resta visibile. |
| Stile sfondo | Risultato |
|---|---|
| Predefiniti del tema | A meno che il tuo tema dica diversamente, l’immagine si ripete alla sua dimensione dall’angolo in alto a sinistra. |
| Cover | L’immagine riempie l’elemento e i bordi che non ci stanno sono tagliati. Ideale per foto. |
| Contain | L’intera immagine si mostra, una volta. Possono restare fasce vuote su due lati. Ideale per loghi. |
| No repeat | Una copia alla sua dimensione. |
| Repeat | L’immagine si ripete a piastrelle attraverso l’elemento. Buono per motivi. |
Il colore sta sotto l’immagine. Si mostra attraverso le parti trasparenti di un’immagine, nelle fasce intorno a un’immagine Contain, e mentre la foto si carica. Scegli un colore vicino al tono principale della foto.
La dimensione Ottimizza per caricamento veloce riduce un’immagine a un massimo di 1024 px di larghezza e la salva come WebP. Va bene per un riquadro, ma sembra sfocata su una fascia intera su uno schermo grande.
La stessa immagine si carica su ogni dimensione dello schermo, telefoni inclusi. Il pannello Stile hover ha il suo Sfondo e Immagine di sfondo, così un riquadro può cambiare colore o scambiare la sua immagine al passaggio del mouse.
Effetti di sfondo della sezione
Questi effetti hanno bisogno di una Sezione. Immagine fissa e Immagine parallasse spostano la foto da Immagine di sfondo, quindi imposta prima la foto.
| Effetto di sfondo | Cosa vedono i visitatori | Impostazioni |
|---|---|---|
| Immagine semplice | La foto scorre con la pagina. Questo è il predefinito. | nessuna |
| Immagine fissa | La foto resta ferma mentre il contenuto scorre sopra di essa. | nessuna |
| Immagine parallasse | La foto scorre più lentamente del contenuto. | Velocità parallasse (da 0 a 100; scegliere Immagine parallasse imposta 20 quando è 0), Modalità parallasse (Fisso o Locale), Disabilita su mobile (schermi sotto 481 px di larghezza) |
| Gradiente | Una miscela di due colori, usata da sé o sopra la foto. | Colore iniziale, Colore finale, Direzione gradiente (da 1 a 360 gradi; 180 va dall’alto in basso), Posizione iniziale, Posizione finale |
| Video YouTube | Un video silenziato viene riprodotto mentre la sezione è sullo schermo e si mette in pausa quando scorre via. | URL video YouTube, Tempo iniziale in secondi, Tempo finale in secondi, Opzioni video |
Sopra una foto, il gradiente va sempre da bordo a bordo. Posizione iniziale e Posizione finale si applicano solo a un gradiente senza foto.
Se non vedi lo sfondo
- La foto si mostra come una striscia sottile. Uno sfondo non aggiunge altezza; la sezione è alta quanto il suo contenuto e padding. Aggiungi contenuto, o attiva Altezza 100% nel pannello Generale. Per più padding, segui una sezione più alta.
- La foto si ripete o mostra solo un angolo. Stile sfondo è su Predefiniti del tema. Scegli Cover.
- La foto sembra sfocata su uno schermo largo. Ottimizza per caricamento veloce la rende al massimo 1024 px di larghezza. Scegli una dimensione più larga nell’elenco di dimensioni immagine.
- La foto è nascosta dietro nero solido. I colori del gradiente non hanno trasparenza. Termina ogni valore con un numero sotto 1, come
rgba(0, 0, 0, 0.6). - Il titolo resta scuro. Una classe di colore sotto le Classi HTML dell’elemento Testo, o una regola del tema con
!important, vince. Rimuovi il chip, o vedi tipografia. - Lo sfondo è sparito dopo un ricaricamento della pagina. Salva nella finestra mantiene una modifica solo nell’editor. Fai clic su Salva nella barra degli strumenti.
- Il colore non si mostra. La foto lo copre. Per una tinta sopra la foto, usa Gradiente in Effetti di sfondo.
- Posizione iniziale e Posizione finale non cambiano niente. La sezione ha un’Immagine di sfondo, quindi il gradiente va da bordo a bordo. Usa invece Direzione gradiente e colori trasparenti.
- Vince un colore di classe. Una classe come Sfondo Primary sotto Classi HTML batte il tuo Sfondo. Rimuovi il suo chip.
- Sfondo non fa niente su un Contatore circolare, Barra di avanzamento o Divisore. Questi elementi usano i loro colori. Imposta Colore sfondo, Colore posteriore o Colore nel pannello Generale.
Passi successivi
- Tipografia: imposta il colore del titolo sulla tua foto e controlla il suo contrasto.