Immagini di sfondo di sezione

Aggiungere e personalizzare le immagini di sfondo per le sezioni delle pagine del proprio sito.

Ultimo aggiornamento 3 gennaio 2025

Esistono diversi modi per personalizzare lo sfondo del tuo sito. Puoi aggiungere immagini di sfondo alle sezioni della pagina e personalizzarle con una serie di effetti. È un modo fantastico per creare banner di pagina ed elementi visivi di grande impatto che si adattano al tuo marchio.

Questa guida spiega come aggiungere e personalizzare le foto e le altre immagini di sfondo caricate su Squarespace. Scopri tutte le opzioni per personalizzare lo sfondo in Personalizzare lo sfondo del sito.

Accesso a questa funzionalità

Questa guida si riferisce alla versione 7.1. Se il tuo sito è nella versione 7.0, puoi aggiungere immagini banner e video di sfondo per effetti simili, a seconda del modello.

Guarda un video

Prima di iniziare

  • I layout intelligenti, le sezioni portfolio e tutte le sezioni di blocco supportano l'aggiunta di immagini di sfondo. A queste sezioni puoi aggiungere anche video di sfondo e scenographik .
  • Non è possibile aggiungere immagini di sfondo alle sezioni della galleria, ma è possibile aggiungere un colore di sfondo o utilizzare il layout Slideshow: Full per ottenere un effetto simile.
  • Le sezioni blog, corso, eventi, negozio e video non supportano i contenuti di sfondo, ma puoi aggiungere un colore di sfondo.
  • Se la sezione comprende testi o contenuti d'altro tipo, assicurati che siano ancora visibili e leggibili una volta sovrapposti alla grafica dello sfondo. Per cambiare il colore del testo, usa i tweak per i tipi di caratteri nella combinazione di colori della sezione.
  • Le immagini di sfondo si ritagliano automaticamente in base alla quantità di contenuti della sezione e alle dimensioni dello schermo del browser del visitatore. Per scegliere come ritagliare un'immagine, utilizza un blocco immagine. Per sapere come vengono visualizzate le immagini di sfondo sui dispositivi mobili, visita Come viene visualizzato il mio sito sui dispositivi mobili?

Suggerimenti per la formattazione delle immagini

Prima di caricare immagini sul tuo sito, verificane il formato. Per le immagini di sfondo, segui queste linee guida:

  • Utilizza immagini di larghezza compresa tra 1500 e 2500 pixel.
  • Non utilizzare immagini che contengono del testo all'interno del file immagine. Piuttosto, aggiungi il testo sull'immagine.
  • Se vuoi aggiungere del testo sopra l'immagine, utilizza un'immagine con un motivo astratto.
  • Per i tipi di file immagine e ulteriori requisiti delle immagini, visita Formattare le immagini per la visualizzazione sul web.

Aggiungere immagini di sfondo

Utilizza un'immagine di sfondo per creare contrasto con il testo o altri contenuti sovrapposti alla sezione, o crea un banner quando la sezione è in cima alla pagina.

Per aggiungere un'immagine di sfondo di sezione:

  1. Apri il pannello Pagine e clicca sulla pagina contenente la sezione che desideri modificare.
  2. Nell'angolo in alto a sinistra, fai clic su Modifica.
  3. Passa il mouse sopra la sezione e clicca sull'icona della matita, quindi clicca su Sfondo.
  4. Fai clic su Immagine, quindi clicca su +. Scegli un'origine dal menu a discesa per caricare un'immagine, riutilizzare un'immagine caricata in precedenza, oppure utilizzare un'immagine o uno sfondo d'archivio.
  5. (Facoltativo) Clicca su Effetto immagine per selezionare un effetto immagine.
  6. (Facoltativo) Personalizza l'immagine con Larghezza sfondo e Opacità sovrapposizione.
  7. (Facoltativo) Clicca su Formato per modificare l'altezza della sezione, la larghezza del contenuto e il suo allineamento.
  8. (Facoltativo) Clicca su Colori per selezionare una combinazione di colori per la sovrapposizione e per eventuali contenuti aggiunti. Per maggiori informazioni, visita Modificare i colori. Se rimuovi l'immagine, la sovrapposizione diventa il colore di sfondo della sezione.
  9. Clicca su Salva per salvare il lavoro e continuare ad apportare modifiche, oppure clicca su Esci e poi su Salva per chiudere l'editor.

Dopo aver aggiunto un'immagine, puoi:

Aggiungere testo o altri contenuti

Puoi aggiungere testo o altri contenuti su un'immagine di sfondo. Poiché il testo aggiunto si adatta a qualsiasi dimensione dello schermo o dispositivo mobile, questo è un ottimo modo per aggiungere testo se utilizzi l'immagine di sfondo come banner.

