Modelli di popup per siti web: 16 design pronti per ogni obiettivo

Un popup vale quanto il momento in cui compare. Il design conta, ma a decidere se converte o infastidisce sono il targeting, il tempismo e l’adeguatezza del formato al messaggio — una barra sottile per un avviso sulla spedizione, un overlay a tutto schermo per un lancio.

Ecco 16 modelli di popup per siti web che coprono tutti i formati più comuni: barre, modali, overlay, notifiche, interazioni gamificate e indicatori di avanzamento. Ognuno è un modello funzionante che puoi configurare — testi, colori, targeting e frequenza — senza scrivere codice. Ognuno rimanda alla sua guida completa alla configurazione.

Cosa rende efficace il design di un popup

Prima dei modelli, i criteri che distinguono un popup su cui le persone agiscono da uno che chiudono subito:

• Un solo compito. Un popup che chiede un’email, promuove una svendita e annuncia una nuova funzionalità non otterrà nessuno dei tre risultati.
• Formato adeguato al peso del messaggio. Messaggio piccolo, ingombro piccolo. Riserva gli overlay a tutto schermo ai momenti che meritano davvero l’interruzione.
• Uscita visibile. Un popup difficile da chiudere trasforma un rimbalzo in risentimento e, su mobile, rischia una penalizzazione da parte di Google.
• Limite di frequenza. La seconda visualizzazione dello stesso messaggio rende peggio della prima; la quinta fa danni.
• Targeting prima del tempismo. “Dopo 5 secondi” è una regola grossolana. “Visitatore di ritorno, carrello sopra i $50, non ha ancora visto questa offerta” è un motivo per comparire.

Barre: messaggi persistenti e poco invasivi

Le barre stanno in alto o in basso nella pagina senza coprire i contenuti — la scelta giusta per tutto ciò che deve restare visibile invece di chiedere una decisione.

Barra annunci — una striscia sottile a tutta larghezza per messaggi validi su tutto il sito: offerte sulla spedizione, saldi, novità di prodotto o avvisi legali. In alto o in basso, fissa o statica.

Barra annunci a rotazione — la stessa striscia che alterna fino a cinque messaggi, ciascuno con il proprio link, con un timer, navigazione a punti e transizione in dissolvenza o a scorrimento. Utile quando più contenuti competono per lo stesso spazio.

Barra di stato spedizione gratuita — una barra di avanzamento in tempo reale che legge un valore dal profilo del visitatore — “Ti mancano $65 per la spedizione gratuita” — e si riempie man mano che il carrello cresce.

Barra di stato a livelli — la versione fedeltà: mostra il livello attuale, i progressi verso il successivo e cosa si sblocca, in base a punti, spesa od ordini.

Popup e modali: richieste mirate

Modale centrata — un popup centrato su un overlay scuro, con quattro layout per l’immagine in un solo modello e il controllo della posizione dell’immagine su mobile. La scelta predefinita per un’unica offerta chiara.

Overlay a tutto schermo — una schermata di benvenuto che occupa l’intero viewport, con sfondo a tinta unita, sfumato o con immagine al vivo. Per lanci, campagne stagionali e benvenuti alla prima visita.

Notifica ad angolo — una scheda di notifica compatta che abbina un’immagine a un titolo, un breve messaggio e un invito all’azione. Non invasiva — ideale per riprova sociale, promozioni leggere e suggerimenti sulle funzionalità.

Popup coupon — un codice promozionale con diversi stili di rivelazione: clic per copiare, clic per rivelare o sempre visibile, più immagine, titolo, CTA e note in piccolo.

Modulo di acquisizione lead — raccoglie i dati del visitatore e li scrive nel profilo Personyze, così puoi ricontattarlo, segmentarlo o personalizzare ciò che vedrà dopo. Layout affiancato o in colonna.

Formati interattivi e gamificati

Questi formati chiedono al visitatore di fare qualcosa. Il coinvolgimento è molto più alto, e lo è anche il prezzo di abusarne.

Ruota della fortuna — una ruota dei premi gamificata con probabilità che controlli tu, in layout in colonna o a tutto schermo. Ciò che ogni visitatore vince viene salvato nel suo profilo per il targeting successivo.

Quiz di raccomandazione — poche domande in cui ogni risposta vota per un gruppo di risultati, fino a una raccomandazione su misura con il relativo invito all’azione.

Entrambi sono approfonditi nella guida al gamification marketing.

La Ruota della fortuna nel dettaglio

Tra i modelli interattivi, la Ruota della fortuna è quella che merita una spiegazione approfondita — converte bene perché lo sconto sembra guadagnato anziché regalato, e raccoglie molto più di un semplice riscatto del coupon se la configuri bene.

Configuri da quattro a otto segmenti, ciascuno con etichetta, colore, messaggio di vincita e codice coupon. Il visitatore clicca, la ruota rallenta e compare il messaggio del segmento vincente con coriandoli o un bagliore.

