Nota: Sebbene le nostre guide più popolari siano state tradotte in italiano, alcune guide sono disponibili solo in inglese.

Aggiungere immagini di sfondo su tutte le pagine del sito

Le immagini di sfondo vengono visualizzate dietro il contenuto del sito, aggiungendo un elemento visivo per trasmettere lo stile del tuo sito. Puoi aggiungere immagini di sfondo in tutte le pagine del sito nelle seguenti famiglie di modelli:

  • Adirondack
  • Avenue
  • Aviator - La Pagina informazioni supporta anche un'immagine di sfondo specifica della pagina.
  • Five
  • Forte
  • Momentum
  • Montauk
  • Native

Tutte le immagini di sfondo possono essere impostate con smarginatura completa, in modo da riempire la pagina completamente, fino ai bordi del browser.

Suggerimento: Se il tuo template non supporta sfondi a livello di sito, scopri come creare sfondi specifici della pagina.
La versione 7.1 non supporta le immagini di sfondo in tutto il sito.

Guarda un video

Linee guida

Il tipo di immagine scelta dipende dal tuo gusto personale e dagli obiettivi del sito, ma di seguito troverai alcune linee guida generali:

  • Per le immagini di sfondo a schermo intero, ti consigliamo di caricare immagini con larghezza compresa tra 1500 e 2500 pixel.
  • Motivi astratti e immagini senza testo o bordi solitamente funzionano meglio, perché offrono maggiore flessibilità di ritaglio.
  • Motivi ripetuti offrono la massima flessibilità al momento della definizione dello stile dell'immagine.
  • Le immagini di sfondo non verranno trasferite se cambi template.

Forma dell'immagine

Le immagini di sfondo a schermo intero spesso vengono ritagliate in modo diverso su un dispositivo mobile rispetto a quanto accade su desktop, poiché su mobile le immagini sono solitamente visualizzate con orientamento verticale.

Quando scegli un'immagine di sfondo, considera il modo in cui i visitatori accederanno al tuo sito:

  • Se prevedi che la maggior parte dei visitatori visualizzerà il tuo sito utilizzando dispositivi mobili, puoi ridurre al minimo eventuali problemi di ritaglio scegliendo un'immagine di sfondo più stretta.
  • Se prevedi che la maggior parte dei visitatori accederà al sito su desktop, utilizza un'immagine orientata in orizzontale o quadrata.
  • Per siti utilizzati sia su dispositivi mobili che su desktop, scegli un'immagine di sfondo che può essere ritagliata in diversi modi.

Aggiungere l'immagine

Per aggiungere uno sfondo su tutte le pagine del sito:

  1. Nel Menu Home, clicca su Design, quindi su Stili sito.
  2. Cerca un tweak chiamato Immagine di sfondo, Immagine di sfondo del sito o Immagine di sfondo pagina. Clicca sul tweak per aprirlo e aggiungi la tua immagine.
  3. Modifica l'immagine, quindi clicca su Salva per pubblicare le modifiche.

In Adirondack, il tweak ha l'aspetto seguente:

background-image-tweak.png

Aggiungere immagini

Per utilizzare una delle tue immagini, trascina l'immagine nell'apposito strumento di caricamento. Puoi anche:

Definire lo stile e ritagliare l'immagine

Dopo aver aggiunto l'immagine di sfondo, utilizza le opzioni sotto lo strumento di caricamento per definire lo stile dell'immagine e correggere eventuali tagli o distorsioni.

Size (Dimensione)
  • Auto - L'immagine conserva larghezza e altezza originali. È consigliabile utilizzare questa opzione per immagini più piccole che desideri ripetere.
  • Cover (Copertina) - Modifica le dimensioni dell'immagine per coprire completamente l'area di sfondo (a schermo intero). Di conseguenza, l'immagine completa potrebbe non essere visualizzata. L'immagine può apparire diversa su ogni pagina in base all'altezza del contenuto.
  • Contiene - Modifica le dimensioni dell'immagine in modo che il bordo più lungo (larghezza o altezza) rientri nel browser.

Per Auto o Contain (Contiene), il colore di sfondo del sito può essere visualizzato dietro l'immagine. Utilizza le opzioni Repeat (Ripetizione) per regolare questa impostazione.

Position (Posizione)