Suggerimento

se desideri un messaggio di solo testo nella parte superiore del sito, aggiungi una barra degli annunci anziché un banner.

Non consigliamo l'utilizzo di un'immagine di sfondo che contenga del testo all'interno del file immagine per i seguenti motivi:

  • I computer non possono leggere questo testo, quindi non verrà indicizato dai motori di ricerca.
  • Quando l'immagine cambia forma per adattarsi alle larghezze diverse dei browser, parti del testo verranno tagliate.

Per aggiungere del testo o contenuti di altro tipo:

  1. Fai clic su Modifica nella pagina con l'immagine di sfondo.
  2. Clicca su Aggiungi blocco o su un punto di inserimento per aggiungere un blocco di testo. Clicca sul blocco per aggiungere del testo, quindi utilizza il menu a discesa Formato per scegliere uno stile di paragrafo.
  3. Aggiungi altri blocchi di testo o altri contenuti alla sezione (come un blocco pulsante).
  4. Clicca su Salva per salvare il lavoro e continuare ad apportare modifiche, oppure clicca su Esci e poi su Salva per chiudere l'editor.

Stili di testo

Le impostazioni di stile del sito nel pannello Design impostano la visualizzazione del testo sull'immagine di sfondo.

  • Per modificare i tipi di carattere del sito, scegli un pacchetto di tipi di caratteri e una dimensione di base nel pannello Tipi di carattere. Scorri fino ad Assegna stili a un testo specifico. Per ulteriori informazioni, visita Modifica dei tipi di caratteri.
  • Per modificare il colore del tipo di carattere, scegli una tavolozza e un tema nel pannello Colori . Clicca sull'icona della matita sul tema della sezione per definire lo stile di elementi specifici all'interno di esso. Per maggiori informazioni, visita Modificare i colori.

Guarda un video

Stile delle immagini di sfondo

Per modificare lo stile dell'immagine di sfondo, clicca Modifica sulla pagina, clicca sull'icona della matita sulla sezione del banner, e poi clicca su Sfondo. Puoi impostare la larghezza dello sfondo e l'opacità della sovrapposizione.

Larghezza sfondo

Per la larghezza dello sfondo:

  • L'opzione Smarginatura completa estende le dimensioni dell'immagine da un margine della finestra del browser all'altro, per l'intera larghezza del tuo sito. Questa è in genere l'impostazione utilizzata per le immagini dei banner.
  • Inset indenta leggermente l'immagine e crea un bordo attorno ad essa.

Quando l'immagine è impostata su Inset, è possibile modificarne il colore del bordo.

Opacità sovrapposizione

Opacità sovrapposizione imposta l'opacità della sovrapposizione di colore rispetto all'immagine di sfondo.

Non esiste una quantità giusta di opacità da utilizzare, quindi ti consigliamo di provare diverse impostazioni per capire cosa funziona. In generale, consigliamo una percentuale più alta se la sezione ha molti contenuti, in quanto può aiutare a mettere in risalto i contenuti rispetto all'immagine di sfondo.

Il colore dell'opacità è impostato dal tweak Sovrapposizione sfondo nel tema della sezione. Per maggiori informazioni, visita Modificare i colori.

Nota

se carichi un file .png con uno sfondo trasparente, il browser mostrerà sempre uno sfondo bianco dietro l'immagine. Per cambiare questo colore di sfondo, dovrai modificare l'immagine in un programma per modificare immagini di terze parti prima di caricarla sul tuo sito.

Ridimensionare le immagini di sfondo

Per modificare l'altezza dell'immagine di sfondo:

  1. Fai clic su Modifica nella pagina, quindi fai clic sull'icona matita nella sezione dell'immagine di sfondo.
  2. Nella scheda Formato, in Altezza sezione, seleziona un'altezza preimpostata o fai clic su ... per impostare un'altezza personalizzata. Se stai modificando una sezione di Editor fluido, puoi modificare l'altezza della griglia della sezione facendo clic e trascinando l'icona della freccia blu nell'angolo in basso a destra.
  3. Clicca su Salva per salvare il lavoro e continuare ad apportare modifiche, oppure clicca su Esci e poi su Salva per chiudere l'editor.

L'altezza della sezione influisce sul modo in cui l'immagine di sfondo viene ritagliata su computer e dispositivi mobili. Ti consigliamo di testare diverse altezze per ottenere l'effetto desiderato.

Nelle sezioni dell'editor classico, l'altezza dell'immagine di sfondo dipende anche dalla quantità di contenuto della sezione. Per aumentare l'altezza senza aggiungere contenuto visibile, aggiungi i blocchi spaziatori.

