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

Aggiungere immagini banner

Un'immagine banner viene visualizzata nella parte superiore della pagina, aggiungendo un elemento visivo che dà il giusto tono al tuo sito. Questa guida descrive gli step per aggiungere e definire lo stile delle immagini banner.

Suggerimento: in alternativa alle nostre opzioni integrate, puoi aggiungere un Blocco immagine nella parte superiore di una Pagina di layout su qualsiasi sito Squarespace.

Suggerimenti per la formattazione dell'immagine

  • Ti consigliamo di caricare immagini con una larghezza di almeno 1500 pixel. Per consigli su come scegliere un'immagine che venga visualizzata al meglio in tutti i browser, consulta i nostri suggerimenti per responsive design.
  • Non è consigliabile utilizzare un'immagine che contiene del testo all'interno del file immagine. Piuttosto, aggiungi il testo sull'immagine.
  • Puoi utilizzare file immagine .jpg, .png e .gif. Per i requisiti completi delle immagini, visita Formattare le immagini per il web.
  • Se desideri un messaggio di solo testo nella parte superiore del sito, aggiungi invece una barra degli annunci.

Aggiungere un'immagine banner

Il modo in cui aggiungi le immagini banner e i layout che puoi creare con loro dipende dalla versione del sito.

Puoi creare immagini banner su qualsiasi pagina aggiungendo una sezione blocco con un'immagine di sfondo nella parte superiore della pagina. Non è possibile aggiungere immagini banner a singoli post del blog, eventi o prodotti.

Per aggiungere un'immagine banner:

  1. Nel Menu Home, clicca su Pagine, quindi clicca sulla pagina.
  2. Nell'angolo in alto a sinistra, fai clic su Modifica.
  3. Clicca su + nella parte superiore della pagina per aggiungere una sezione. Scegli Aggiungi vuoto se vuoi solo un'immagine banner senza sovrapposizione di contenuto.
  4. Clicca sull'icona della matita della nuova sezione, quindi clicca su Sfondo.
  5. Clicca su Aggiungi immagine per caricare un'immagine oppure clicca su Cerca immagini per riutilizzare un'immagine o aggiungere un'immagine di archivio. Per aggiungere invece un video, visita Aggiungere video di sfondo.
  6. Imposta la larghezza dello sfondo e l'opacità della sovrapposizione.
  7. Clicca su Formato per regolare l'altezza della sezione, la larghezza e l'allineamento del contenuto.
  8. Clicca su Coloriper selezionare un tema di colore per la sovrapposizione e per qualsiasi contenuto aggiunto.

Puoi aggiungere contenuti sovrapposti al banner o aggiungere altre sezioni per il contenuto della pagina sotto. Dopo aver apportato le modifiche, passa il mouse su Fatto e clicca su Salva.

Modelli diversi supportano tipi diversi di immagini banner:

  • Banner di Pagina - Visualizzato nella parte superiore di pagine individuali. Aggiunto come immagine di anteprima della pagina.
  • I banner di elementi della raccolta vengono visualizzati nella parte superiore di post, prodotti ed eventi individuali. Aggiunto come immagine di anteprima dell'elemento.
  • Banner del sito - Può essere visualizzato su ogni pagina. Aggiunto in Stili sito.

Puoi anche fare riferimento alla tabella comparativa delle opzioni dei banner in base al template.

Aggiungere un banner di pagina

Per aggiungere un banner di pagina:

  1. Nel Menu Home, fai clic su Pagine.
  2. Passa il mouse sul titolo della pagina e clicca su l'icona dell'ingranaggio, quindi clicca su Media.
  3. Clicca su Aggiungi immagine per caricare un'immagine dal computer oppure clicca su Cerca immagini per riutilizzare un'immagineaggiungere un'immagine di archivio. Alcuni modelli supportano anche banner video.
  4. Clicca e trascina il punto focale per impostare il punto centrale dell'immagine. Questa opzione è ideale in caso di eventuali problemi di ritaglio nella maggior parte dei template.
  5. Clicca su Save (Salva) per pubblicare le modifiche.
  6. Utilizza Stili sito per definire lo stile del banner.

Per modificare un banner esistente, passa il mouse sulla pagina e clicca su Banner o riapri le Impostazioni pagina con l'icona dell'ingranaggio.

Per maggiori informazioni su quali modelli supportano i banner di pagina, fai riferimento all'articolo Opzioni banner per modello.

Aggiungere un banner ad elementi della raccolta

I banner di elementi della raccolta vengono visualizzati nella parte superiore di post, prodotti ed eventi individuali.