Imposta la posizione dell'immagine di sfondo:

  • Top Left (In alto a sinistra), Top Center (in alto al centro), Top Right (in alto a destra)
  • Center Left (Centro Sinistra), Center Center (Centro, Centro), Center Right (Centro Destra)
  • Bottom Left (in basso a sinistra), Bottom Center (in basso al centro), Bottom Right (in basso a destra)
Repeat (Ripetizione)

Verifica che Dimensione sia impostata su Auto o su Contiene.

    • No-repeat (Nessuna ripetizione) - Visualizza l'immagine solo una volta.
    • Repeat (Ripetizione) - Ripete l'immagine in modo da coprire l'intero sfondo.
    • Repeat-X  (Ripetizione X) - Ripete l'immagine solo sull'asse orizzontale. 
    • Repeat-Y  (Ripetizione Y) - Ripete l'immagine solo sull'asse verticale.  

Per No-repeat (Nessuna ripetizione), Repeat-X (Ripetizione X) e Repeat-Y (Ripetizione Y), utilizza le opzioni Position (Posizione) per regolare ulteriormente la visualizzazione dell'immagine.

Fix Position (Posizione fissa)

Quando selezionata, la posizione dell'immagine rimane fissa dietro il contenuto che scorre. Quando deselezionata, l'immagine scorre in alto e in basso con la pagina.

Su molti browser per dispositivi mobili, tra cui iOS, questa funzione non ha effetto e l'immagine si muove allo scorrere della pagina.

Definire lo stile di altre aree del sito

La parte dell'immagine di sfondo visualizzata dipende da come hai impostato gli altri elementi del sito. Le opzioni di stile e i nomi dei tweak variano da modello a modello, ma utilizza Stili sito per fare qualche prova con alcune o tutte le seguenti aree del tuo sito:

  • Sfondo area contenuto principale (o "canvas")
  • Sfondo intestazione
  • Sfondo piè di pagina
  • Larghezza del sito e larghezza del contenuto

Ricorda:

  • Puoi impostare colori di sfondo parzialmente opachi in modo che l'immagine di sfondo sia visibile.
  • Un colore di sfondo o di sovrapposizione può essere visualizzato mentre viene caricata un'immagine di sfondo o banner.

Visualizzare il tuo sito su un dispositivo mobile

La stessa immagine di sfondo viene visualizzata su computer e su dispositivi mobili. Per osservarne l'effetto, ti consigliamo di tenere a portata di mano un telefono e visitare il sito da dispositivo mobile dopo aver salvato le modifiche sul computer. Per un'anteprima rapida durante le modifiche su computer, utilizza Anteprima dispositivi.

Suggerimenti:

Risoluzione dei problemi

L'immagine di sfondo è distorta su alcune pagine o su dispositivi mobili

Questo problema si verifica quando l'immagine di sfondo viene allungata per coprire la lunghezza della finestra del browser. Questo accade specialmente nelle Pagine del blog o nelle Pagine eventi impostate sulla visualizzazione Elenco, in quanto sono solitamente più lunghe di altre pagine e studiate per dispositivi mobili, dove il contenuto della pagina viene impilato verticalmente. Più alto è il contenuto della pagina, più allungato e ingrandito dovrà essere lo sfondo per coprirlo completamente.

Per risolvere questo problema, apri l'opzione per l'immagine di sfondo ( Step 3 sopra) e prova a utilizzare una o entrambe queste opzioni:

  • Seleziona Fix position (Posizione fissa) (non ha effetto su alcuni dispositivi mobili, tra cui i dispositivi iOS)
  • Seleziona Size: Contain (Dimensione: Contiene) o Size: Auto (Dimensione: Auto)

Puoi anche testare le diverse opzioni di posizione per vedere la versione che ridimensiona meglio il contenuto su pagine lunghe e dispositivi mobili.

La mia immagine è sfocata o sgranata

Questo problema si verifica quando un'immagine viene allungata oltre le sue dimensioni originali per riempire l'area di sfondo.

Per immagini a schermo intero, ti consigliamo di caricare immagini di larghezza compresa tra 1500 e 2500 pixel per la maggior parte dei siti.

Nota: Non è consigliabile caricare immagini di sfondo di più di 2500 pixel sul bordo più lungo. Le immagini di sfondo caricano sempre la dimensione originale dell'immagine. Se l'immagine di sfondo è più larga di 2500 pixel, potrebbero verificarsi problemi per i visitatori.

