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

In alcuni siti della versione 7.0 puoi aggiungere un'immagine di sfondo da visualizzare dietro il contenuto del sito, creando un elemento visivo che contribuirà a definirne lo stile. Puoi aggiungere immagini di sfondo in tutte le pagine del sito in queste famiglie di modelli:

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

Tutte le immagini di sfondo possono essere impostate per essere visualizzate a schermo intero, in modo da riempire la pagina interamente, fino ai bordi del browser. Se il tuo modello 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 tutte le pagine del sito, ma puoi aggiungere immagini di sfondo che vengono visualizzate dietro il contenuto del sito nella maggior parte delle sezioni di pagina.

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:

  • Ti consigliamo di caricare immagini con larghezza compresa tra 1500 e 2500 pixel. 
  • Le immagini di sfondo con smarginatura completa spesso vengono ritagliate in modo diverso su un dispositivo mobile rispetto a quanto accade su computer. Puoi scegliere un'immagine di sfondo che può essere ritagliata in modi diversi.
  • Motivi astratti, immagini senza testo o bordi e motivi ripetuti solitamente funzionano meglio perché offrono maggiore flessibilità di ritaglio.
  • Le immagini di sfondo non verranno trasferite se cambi template.

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.
  3. Per aggiungere un file dal computer, clicca sull'uploader o trascina l'immagine nell'uploader. Clicca su Cerca immagine per riutilizzare un'immagine o aggiungere un'immagine di archivio.
  4. Modifica l'immagine, quindi clicca su Salva per pubblicare le modifiche.

In Adirondack, il tweak ha l'aspetto seguente:

background-image-tweak.png

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.
  • È possibile che venga visualizzato un colore di sfondo o di sovrapposizione durante il caricamento di un'immagine di sfondo.

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 desktop, utilizza Vista dispositivo.

Poiché l'immagine si adatta alla schermata del browser più lunga e stretta di un dispositivo mobile, potrebbero verificarsi ritagli o distorsioni. Per ridurre al minimo il ritaglio puoi agire come segue:

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 il tweak 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 qualsiasi codice personalizzato per verificare se il problema è correlato al codice. Per maggiori informazioni, visita Aggiungere codice personalizzato al sito.

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 potrebbero non essere visualizzate. Nella famiglia Aviator, 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.

  • 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.
  • Pagine di copertina - Le Pagine di copertina sono disponibili in tutti i modelli della versione 7.0 e supportano testo, pulsanti, intestazioni, loghi 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.
  • 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: 51 su 377
Aggiungere immagini di sfondo su tutte le pagine del sito