Per aggiungere un banner a questi elementi, apri l'editor e aggiungi un'immagine di anteprima nella scheda Options (Opzioni). Per maggiori informazioni, visita Aggiungere immagini di anteprima.

Alcuni elementi della raccolta visualizzano invece i banner di pagina. Ad esempio, un post del blog potrebbe visualizzare il banner della Pagina blog. Per maggiori informazioni sui modelli che supportano i banner di elementi della raccolta, vedi Opzioni banner in base al modello.

Aggiungere un banner del sito

I banner del sito sono disponibili nel modello Five e in alcuni modelli sospesi. Vengono visualizzati sulle pagine che non dispongono di un banner di pagina.

Per aggiungere un banner su tutte le pagine del sito, clicca sul relativo tweak di stile in Stili sito. 

  • Nel modello Five, il tweak è Immagine di sfondo dell'intestazione
  • Nei modelli sospesi, il tweak può avere un nome diverso.

Dopo aver aggiunto l'immagine, modificala con le opzioni visualizzate.

Nota: I banner del sito non devono mai essere più grandi di 2500 pixel, per evitare problemi di visualizzazione su dispositivi mobili.

Le seguenti famiglie di modelli supportano uno o più tipi di banner:

Famiglia di modelli

Pagine

Banner video

Elementi della raccolta

Altre opzioni

Adirondack

Layout
Blog
Eventi
Prodotti

Post
Eventi
Prodotti

Effetto dissolvenza su scorrimento

Bedford

Layout
Album
Blog
Eventi
Indice
Prodotti

Post
Eventi

I banner possono essere visualizzati dietro l'intestazione

Banner slideshow

Banner impilati in un Indice

Banner slideshow della Pagina Blog

Brine

Layout
Album
Blog
Eventi
Galleria
Indice
Prodotti

n/a

I banner possono essere visualizzati dietro l'intestazione

Banner slideshow

Banner impilati in un Indice

Scorrimento Parallax

Farro n/a No Post n/a

Five

Layout
Album
Blog
Eventi
Galleria
Prodotti

I banner di pagina appaiono su post, eventi, prodotti

Banner del sito

Titolo del sito, logo e tagline possono essere sovrapposti ai banner

Montauk

Layout
Blog
Eventi
Indice

I banner di pagina appaiono su post, eventi

I banner non vengono ritagliati verticalmente

Pacific

Layout
Album
Blog
Eventi
Galleria
Indice
Prodotti

n/a

I banner possono essere visualizzati dietro l'intestazione

Banner slideshow

Banner impilati in un Indice

Banner non ritagliati

Skye n/a No Post n/a

Supply

Layout
Blog
Album
Eventi

No

Post
Eventi

I banner appaiono a destra, eccetto su dispositivi mobili.

Tremont

Layout
Album
Blog
Eventi
Galleria
Prodotti

n/a 

I banner possono essere visualizzati dietro l'intestazione

Sovrapposizioni di pagina

York

Layout
Album
Blog
Eventi
Galleria
Indice
Prodotti
Progetto

No n/a

Banner Indice

Effetto dissolvenza

Aggiungere testo a un banner

A seconda del sito, puoi aggiungere del testo o altro contenuto sovrapposto alle immagini banner. Poiché il testo che aggiungi si adatta a qualsiasi dimensione dello schermo o dispositivo mobile, si tratta di un ottimo modo per aggiungere testo al banner.

Non consigliamo l'utilizzo di un banner 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 il banner cambia forma per adattarsi alle diverse larghezze del browser, parti del testo verranno ritagliate.

Il modo per aggiungere testo al banner dipende dalla versione del sito.

Per aggiungere del testo o contenuti di altro tipo:

  1. Clicca su Modifica nella pagina con il banner.
  2. Se hai aggiunto una sezione vuota, questa include già un Blocco di testo. Clicca sul blocco per aggiungere il testo, quindi utilizza il menu a discesa Formato per scegliere uno stile di paragrafo.
  3. Clicca su un punto di inserimento per aggiungere altri Blocchi di testo o altro contenuto.
  4. Passa il mouse su Fatto e clicca su Salva.

Modelli diversi supportano tipi diversi di sovrapposizioni di testo:

Per maggiori informazioni su quali modelli supportano i vari tipi di testo in sovrapposizione, vedi Opzioni di testo per banner in base al modello.

Aggiungere testo overlay all'area Intro

I modelli della Brine family supportano un'area Introduzione che viene visualizzata sopra il banner. Puoi personalizzare quest'area con blocchi, ad esempio un Blocco di testo o un Blocco Pulsante

