Impostazioni banner

Configurare il tuo banner

Personalizza ogni aspetto del tuo banner con il nostro pannello di impostazioni completo. Il pannello impostazioni fornisce un controllo preciso su programmazione, comportamento di riproduzione e dimensioni.

Programmatore

Configura quando appare il tuo banner:

  • Visibilità permanente - Sempre visibile (predefinito)

    Il tuo banner sarà costantemente visualizzato nel tuo negozio senza restrizioni di tempo.

  • Intervallo di date - Puoi impostare date e ore di inizio e fine specifiche
    • Data di inizio: Seleziona giorno, mese, anno e ora in cui il tuo banner deve iniziare ad apparire. Se lasciato vuoto, il banner sarà visibile immediatamente dopo la pubblicazione.
    • Data di fine: Seleziona giorno, mese, anno e ora in cui il tuo banner deve smettere di apparire. Se lasciato vuoto, il banner rimarrà visibile indefinitamente.

Suggerimento: Programma i banner in anticipo per le vendite natalizie o eventi speciali. Questo assicura che le tue promozioni si attivino automaticamente al momento perfetto, anche fuori dall'orario lavorativo.

Opzioni di riproduzione

Regola come le slide del tuo banner effettuano le transizioni e si comportano:

  • Riproduzione automatica - Attiva/disattiva la progressione automatica del cambio slide
  • Pausa al passaggio del mouse - Attiva/disattiva l'opzione di fermare la progressione automatica delle slide quando un utente passa il mouse sul banner. Utile per dare agli utenti più tempo per leggere il contenuto.
  • Frecce di navigazione - Mostra/nascondi le frecce sinistra e destra per la navigazione manuale delle slide
  • Punti di navigazione - Mostra/nascondi i punti indicatori nella parte inferiore del banner
  • Velocità dell'animazione - Controlla quanto velocemente avviene l'animazione di transizione della slide (100ms - 2000ms, tipicamente 500ms consigliato)
  • Tipo di animazione - Scegli tra slide (movimento orizzontale) o fade (dissolvenza incrociata)
  • Intervallo (intervallo slide) - Imposta quanto tempo ogni slide viene visualizzata prima di avanzare automaticamente alla successiva (1000ms - 30000ms). Intervalli più lunghi funzionano bene per slide ricche di contenuto.

Nota: Il tipo di animazione 'slide' crea un movimento di scorrimento orizzontale tra le slide, mentre 'fade' crea un effetto di dissolvenza incrociata fluido. Scegli in base allo stile visivo del tuo banner.

Impostazioni consigliate

  • Tempo di intervallo: 5-7 secondi per slide è il punto ottimale per la maggior parte dei banner. Questo dà agli utenti abbastanza tempo per assorbire il contenuto senza sentirsi affrettati.
  • Pausa al passaggio del mouse: Attiva questo per lasciare che gli utenti controllino il ritmo. È particolarmente utile per slide ricche di testo o quando gli utenti potrebbero voler cliccare sui link.
  • Riproduzione automatica: Ottimo per banner hero e vetrine di immagini. Considera di disattivarlo per annunci critici dove gli utenti dovrebbero vedere tutte le slide.
  • Controlli di navigazione: Mostra sia frecce che punti per il massimo controllo dell'utente, o nascondili per un aspetto più pulito su banner semplici a singola slide.

Dimensioni

Controlla la dimensione e il comportamento responsive del tuo banner.

Per impostazione predefinita, le dimensioni del banner vengono calcolate in base a due fattori:

  • Larghezza: 100% del contenitore (si estende per riempire lo spazio orizzontale disponibile)
  • Altezza: Il valore impostato nel campo 'Altezza massima banner' (in pixel)

Impostazione globale: L''Altezza massima banner' è un'impostazione globale che si trova in Impostazioni > Impostazioni tema. Questo valore si applica a tutti i banner per impostazione predefinita e garantisce altezze coerenti nel tuo negozio.