Immagini di sfondo e codice

Il codice personalizzato aggiunto al tuo sito può interferire con la visualizzazione dell'immagine di sfondo. Se stai tentando di risolvere problemi con la tua immagine di sfondo, disattiva temporaneamente il codice per vedere se il problema è correlato al codice. Per ulteriori informazioni, visita Aggiungere HTML, CSS e JavaScript personalizzato.

Visualizzazione su dispositivi mobili

Di seguito scoprirai come utilizzare le opzioni di stile per correggere problemi di visualizzazione su dispositivi mobili. Poiché non esistono opzioni di stile specifiche per dispositivi mobili e desktop, ti consigliamo di provare diverse opzioni per individuare quelle più adatte alle tue esigenze.

  • Immagine ingrandita o distorta - Imposta l'immagine su Size: Contain (Dimensione: Contiene) o Size: Auto (Dimensione: Automatica). Potrebbe anche essere necessario caricare un'immagine più grande, fino a 2500 pixel sul lato più lungo.
  • La dimensione dell'immagine di sfondo cambia a seconda delle pagine - Imposta l'immagine su Size: Contain (Dimensione: Contiene) o Size: Auto (Dimensione: Automatica).
  • Immagine centrata in modo non corretto - Utilizza le opzioni Position (Posizione) per regolare la visualizzazione dell'immagine sulla pagina.
  • Immagine di sfondo non visualizzata - Il colore di sfondo del contenuto principale potrebbe coprire l'immagine. Regola la trasparenza per visualizzare l'immagine di sfondo. (Questo avrà effetto anche sulla visualizzazione desktop.) Verifica che l'immagine originale sia inferiore a 2500 pixel sul lato più lungo, perché immagini più grandi non possono essere visualizzate. Nella Aviator family, verifica che il tweak Immagine di sfondo per dispositivi mobili sia selezionato.
  • Immagine non copre interamente il contenitore - Seleziona Size: Auto (Dimensione: Automatica) o Size: Contain (Dimensione: Contiene) e Repeat (Ripeti) l'immagine per coprire tutte le aree vuote.

Esempi

Prova le diverse opzioni di stile dell'immagine di sfondo per trovare la disposizione perfetta. Abbiamo incluso alcuni esempi di seguito da cui puoi prendere spunto.

Di seguito un esempio sul template Montauk:

  • Size: Cover (Dimensione: Copertina)
  • Fixed position (Posizione fissa)
  • Canvas Background (Sfondo canvas) colore impostato su parzialmente opaco

Esempio di un'immagine di sfondo sul modello Montauk.

Di seguito un esempio sul template Forte:

  • Size: Auto (Dimensione: Auto)
  • Repeat: Repeat (Ripetizione: Ripetizione)

Esempio di un'immagine di sfondo sul modello Forte.

Di seguito un esempio sul template Native:

  • Position: Top Left (Posizione: In alto a sinistra)
  • Size: Auto (Dimensione: Auto), Repeat-Y (Ripetizione Y)
  • Colore di sfondo sito: Blu

Esempio di un'immagine di sfondo sul modello Native.

Di seguito il modello Aviator, che mostra gli sfondi a livello di sito e quelli specifici della Pagina informazioni:

Sfondi specifici per Pagina introduzione e sito nel modello Aviator.

Aggiungere immagini di sfondo specifiche della pagina

Esistono diversi metodi per creare un'immagine di sfondo su una sola pagina.

  • Copertine - Le Copertine sono disponibili in ogni template e supportano testo, pulsanti, intestazioni, logo e moduli. Sono costituite da una pagina separata con opzioni di stile specifiche e non mostrano intestazione di sito, navigazione o piè di pagina. Per questo motivo, sono la scelta migliore se desideri mettere in evidenza una pagina.
  • Banner - Alcuni modelli supportano immagini banner, che appaiono in alto nella pagina e possono supportare una sovrapposizione di contenuto. Nella Brine family, puoi utilizzare blocchi in un'area introduttiva per aggiungere molti tipi diversi di contenuto sul banner.
  • Sezione Pagina indice - Nelle famiglie di modelli Brine e Pacific, puoi utilizzare un Indice per aggiungere un'immagine di sfondo dietro una sezione di Pagina di layout.
Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 43 su 318
Aggiungere immagini di sfondo su tutte le pagine del sito