Aggiungere immagini di sfondo su tutte le pagine del sito nella versione 7.0

Crea un impatto visivo forte mostrando un'immagine dietro i contenuti del sito.

Ultimo aggiornamento 31 dicembre 2024

In alcuni siti in 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 nelle seguenti 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 con smarginatura completa, in modo da riempire la pagina completamente, fino ai bordi del browser. Se il tuo modello non supporta sfondi a livello di sito, scopri come creare sfondi specifici della pagina.

Accesso a questa funzionalità

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.

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 una larghezza compresa tra 1.500 pixel e 2.500 pixel. Se si verificano problemi di caricamento, ad esempio immagini di sfondo non caricate sui dispositivi mobili, prova a ridurre il lato più lungo di tutte le immagini a 1.500 pixel. Ciò aumenterà la velocità di caricamento mantenendo comunque la qualità dell'immagine.
  • 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 modello.

Aggiungere l'immagine

Per aggiungere uno sfondo su tutte le pagine del sito:

  1. Apri il pannello Design, quindi fai clic 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 sullo strumento di caricamento o trascina l'immagine nello strumento di caricamento. 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.
  • Copertina - Modifica le dimensioni dell'immagine per coprire completamente l'area di sfondo (a smarginatura completa). Di conseguenza, l'immagine completa potrebbe non essere visualizzata. L'immagine può apparire diversa su ogni pagina in base all'altezza del contenuto.
  • Contieni - 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:

  • In alto a sinistra, In alto al centro, In alto a destra
  • Centro-sinistra, Centro-centro, Centro-destra
  • In basso a sinistra, In basso al centro, 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 in scorrimento. 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 un dispositivo mobile dopo aver salvato le modifiche sul computer. Per un'anteprima rapida durante le modifiche sul computer, 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: Automatica)

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 smarginatura completa, 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 in tutto il sito 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 maggiori informazioni, visita Aggiungere codice personalizzato al sito.

Visualizzazione su dispositivi mobili

Di seguito scoprirai come utilizzare i tweak di stile per correggere i problemi più comuni di visualizzazione sui dispositivi mobili. Poiché non esistono tweak specifici per dispositivi mobili e computer, 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 computer.) 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 modello Montauk:

  • Size: Cover (Dimensione: Copertina)
  • Fixed position (Posizione fissa)
  • Colore di sfondo canvas impostato su parzialmente opaco
Esempio di un'immagine di sfondo sul modello Montauk.

Di seguito un esempio sul modello Forte:

  • Size: Auto (Dimensione: Auto)
  • Repeat: Repeat (Ripetizione: Ripetizione)
Esempio di un'immagine di sfondo sul modello Forte.

Di seguito un esempio sul modello 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 in tutto il 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.
Footer Image
  • Ricevi assistenza dalla nostra community

  • Ricevi assistenza dalla nostra community in merito alle personalizzazioni avanzate.

  • Affidati a uno Squarespace Expert

  • Fatti notare online con l'aiuto di un designer o di uno sviluppatore esperto.

Aggiungere immagini di sfondo su tutte le pagine del sito nella versione 7.0