Aggiungi un titolo e una descrizione di pagina

Nella maggior parte dei modelli, il titolo e la descrizione della pagina vengono visualizzati sopra i banner di pagina. Per aggiungere testo a un banner nei modelli:

  1. Nel Menu Home, fai clic su Pagine.
  2. Passa il mouse sul titolo della pagina nel pannello sinistro e clicca su l'icona dell'ingranaggio.
  3. Aggiungi il testo ai campi Titolo pagina e Descrizionepagina nella scheda Generale .
  4. Clicca su Salva e aggiorna la pagina. A volte, le modifiche apportate al banner non vengono visualizzate nell'anteprima finché non aggiorni la pagina.

Ricorda:

  • Per questi modelli, le descrizioni di pagina non dovrebbero essere utilizzate esclusivamente per aggiungere contenuti basati sulla SEO. L'utilizzo di descrizioni di pagina per il banner non influirà negativamente sulla SEO.
  • Per mostrare un titolo diverso nei risultati di ricerca e nelle condivisioni social, aggiungi un titolo SEO.
  • Nella maggior parte dei modelli puoi incrementare l'altezza del banner aggiungendo degli spazi vuoti alla descrizione. Premi Invio o Enter attorno al testo della descrizione per ingrandire l'immagine. In questo modo puoi risolvere i problemi di ritaglio e aumentare l'altezza del banner per un effetto ottimale.

Aggiungere testo al banner di elementi della raccolta 

Generalmente, i banner di elementi della raccolta creano il testo in sovrapposizione dalle impostazioni di un determinato post del blog, evento o prodotto. Utilizza i link riportati di seguito per maggiori informazioni sull'aggiunta di testo a ciascun tipo di elemento:

Risoluzione dei problemi

Se il testo non viene visualizzato, prova a seguire questi step per la risoluzione dei problemi:

  • Aggiorna la pagina.
  • Controlla la tabella dei modelli per assicurarti che il tuo modello supporti l'uso di testo sui banner per quel tipo di pagina.
  • Apri Stili sito e controlla se il tuo modello offre opzioni di stile per nascondere il banner o il testo del banner.
  • Assicurati di avere aggiunto un'immagine banner, poiché alcuni modelli richiedono un'immagine banner per visualizzare il testo.
  • Consulta la guida al modello che stai utilizzando.  

Ecco le opzioni di testo per banner nelle seguenti famiglie di modelli:

Famiglia di modelli

Banner di pagina

Banner di elementi della raccolta

Adirondack

  • Nessuna opzione di testo sovrapposto
  • Post, eventi, prodotti: Nessun overlay di testo

Bedford

  • Post: Titolo, un elemento di metadati
  • Eventi; Nessun overlay di testo

Brine

  • Area blocchi aperta ("area intro")
  • Il contenuto dell'intestazione (ad es., titolo del sito e link di navigazione) può essere visualizzato sopra il banner.

 

Farro

 

Five

  • Titolo e descrizione della pagina, titolo/logo del sito e tagline o solo immagine banner. Scopri di più.
  • Come sui banner di pagina 

Montauk

  • Titolo e descrizione pagina.

 

Pacific

 

Skye

 

Supply

 

  • Post, eventi: Nessun overlay di testo

Tremont

 

York

  • Titolo e descrizione pagina.

 

Questo video si riferisce alla versione 7.1.

Definire lo stile del banner

La definizione dello stile del banner dipende dalla versione del sito.

Banner Image (Banner)

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

Per la larghezza dello sfondo:

  • L'opzione Full Bleed estende le dimensioni dell'immagine da un margine della finestra del browser all'altro, per l'intera larghezza del tuo sito.
  • Inset indenta leggermente l'immagine e crea un bordo attorno ad essa.

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

Testo banner

Le impostazioni di stile del tuo sito nel pannello Design determinano la modalità di visualizzazione del testo nella sezione banner.

  • 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 carattere, scegli una tavolozza e un tema nel pannello Colori. Apri il tema della sezione e fai clic sull'icona a forma di matita per definire elementi specifici all'interno di quel tema. Per ulteriori informazioni, visita Modifica dei colori.

Utilizza i tweak in Stili sito per modificare tipi di carattere, colori e altri elementi dei banner. I tweak di stile dei banner generalmente influiscono su ogni banner del tuo sito.

Per informazioni sulle opzioni di stile dei banner, consulta la guida al modello che stai utilizzando:

Immagini trasparenti