Anche se le immagini di sfondo solitamente abbracciano la larghezza del sito, è possibile modificare lo stile dell'immagine di sfondo per includere un bordo intorno ad essa. In questo modo la larghezza dell'immagine apparirà ridotta.

Aggiungi effetti all'immagine di sfondo

Dopo aver aggiunto un'immagine di sfondo, puoi aggiungere degli effetti per conferirle maggiore personalità. Alcuni effetti aggiungono un'animazione che fa apparire l'immagine in continuo movimento, altri compaiono solo quando il visitatore scorre quella sezione del sito.

Per aggiungere un effetto immagine:

  1. Dopo aver aggiunto un'immagine di sfondo nell'editor di sezione, clicca su Effetto immagine nella scheda Sfondo .
  2. Scegli un effetto dal menu. Per personalizzare l'effetto, fai clic sull'icona impostazioni per aprire il pannello dei dettagli. Tutte le modifiche apportate all'effetto appariranno nell'anteprima del sito. Per saperne di più sulle opzioni a tua disposizione, visita la sezione qui sotto.
  3. Clicca su Salva per salvare il lavoro e continuare ad apportare modifiche, oppure clicca su Esci e poi su Salva per chiudere l'editor.

Ricorda:

  • Gli effetti immagine vengono visualizzati solo su browser e dispositivi che supportano WebGL, una libreria grafica che funziona con il processore grafico del dispositivo. Per verificare se il tuo browser li supporta, visita get.webgl.org. Se un browser non supporta WebGL, lo sfondo della sezione rimane statico.
  • Gli effetti immagine non si applicano allo scenographik o ai video di sfondo, anche se il video utilizza un'immagine di fallback su dispositivi mobili.

Stili di effetto immagine

Puoi scegliere tra questi effetti immagine:

  • Nessuno: nessun effetto, a parte l'impostazione dell'opacità della sovrapposizione.
  • Liquido: dà all'immagine un effetto increspato
  • Grana della pellicola: aggiunge una sovrapposizione statica animata all'immagine.
  • Parallax : l'immagine si muove durante lo scorrimento dei visitatori.
  • Cerchi rifratti: rifrange l'immagine attraverso un modello di cerchi.
  • Linee rifratte: rifrange l'immagine attraverso un modello di linee rette.

Puoi personalizzare l'effetto dell'immagine nel pannello dei dettagli. Per aprire il pannello dei dettagli, fai clic su un effetto immagine, quindi fai clic sull'icona impostazioni .

L'icona delle impostazioni viene visualizzata quando fai clic su uno degli effetti immagine nell'editor di sezione

Scorri le opzioni e le impostazioni fino a trovare un motivo che ti piace. Clicca su una categoria per espandere il menu a discesa e visualizzare altre opzioni. A seconda del tipo di effetto immagine, compaiono diverse categorie.

Ad esempio, puoi:

  • Modificare le dimensioni e la forma dell'effetto.
  • Modificare la velocità e la direzione degli effetti con movimento, come Liquido.

Le altre impostazioni sono riservate a ciascun effetto immagine e comprendono cursori e levette che modificano gli elementi principali dell'effetto. Per effettuare delle prove con una combinazione casuale di impostazioni, clicca sull'icona mix quando scegli un effetto o clicca su Casuale nel pannello dei dettagli dell'effetto.

Consigliamo di testare ogni effetto per capire meglio come si presenta e come funziona per il tuo sito.

Ecco un esempio di immagine di sfondo di una sezione con l'effetto Liquido .

Section_background_image_with_the_Liquid_effect.gif

Rimuovere un'immagine di sfondo

Per rimuovere un'immagine di sfondo:

  1. Clicca su Modifica nella pagina, quindi clicca sull'icona della matita nella sezione del banner.
  2. Clicca su Sfondo.
  3. Clicca su Elimina.
  4. Clicca su Salva per salvare il lavoro e continuare ad apportare modifiche, oppure clicca su Esci e poi su Salva per chiudere l'editor.

Sfondi di sezione come banner

Una sezione con un'immagine di sfondo nella parte superiore della pagina può rappresentare un punto focale visivo per definire il tono dei tuoi contenuti. Un'immagine di questo tipo viene comunemente chiamata banner.

Le immagini banner in genere appaiono da sole, senza altri contenuti nella sezione, o con un semplice testo, come un titolo, sopra di esse. Puoi anche creare banner con altri tipi di sfondi, come video o elementi artistici, per conferire loro un'estetica diversa.

Sebbene tu possa utilizzarli in modo differente, i banner funzionano come qualsiasi sezione con un'immagine di sfondo, pertanto puoi seguire i passaggi di questa guida per:

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.