Modalità di sovrascrittura altezza

Puoi sovrascrivere il comportamento dell'altezza predefinito per singoli banner:

  • Predefinito - Usa l'altezza fissa definita in 'Altezza massima banner'
    • Migliore per mantenere altezze di banner coerenti nel tuo negozio
    • Consigliato per la maggior parte dei casi d'uso
  • Percentuale - Imposta l'altezza come valore percentuale dell'altezza della finestra (vh)
    • Ideale per design responsive che si adattano a diverse dimensioni dello schermo
    • Esempio: 50% significa che il banner occuperà metà dell'altezza della finestra del browser
    • Fai attenzione alla pixelazione su schermi più grandi - fornisci immagini ad alta risoluzione
  • Altezza finestra intera - Il banner si estende per riempire il 100% dell'altezza della finestra (100vh)
    • Perfetto per sezioni hero ed esperienze di landing page a schermo intero
    • Crea prime impressioni d'impatto e coinvolgenti
    • Funziona meglio con immagini o video di alta qualità e grandi dimensioni
  • Personalizzato - Imposta un'altezza specifica in pixel solo per questo banner
    • Sovrascrive l'impostazione globale con un valore specifico del banner
    • Utile quando un banner necessita di dimensioni diverse dagli altri
    • Ricorda di testare su dispositivi mobili per evitare banner eccessivamente alti

Best practice:

  • Per banner hero, considera Altezza finestra intera o valori percentuali alti (70-100%)
  • Per banner di annunci, rimani in modalità Predefinito e mantieni altezze modeste (300-500px)
  • Testa sempre su mobile, tablet e desktop per assicurarti che le dimensioni scelte funzionino bene su tutti i dispositivi
  • Se usi percentuale o altezza finestra intera, assicurati che le tue immagini siano ad alta risoluzione (almeno 1920px di larghezza) per evitare sfocature su schermi grandi

Margini

Aggiungi spaziatura attorno al tuo banner configurando i valori di margine per ogni lato. I margini controllano lo spazio vuoto tra il banner e gli elementi della pagina circostanti.

Modalità collegata e scollegata

Il controllo dei margini dispone di un pulsante di collegamento che ti permette di passare tra due modalità:

  • Collegato (uniforme) - Quando l'icona di collegamento è attiva, tutti e quattro i lati condividono lo stesso valore di margine. Modificare un campo aggiorna automaticamente tutti gli altri. Il badge mostra il valore uniforme (es.: "20px").
  • Scollegato (indipendente) - Quando l'icona di collegamento è inattiva, ogni lato può avere il proprio valore di margine. Questo ti permette di impostare spaziature diverse per Alto, Destra, Basso e Sinistra in modo indipendente. Il badge mostra "Mixed" quando i valori differiscono.

Campi di margine

Sono disponibili quattro campi di margine. Ogni campo supporta pixel (px) o percentuale (%) come unità, e l'unità può essere modificata indipendentemente per ogni lato:

  • Alto: Spazio sopra il banner
  • Destra: Spazio a destra del banner
  • Basso: Spazio sotto il banner
  • Sinistra: Spazio a sinistra del banner

Best practice:

  • Usa la modalità collegata per una spaziatura rapida e uniforme attorno al banner
  • Usa la modalità scollegata quando hai bisogno di margini laterali più stretti ma più spazio verticale (o viceversa)
  • Un piccolo margine in alto e in basso (es.: 10-20px) aiuta a separare il banner dal contenuto adiacente
  • Imposta i margini sinistro e destro a 0 se vuoi che il banner si estenda da bordo a bordo all'interno del suo contenitore
  • Considera l'uso di pixel (px) per i margini superiore e inferiore per mantenere una spaziatura verticale costante, mentre la percentuale (%) può funzionare meglio per i margini sinistro e destro poiché si adatta proporzionalmente alle diverse larghezze dello schermo
← Precedente: Tipi di slide Successivo: Posizionamento banner →