Se utilizzi un file .png con uno sfondo trasparente, i seguenti tweak ti permettono di regolare il colore dietro al banner:

  • Adirondack - Colore di sfondo del contenuto
  • Bedford - Colore di sovrapposizione del banner
  • Brine - Colore di sovrapposizione nella sezione Principale: sovrapposizione
  • Farro - Colore di sfondo del post. Il Colore di sovrapposizione ha impatto anche sul colore.
  • Five - Sfondo intestazione
  • Montauk - Sfondo dell'area contenuti
  • Pacific - Colore di sovrapposizione
  • Skye - Sfondo sito
  • Supply - Colore pagina
  • Tremont - Colore di sfondo del sito
  • York - Colore di sfondo nella sezione Banner

Nella maggior parte dei casi, il colore è opaco al 100%. Se non riesci a ottenere il colore desiderato, modifica la trasparenza.

Cambiare l'altezza del banner

Il modo in cui si modifica l'altezza del banner dipende dalla versione del sito.

Per modificare l'altezza del banner:

  1. Clicca su Modifica nella pagina, quindi clicca sull'icona della matita nella sezione del banner.
  2. Nella scheda Formato, in Altezza sezione, seleziona un'altezza preimpostata o clicca su ... per impostare un'altezza personalizzata.
  3. Passa il mouse su Fatto e clicca su Salva.

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.

L'altezza del banner dipende anche dalla quantità di contenuto della sezione. Per aumentare l'altezza del banner senza aggiungere contenuto visibile, aggiungi Blocchi spazio.

Per impostare l'altezza dei banner nelle seguenti famiglie di modelli:

Famiglia di modelli

Come modificare l'altezza

Adirondack

Opzione di stile Height (Altezza)

Bedford

Banner di pagina e video - Aggiungi interlinee alla descrizione della pagina. Scopri di più.

Banner Slideshow, Banner slideshow del Blog, e Banner di elementi della raccolta - Altezza fissa

Brine

Aggiungi interlinee all'area introduttiva. I banner della Pagina indice hanno diverse opzioni di altezza.

Farro

Utilizza l'opzione Header (Intestazione) nella sezione Blog: Item (Blog: Elemento) per regolare la dimensione del banner.

Five

Utilizza le opzioni Banner Area Height (Altezza Area Banner) o Banner Area Spacing (Spaziatura Area Banner). L'opzione Banner Area Height non ha effetto su mobile.

Montauk

Altezza fissa, impostata in base all'immagine originale. I banner della pagina vengono visualizzati in base alla larghezza del contenuto del sito. Non vengono tagliati verticalmente.

Pacific

Aggiungi interlinee alla descrizione della pagina o utilizza il tweak Spaziatura. Scopri di più. I banner della Pagina indice hanno diverse opzioni di altezza.

Skye

Utilizza l'opzione Banner Image Width (Larghezza Immagine Banner) per regolare la larghezza del banner. L'altezza è impostata dall'immagine originale, proporzionale alla larghezza.

Supply

La larghezza della pagina è fissa, quindi il banner riempirà tutta la larghezza del browser.

Tremont

Opzione Page Banner Image Height (Altezza Banner di Pagina)

York

Opzione di stile Height (Altezza)

 Se il banner non viene visualizzato correttamente, visita Risoluzione dei problemi di ritaglio.

Banner su dispositivi mobili

Quando visualizzi il tuo sito su dispositivi mobili, ricorda:

  • I banner appariranno sempre parzialmente tagliati su dispositivi mobili.
  • Le impostazioni per definire l'altezza del banner non sempre sono disponibili per dispositivi mobili.
  • Per i banner video, imposta un'immagine di fallback su dispositivi mobili da visualizzare quando non è possibile caricare il video a causa di una scarsa velocità di connessione o del tipo di browser.
  • Per banner del sito, l'impostazione Fix Position (Posizione Fissa) non apparirà su alcuni dispositivi mobili, tra cui iOS.

Rimuovere un'immagine banner

La modalità di rimozione di un'immagine banner dipende dalla versione del sito.

Per rimuovere un'immagine banner:

  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. Passa il mouse su Fatto e clicca su Salva.
  • Banner di pagina - Nella scheda Media delle Impostazioni pagina, clicca su Rimuovi immagine.
  • Banner di elementi della raccolta - Apri il singolo elemento (post del blog, prodotto o evento), clicca sulla scheda Opzioni, quindi clicca sull'icona del cestino.
  • Banner sito - Apri il tweak specifico in Stili sito e clicca su Rimuovi.

Guarda un video

Questo video si riferisce alla versione 7.0.

Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 34 su 197