• Le probabilità le decidi tu. Ogni segmento ha un peso relativo di probabilità di vincita — pesi di 35/25/20/12/5 diventano semplicemente quelle percentuali. Mantieni rari i premi grandi e frequenti quelli piccoli.
• Aggiungi uno spicchio perdente per la suspense. Dai a un segmento un’etichetta come Ritenta e lascia vuoto il coupon: conterà come spicchio senza vincita.
• Controlla i giri ripetuti. Modalità tentativi può essere Singola (un giro, risultato bloccato), Riprova (si rigira solo su uno spicchio perdente finché non si vince) o Multipla (un numero fisso di giri).
• In linea o a tutto schermo. Inseriscila in una pagina o centrala su un overlay oscurato, con le stesse probabilità in entrambi i casi.
• Salva il risultato nel profilo. È la parte che la maggior parte delle ruote trascura — il premio e il codice vincenti vengono scritti nel profilo del visitatore, così puoi ricontattare chi ha vinto la spedizione gratuita ma non ha mai ordinato, o escludere chi l’ha già riscattato.

La versione con modulo, quando vuoi l’email

La ruota standard volutamente non mette un modulo prima del giro — la ricompensa è il giro stesso, il che mantiene bassa la frizione. Quando il lead conta più del gioco, la ruota della fortuna con modulo mette un modulo davanti.

La ruota è visibile fin dal primo istante, ma grigia e con un lucchetto, così il visitatore vede esattamente in cambio di cosa lascia il suo indirizzo. All’invio il modulo viene sostituito da un ringraziamento, la ruota si sblocca e gira — e l’email e il premio vinto finiscono nello stesso profilo. Un’avvertenza: quando qualcuno ha “pagato” con il proprio indirizzo, uno spicchio perdente brucia, quindi mantienili rari o fai in modo che ogni spicchio dia qualcosa.

La configurazione completa è nella documentazione del modello Ruota della fortuna, e un approfondimento più ampio si trova nel playbook sulla ruota della fortuna.

Progressi, status e urgenza

Scheda di stato — il formato a scheda della meccanica di avanzamento — quanto un visitatore è vicino alla spedizione gratuita o a una ricompensa, come scheda centrata o popup guidato da un valore del profilo in tempo reale.

Scheda di stato a livelli — la stessa scheda con l’avanzamento nei livelli fedeltà: Bronzo, Argento, Platino, con la distanza dal livello successivo.

Modelli di conto alla rovescia — tre varianti — scheda, barra e barra evento — con un unico motore del timer, per una svendita che finisce, un prezzo che aumenta o un evento che inizia.

Conto alla rovescia con avanzamento dell’evento — una barra che si riempie man mano che la data si avvicina invece di affidarsi solo ai numeri, con un pulsante di registrazione. Pensata per webinar, lanci e sessioni dal vivo.

Nella pagina: lo spazio hero

Hero slider — un banner hero a rotazione con un massimo di quattro slide, ognuna con immagine, titolo, sottotitolo e pulsante — testo accanto all’immagine o sovrapposto a uno sfondo al vivo.

Esempi di popup per obiettivo

Se sai quale risultato vuoi, questa è la strada più breve verso un formato:

• Far crescere la lista email — Modulo di acquisizione lead, una Ruota della fortuna che chiede l’indirizzo dopo la vincita, oppure la Ruota della fortuna con modulo che lo chiede prima.
• Aumentare il valore medio dell’ordine — Barra di stato spedizione gratuita o Scheda di stato.
• Spingere una promozione — Popup coupon, con un conto alla rovescia se la scadenza è reale.
• Annunciare qualcosa su tutto il sito — Barra annunci, o la versione a rotazione per più messaggi.
• Aiutare i visitatori a scegliere — Quiz di raccomandazione.
• Aumentare le iscrizioni agli eventi — Conto alla rovescia con avanzamento dell’evento.
• Fidelizzare e premiare — Barra o Scheda di stato a livelli.

Non devi per forza scegliere un modello

Tutto quanto sopra presuppone che tu sfogli una libreria e scelga. Esiste una strada più veloce: descrivere il popup che vuoi e lasciare che sia l’agente IA a costruirlo. Così il tuo lavoro passa dallo scegliere un modello e ristilizzarlo al revisionare qualcosa di già finito.

Tre cose lo rendono più di un generatore di modelli:

• Si ispira al tuo sito reale. Prima di costruire, l’agente analizza le tue pagine per ricavarne colori del brand, font, stile dei pulsanti e tono dei testi. Il risultato sembra parte del tuo sito e non un modello appoggiato sopra — e nessun visitatore può capire che è stato generato.
• Parole semplici diventano targeting reale. Di’ “nuovi visitatori da mobile arrivati alla pagina dei prezzi” e lo trasforma in vere regole di targeting, poi ti rilegge le regole compilate così puoi verificarle.
• Nulla raggiunge il traffico reale. Tutto ciò che costruisce viene creato in staging — visibile solo ai visitatori che arrivano da un IP di staging. Lo visualizzi in anteprima sulle tue pagine reali e pubblichi tu.

