Aggiungere immagini banner

È possibile creare immagini banner su qualsiasi pagina, semplicemente aggiungendo una sezione di blocco nella parte superiore della pagina, e poi un'immagine di sfondo. È possibile aggiungere del contenuto che si sovrapponga al banner oppure aggiungere sotto altre sezioni per il contenuto della pagina Non è possibile aggiungere immagini banner a singoli post di blog, eventi o prodotti.

Per istruzioni dettagliate su come aggiungere un'immagine di sfondo a una sezione, visita Immagini di sfondo di sezione.

Modelli diversi supportano tipi diversi di immagini banner:

• Banner di Pagina - Visualizzato nella parte superiore di pagine individuali. Aggiunto come immagine in evidenza della pagina.
• Banner di elementi della raccolta - Visualizzato nella parte superiore di post del blog, prodotti ed eventi individuali. Aggiunto come immagine in evidenza 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 , quindi clicca su Media.
3. Clicca su Immagine per aggiungere un'immagine dal computer o clicca su Cerca immagine per riutilizzare un'immagine o aggiungere 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 .

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 in evidenza nella scheda Opzioni. Per maggiori informazioni, visita Aggiungere immagine in evidenza.

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.

Opzioni banner in base al template

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

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:

• Titolo e descrizione della pagina - Visualizza il titolo e la descrizione aggiunti nelle impostazioni pagina sopra i banner di pagina.
• Testo banner di elementi della raccolta - Visualizza il testo dalle impostazioni degli elementi della raccolta sopra i post del blog, eventi o articoli.
• Testo banner della Pagina Indice - Visualizza il testo descrittivo sovrapposto al banner oppure il contenuto della pagina sovrapposto al banner, a seconda del modello.
• Testo in sovrapposizione nell'area di introduzione - I Blocchi di testo e altri contenuti di blocco si sovrappongono all'area di intestazione della pagina in cui viene visualizzato il banner.

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 utilizzando blocchi quali Blocchi di testo o Blocchi 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 .
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 il tasto Invio o Enter nella descrizione di pagina per ingrandire l'immagine. In questo modo puoi risolvere i problemi di ritaglio ed espandere la lunghezza 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:

• Post
• Eventi
• Prodotti

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.

Opzioni di testo per banner in base al modello

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

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.

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.

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 tipo di carattere, scegli una tavolozza e un tema nel pannello Colori. Apri il Tema sezione e clicca sull'icona della matita per applicare uno stile a elementi specifici all'interno di quel tema. Per maggiori informazioni, visita Modificare i 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

Di solito, il colore è opaco al 100%. Se non riesci a ottenere il colore desiderato, modifica la trasparenza.

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.

Sebbene i banner generalmente coprano la larghezza del sito, puoi definire lo stile dell'immagine del banner e includere un bordo intorno ad essa. In questo modo la larghezza del banner sembra ridotta.

Utilizza la tabella riportata di seguito per scoprire come modificare le dimensioni del banner in queste famiglie di modelli. Nella maggior parte dei modelli non è possibile modificare la larghezza del banner.

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

Segui le istruzioni fornite sopra per creare un'immagine banner. Per aggiungere un pulsante sovrapposto al banner, aggiungi un blocco pulsante al contenuto della sezione.

Le seguenti famiglie di modelli includono speciali opzioni di sovrapposizione per l'aggiunta di pulsanti su immagini banner e video in singole pagine:

• Bedford - Formatta il testo di descrizione della pagina per creare un pulsante sull'ultima riga.
• Brine - Aggiungi un Blocco pulsante all'area introduttiva su una pagina con un banner.

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.