I banner vengono visualizzati nella parte superiore della pagina, aggiungendo un elemento visivo per dare il giusto tono al tuo sito. Molti template creano automaticamente i banner utilizzando le immagini di anteprima delle pagine, ma la modalità di visualizzazione e le opzioni di stile variano in base al template.
Questa guida descrive la procedura per aggiungere, formattare e definire lo stile di un banner.
Suggerimento: come alternativa ai nostri banner integrati, puoi aggiungere un Blocco immagine all'inizio di una Pagina di layout con qualsiasi modello.
Questa procedura si riferisce alla versione 7.0. Se il tuo sito è in versione 7.1, consulta le opzioni di stile e design per la versione 7.1.
Guarda un video
Suggerimenti per la formattazione dell'immagine
- Ti consigliamo di caricare immagini con una larghezza di almeno 1500 pixel.
- Non è consigliabile utilizzare un'immagine che contiene del testo all'interno del file immagine. Considera che la maggior parte dei template supporta overlay di testo.
- Puoi utilizzare file immagine .jpg, .png e .gif. Per ulteriori requisiti delle immagini, visita Formattare le immagini per il web.
- Per consigli su come scegliere un'immagine che venga visualizzata al meglio in tutti i browser, rivedi i nostri suggerimenti per responsive design.
- Se il tuo banner non viene visualizzato correttamente, consulta i nostri consigli per la risoluzione dei problemi di ritaglio.
- Per visualizzare un messaggio personalizzato nella parte superiore del sito, aggiungi una barra degli annunci.
Tipi di banner
Come aggiungere l'immagine di banner dipenderà dai tipi di banner supportati dai tuoi template:
- Banner di Pagina - Visualizzato nella parte superiore di pagine individuali. Aggiunto come immagine di anteprima della pagina.
- Banner Video - Può sostituire il banner di pagina in alcuni template. Può essere aggiunto come immagine di anteprima della pagina.
- Banner di elementi della raccolta - Visualizzato nella parte superiore di post, prodotti ed eventi individuali. Aggiunto come immagine di anteprima dell'elemento.
- Banner del sito: possono essere visualizzati su ogni pagina. Aggiunti 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:
- Apri la pagina e clicca sull'opzione Settings (Impostazioni) nell'anteprima del sito.
- Nella scheda Media, clicca su Aggiungi immagine per caricare un'immagine dal tuo computer, oppure clicca su Cerca immagini per riutilizzare un'immagine o aggiungere un'immagine di archivio.
- 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.
- Clicca su Save (Salva) per pubblicare le modifiche.
- Utilizza Stili sito per definire lo stile del banner.
Per modificare un banner esistente, clicca sull'opzione Banner o riapri le Impostazioni pagina.
Per maggiori informazioni su quali modelli supportano i banner di pagina, fai riferimento all'articolo Opzioni banner per modello.
Suggerimento: alcuni modelli supportano anche banner video.
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.
Ecco come viene visualizzato il banner di un post nel template Skye:
Suggerimento: Alcuni banner di elementi della raccolta supportano overlay di testo.
Template supportati
I banner di elementi della raccolta sono supportati nelle seguenti famiglie di modelli: Alcuni elementi della raccolta visualizzano banner di pagina; ad esempio, un post potrebbe visualizzare il banner della Pagina del blog.
- Adirondack - Post, eventi e prodotti visualizzano miniature degli elementi della raccolta
- Bedford - Post ed eventi visualizzano miniature degli elementi della raccolta.
- Farro - I post visualizzano miniature degli elementi della raccolta.
- Five - Post, eventi e prodotti visualizzano banner di pagina.
- Montauk - Post ed eventi visualizzano banner di pagina.
- Skye - I post visualizzano miniature degli elementi della raccolta.
- Supply - Post ed eventi visualizzano miniature degli elementi della raccolta.
Aggiungere un banner del sito
I banner del sito sono disponibili nel modello Five e in alcuni modelli non più supportati. Vengono visualizzati su qualsiasi pagina che non dispone di un banner di pagina.
Per aggiungere un banner su tutte le pagine del sito, clicca sui tweak 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.
Aggiungere un overlay di testo
Utilizza le opzioni disponibili nel template per creare un overlay di testo visualizzato davanti all'immagine. Per ulteriori informazioni, visita Aggiungere testo ai banner.
Nota: Non è consigliabile caricare un'immagine con testo o parole sovrapposte. Il testo all'interno di un file immagine potrebbe essere ritagliato e non è indicizzato dai motori di ricerca.
Ecco un esempio di overlay di testo nel template Pacific:
Aggiungi contenuto come overlay
In alcuni template, puoi aggiungere Blocchi Contenuto su un banner. Ad esempio, puoi aggiungere un Blocco Video su un'immagine banner, come mostrato nello screenshot seguente.
Puoi aggiungere Blocchi contenuto su un'immagine banner o un video nelle seguenti famiglie di modelli:
- Brine - Aggiungi blocchi ad aree introduttive su banner di pagina e sezioni di contenuto in un Indice.
- Pacific - Aggiungi blocchi a sezioni di contenuto in un Indice.
Definire lo stile del banner
Informazioni sulle opzioni di stile per le seguenti famiglie di modelli:
Cambiare l'altezza del banner
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) |
Banner su dispositivi mobili
- I banner appariranno sempre parzialmente tagliati su dispositivi mobili.
- I video banner a volte non vengono visualizzati su dispositivi mobili, a seconda della versione del browser e della velocità di connessione a disposizione degli utenti. Imposta un'immagine di fallback su dispositivi mobili da visualizzare quando non è possibile caricare il banner video.
- Le impostazioni per definire l'altezza del banner non sempre sono disponibili per dispositivi mobili.
- Lo Scorrimento Parallax funziona su dispositivi mobili nella maggior parte dei casi.
- Per banner del sito, l'impostazione Fix Position (Posizione Fissa) non apparirà su alcuni dispositivi mobili, tra cui iOS.
- I banner del sito non devono mai essere più grandi di 2500 pixel, per evitare problemi su dispositivi mobili.
Cosa accade quando passi da un template all'altro
Le immagini di anteprima di pagina, di elementi della raccolta e video vengono trasferite nel nuovo template quando cambi template. Se passi da un template che supporta questi banner ad un altro, la stessa immagine banner verrà visualizzata nel nuovo template.
Banner visualizzati dietro l'intestazione
Le immagini banner e i banner video possono essere visualizzati dietro l'intestazione del sito nelle seguenti famiglie di modelli (clicca sui link per maggiori informazioni):
Suggerimento: i banner nel modello Five vengono visualizzati sotto l'intestazione, ma il titolo del sito, il logo e la tagline possono essere visualizzati sul banner.
Impilare banner
In alcuni modelli, le Pagine indice mostrano più banner impilati verticalmente su un'unica pagina, per creare un effetto di scorrimento lungo. Puoi impilare i banner in un Indice nelle seguenti famiglie di modelli (clicca sui link per maggiori informazioni):
Nota: I banner in una Pagina Indice solitamente hanno opzioni di stile dedicate.
Banner non tagliati
Le immagini della maggior parte dei banner potrebbero apparire tagliate, in particolare quando adattate a formati di schermo diversi. Questo consente di migliorare la visualizzazione delle immagini in base al layout del sito e alla dimensione del browser.
Puoi creare banner che non saranno ritagliati nelle seguenti famiglie di modelli:
- Montauk - I banner non vengono ritagliati verticalmente. Vengono visualizzati sempre in base alla larghezza del contenuto del sito. Banner alti e sottili possono apparire sfocati se estesi per riempire l'intera larghezza.
- Pacific - Crea un'immagine banner che non viene ritagliata aggiungendo una Pagina galleria all'interno di una Pagina indice.
Suggerimento: cambiare il punto focale della miniatura può aiutare in caso di banner e elementi della raccolta ritagliati. Per maggiori informazioni, visita i nostri suggerimenti per la risoluzione dei problemi di ritaglio.
Banner slideshow
Puoi creare banner a slideshow nelle seguenti famiglie di modelli:
- Brine - Crea una Pagina indice con una slideshow come sezione superiore.
- Bedford - Crea un banner slideshow su Pagine di layout con un Blocco galleria in primo piano o un banner slideshow Pagina del blog da Post in primo piano
- Pacific - Crea una Pagina indice con una galleria a slideshow come sezione superiore.
Suggerimento: in altri modelli, aggiungi un Blocco galleria slideshow in alto in una Pagina di layout per ottenere un effetto simile.
Creare banner in altri template
Con qualsiasi modello, puoi ricreare l'effetto di un banner aggiungendo un Blocco immagine nella parte superiore di una Pagina di layout.
Ogni layout offre diverse opzioni di sovrapposizione del testo.
Considera che i Blocchi Immagine vengono visualizzati all'interno dell'area dei contenuti principale, quindi non offrono opzioni per la visualizzazione a schermo intero.
Suggerimento: Alcuni template offrono aree di intestazione della pagina che permettono di aggiungere blocchi, come Blocchi Immagine, Testo e Video.
Immagini trasparenti
Se utilizzi un file .png con uno sfondo trasparente, i seguenti tweak ti permettono di regolare il colore dietro al banner nelle seguenti famiglie di modelli:
- 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
Suggerimento: nella maggior parte dei casi, il colore è opaco al 100%. Se non riesci a ottenere il colore desiderato, modifica la trasparenza.
Opzioni banner in base al template
Le seguenti famiglie di modelli supportano uno o più tipi di banner:
|
Famiglia di modelli |
Banner di pagina: pagine supportate |
Banner video |
Banner di elementi della raccolta: elementi supportati |
Altre opzioni |
|
Adirondack |
Layout |
Sì |
Post |
Effetto dissolvenza su scorrimento (visualizzazione desktop) |
|
Bedford |
Layout |
Sì |
Post |
|
|
Brine |
Layout |
Sì |
Scorrimento Parallax |
|
|
Farro |
Post |
|||
|
Five |
Layout |
Sì |
I banner di pagina appaiono su post, eventi, prodotti |
Banner del sito |
|
Montauk |
Layout |
Sì |
I banner di pagina appaiono su post, eventi |
|
|
Pacific |
Layout |
Sì |
||
|
Skye |
Post |
|||
|
Supply |
Layout |
Post |
I banner appaiono a destra, eccetto su dispositivi mobili. |
|
|
Tremont |
Layout |
Sì |
Overlay pagina | |
|
York |
Layout |
Effetto dissolvenza |
Rimuovere un'immagine banner
Per rimuovere un'immagine banner, aprire l'area del banner specifico ed eliminare l'immagine.
- Banner di pagina - Nella scheda Media delle Impostazioni pagina, clicca su Rimuovi immagine.
- Banner Video - Nella scheda Media delle impostazioni di pagina, clicca su Video, poi elimina l'URL del video.
- Banner di elementi della raccolta - Aprire il singolo elemento (post del blog, prodotto o evento), fare clic sulla scheda Opzioni, poi fare clic sull'icona del cestino.
- Banner sito - Aprire il tweak specifico in Stili sito e fare clic su Rimuovi.