Come funziona in pratica

Puoi partire da entrambi i lati. “Crea un popup con un’offerta di benvenuto per i nuovi visitatori” ti restituisce un popup finito, in linea con il tuo brand e con il targeting già associato. Oppure scegli un modello dalla libreria qui sopra e lascia che l’agente lo adatti al tuo brand mantenendo la tua offerta. In entrambi i casi ritocchi conversando — “trasformalo in una barra”, “prova un altro colore”, “mostralo anche ai visitatori di ritorno” — senza aprire un pannello CSS.

Funziona anche al contrario: chiedi “cosa dovrei migliorare questa settimana?” e ricevi opportunità ordinate per priorità su tutte le tue pagine e campagne, ciascuna con un’azione a un tocco. Su un sito con qualche centinaio di pagine, sapere dove vale la pena aggiungere un popup è di solito la metà più difficile.

L’agente funziona all’interno del pannello Personyze — vedi l’agente di personalizzazione IA — e le stesse funzionalità sono raggiungibili da Claude o da ChatGPT se preferisci lavorare con un assistente che usi già. Maggiori dettagli nella guida all’agente di marketing IA.

Preferisci lavorare da Claude? Installa il connettore dalla directory: Personyze nella directory di Claude.

Best practice per i popup

• Rispetta il mobile. Google considera gli interstitial invasivi su mobile un problema di ranking. Barre e notifiche lì sono più sicure degli overlay.
• Attiva in base all’intenzione, non solo al tempo. Exit intent, profondità di scorrimento, valore del carrello e visite ripetute battono tutti un ritardo arbitrario.
• Sopprimi dopo l’azione. Chi si è già iscritto non dovrebbe mai più vedere il popup di iscrizione.
• Testa l’offerta prima del design. Cambiare l’incentivo sposta la conversione molto più che cambiare il colore del pulsante.
• Salva il risultato. Un popup che rileva una preferenza e la scrive nel profilo del visitatore continua a rendere anche dopo la fine della campagna.

Modelli di popup: domande frequenti

Quanti popup sono troppi?

Una sola richiesta attiva per visita è una regola sicura. Una barra persistente e un popup interattivo possono convivere perché la barra non chiede una decisione, ma due overlay in competizione si annullano a vicenda.

I popup danneggiano la SEO?

Solo quando sono invasivi su mobile. Barre, notifiche e popup attivati dopo un coinvolgimento reale non vengono penalizzati. Per saperne di più, vedi personalizzazione e SEO.

Posso modificare questi modelli?

Sì — ciascuno è un punto di partenza. Testi, colori, layout, immagini, attivatori, regole di targeting e frequenza sono tutti configurabili, e l’HTML e il CSS sottostanti restano modificabili se vuoi spingerti oltre.

Qual è la differenza tra un popup e una barra annunci?

Un popup si sovrappone alla pagina e interrompe la visita per chiedere una decisione. Una barra occupa una striscia sul bordo del viewport e resta defilata, il che la rende adatta a messaggi continuativi più che a richieste singole.

L’IA può creare un popup al posto mio?

Sì. Descrivi ciò che vuoi e l’agente IA di Personyze lo costruisce, dopo aver analizzato il tuo sito per ricavarne colori del brand, font, stile dei pulsanti e tono, così il risultato si abbina alle tue pagine. Il targeting in linguaggio naturale viene compilato in regole reali e riletto per te, e tutto viene creato in staging, quindi il traffico reale non è coinvolto finché non pubblichi.

Come decide la Ruota della fortuna cosa vince una persona?

Ciascuno dei quattro-otto segmenti ha un peso relativo di probabilità di vincita, e i pesi vengono sommati per calcolare le probabilità reali — quindi pesi di 35, 25, 20, 12 e 5 diventano quelle percentuali. Un segmento con un’etichetta come Ritenta e senza coupon funziona da spicchio perdente. Il premio e il codice vincenti vengono salvati nel profilo del visitatore per il targeting successivo.

Inizia ora

Tutti i 16 modelli si possono configurare e targettizzare senza codice. Prenota una demo oppure scopri i piani.

Crea uno qualsiasi di questi semplicemente chiedendolo: l’agente di personalizzazione IA.

Letture correlate

• Gamification marketing — le meccaniche dietro ai modelli interattivi.
• Ruote della fortuna gira e vinci — la ruota nel dettaglio.
• Barre per la spedizione gratuita e per i livelli fedeltà — la leva per lo scontrino medio.
• Popup e banner — come funzionano targeting e frequenza.