Come creare un pop-up in HTML per il tuo sito web
Che tu stia progettando una landing page, ottimizzando percorsi di conversione o semplicemente sperimentando con le funzionalità del front-end, sapere come creare un pop-up in HTML è una competenza preziosa. In questa guida, ti mostreremo due approcci pratici per aggiungere un pop-up personalizzato al tuo sito web — uno utilizzando HTML, CSS e JavaScript, e un altro con un builder no-code che lo realizza in pochi minuti.
Se ti piace il coding manuale e il pieno controllo del design, apprezzerai la nostra guida passo-passo del metodo manuale. E se preferisci evitare la complessità tecnica, ti presenteremo Claspo — un potente strumento senza codice per creare pop-up reattivi ad alta conversione con pochi clic.
Come bonus, condivideremo anche consigli di esperti sull'usabilità dei pop-up, le migliori pratiche di design e come far sembrare il tuo pop-up una parte naturale del tuo sito, non un'interruzione.
Come creare un pop-up in HTML e senza codice
In questa sezione, esploreremo due metodi principali: creare una notifica pop-up in HTML, CSS e JavaScript e utilizzare un modello per semplificare il processo. La prima opzione è ancora utilizzata per le infinite possibilità di personalizzazione. Nel frattempo, la seconda si riferisce a soluzioni senza codice che stanno guadagnando terreno e diventando una soluzione per gli utenti non tecnici e coloro che non possono permettersi di assumere uno sviluppatore ogni volta che necessitano di un pop-up.
Pop-up in HTML CSS: un metodo che richiede codice
Competenze avanzate di coding ti permettono di creare una finestra pop-up personalizzata in HTML da zero e adattarne l'aspetto e il comportamento sul sito web per soddisfare le tue esigenze. Allora, come si può fare un pop-up in HTML se si hanno tali competenze? Esaminiamolo passo per passo.
Passo 1: Prepara la tua immagine
Prima di iniziare a codificare, assicurati di avere un'immagine per il tuo pop-up HTML pronta (non riesci a farlo da solo? Congratulazioni, hai bisogno anche di un designer). L'immagine dovrebbe essere ospitata su un server così da poter essere accessibile tramite un'URL. Puoi caricare la tua immagine sul server del tuo sito web o utilizzare un servizio di hosting immagine esterno.
Passo 2: Struttura del widget con un pulsante pop-up in HTML
Il codice HTML del pop-up forma la struttura del tuo widget. Ecco una spiegazione del codice del pop-up:
1. Dichiarazione DOCTYPE: definisce il tipo di documento e la versione di HTML.
<!DOCTYPE html>
<html lang="en">
2. Sezione Head: contiene meta-informazioni sul documento, come il set di caratteri e i link ai fogli di stile e agli script.
<head>
<meta charset="UTF-8">
<title>Come Creare un Pop-up</title>
<link rel="stylesheet" href="style.css">
<script defer src="app.js"></script>
</head>
3. Sezione Body: contiene il contenuto principale del documento, incluso il pulsante pop-up in HTML per attivare il pop-up e il pop-up stesso.
<body>
<div class="container">
<button type="submit" class="btn" onclick="openPopup()">Invia</button>
<div class="popup" id="popup">
<img src="https://yourserver.com/path-to-image.png" alt="">
<h2>Grazie!</h2>
<p>I tuoi dettagli sono stati inviati con successo. Grazie!</p>
<button type="button" onclick="closePopup()">OK</button>
</div>
</div>
</body>
</html>
- Div container: centra il box del pop-up in HTML e il pulsante.
- Pulsante: attiva il pop-up al clic.
- Div del pop-up: contiene il contenuto del pop-up, inclusi un'immagine, un'intestazione, un messaggio e un pulsante di chiusura.
- Image: visualizza l'immagine che hai preparato. L'attributo src deve puntare all'URL dove l'immagine è ospitata.
Passo 3: Stile del popup CSS
Il design del popup CSS viene utilizzato per stilizzare il widget e renderlo attraente. Ecco cosa fa ogni parte del codice CSS:
1. Importare il font: importa un font personalizzato da Google Fonts.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
2. Stili globali: imposta gli stili di default per tutti gli elementi.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
3. Stili del contenitore: centra il contenuto sulla pagina.
.container {
width: 100%;
height: 100vh;
background: linear-gradient(to right, #485563, #29323c);
display: flex;
align-items: center;
justify-content: center;
}
4. Stili del bottone: stila il popup del bottone e aggiunge un'animazione al clic.
.btn {
padding: 10px 60px;
background: #fff;
border: 0;
outline: none;
cursor: pointer;
font-size: 22px;
font-weight: 500;
border-radius: 10px;
transition: transform 0.2s;
}
.btn:active {
transform: scale(0.95);
}
5. Stili del pop-up: stila il pop-up e controlla la sua visibilità e l'animazione di ingresso (come fade o slide).
.popup {
width: 400px;
background: #fff;
border-radius: 6px;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%) scale(0.1);
text-align: center;
padding: 0 30px 60px;
color: #333;
visibility: hidden;
transition: all 0.4s ease-in-out;
}
.open-popup {
visibility: visible;
top: 50%;
transform: translate(-50%, -50%) scale(1);
}
.popup img {
width: 100px;
margin-top: -50px;
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.popup h2 {
font-size: 38px;
font-weight: 500;
margin: 30px 0 10px;
}
.popup button {
width: 100%;
margin-top: 50px;
padding: 10px 0;
background-color: #e02189;
color: #fff;
border: 0;
outline: none;
font-size: 18px;
border-radius: 4px;
box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}
Consigli per far risaltare il tuo pop-up in HTML CSS
Quando crei un popup HTML, non è solo una questione di funzionalità, ma anche di impatto visivo. Un widget ben progettato può attirare immediatamente l'attenzione e promuovere l'interazione se progettato con chiarezza e scopo. Ecco come migliorare il tuo popup utilizzando strategie comuni di design.
1. Usa un overlay con opacità regolata.
Un overlay è uno strato semitrasparente che si trova dietro il popup. Oscura il resto dello schermo, permettendo agli utenti di concentrarsi sul tuo messaggio. Per ottenere ciò, crea un div separato come contenitore dell'overlay per il popup e imposta il suo background-color con rgba e un valore di opacità appropriato (come 0.6) nel tuo CSS.
.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6); /* overlay con opacità */
z-index: 999;
display: none; /* attivato dal JS */
}
2. Mantieni la scatola HTML popup centrata e stilizzata per impatto.
Quando crei popup HTML usando CSS, assicurati che il tuo contenitore sia stilizzato con padding, una larghezza massima, ombre lievi e un bordo arrotondato. Disegna il tuo contenitore popup con uno sfondo bianco o luminoso, ombre lievi e padding generoso. Che tu lo mostri in cima allo schermo, al centro o vicino a un menu, il contrasto visivo è essenziale. Usa una CTA forte e un font accattivante (come Poppins o Montserrat) per aumentare la visibilità.
3. Aggiungi animazioni fluide con transizioni CSS.
Le animazioni come il fade-in o lo slide-down possono elevare l'esperienza. Applica una classe con proprietà di transizione e transform al tuo popup HTML e CSS. Questo lo rende più interattivo e moderno, anche senza effetti JavaScript pesanti.
4. Reattivo per impostazione predefinita.
Non dimenticare di assicurarti che il tuo popup funzioni su tutte le dimensioni dello schermo. Utilizza le query @media e larghezze basate su percentuali per il tuo contenitore. Questo rende il tuo popup con approccio HTML compatibile con i dispositivi mobili senza strumenti extra.
Combinando struttura, HTML e CSS, e animazioni sottili, puoi creare un popup HTML che non è solo funzionale ma veramente accattivante — progettato per distinguersi e convertire.
Passo 4: Funzionalità JavaScript
JavaScript viene utilizzato per dare vita al popup schermo in HTML controllandone il comportamento. Ecco cosa fanno le funzioni di base:
1. Ottieni l'elemento pop-up: seleziona l'elemento pop-up tramite il suo ID.
let popup = document.getElementById('popup')
2. Funzione Apri pop-up: aggiunge una classe per mostrare il popup e avviare l'animazione.
function openPopup() {
popup.classList.add('open-popup')
}
3. Funzione Chiudi pop-up: rimuove quella classe per nascondere il popup e ripristinare lo stato predefinito.
function closePopup() {
popup.classList.remove('open-popup')
}
Con JavaScript, puoi controllare quando e dove appare il tuo popup — come su pagine specifiche come la tua pagina di prezzi, blog o checkout. Ciò assicura che il tuo messaggio sia pertinente e puntuale, piuttosto che invadente.
if (window.location.pathname === "/pricing") {
popup.style.display = "block";
}
Metodo senza codice: modelli di popup
I principali vantaggi delle soluzioni senza codice per creare una finestra popup in HTML sono il risparmio di tempo e la flessibilità. Quando hai un modello pronto, non perdi tempo a preparare un'immagine popup, e l'editor drag-and-drop ti dà la flessibilità di personalizzare il modello per soddisfare le tue esigenze. Possiamo aggiungere il risparmio di denaro a questa lista poiché non hai bisogno di uno sviluppatore e designer. Quindi, come aggiungere un popup in HTML in questo caso? In generale, il processo si riduce ai seguenti passaggi, rendendolo molto più semplice rispetto alla creazione di un popup in HTML con CSS da zero:
- Seleziona un modello pronto che soddisfi il tuo scopo (come un popup di iscrizione, informatore, prevenzione dell'abbandono del carrello ecc.) tra le opzioni disponibili nella libreria.
- Personalizzalo in base al tuo marchio, design del sito web e requisiti specifici.
- Visualizza in anteprima come appare il tuo popup finito nella versione mobile e desktop del sito.
- Imposta le regole di visualizzazione del popup (quando, dove, quanto spesso e a chi viene mostrato, e così via).
- Incorpora il popup sul tuo sito web e pubblicalo.
Questa opzione sembra molto più semplice della precedente, giusto? È così se scegli Claspo. Dopo tutto, sei già arrivato da noi, quindi vedi sotto come creare un popup in HTML con CSS (utilizzando il nostro editor intuitivo, naturalmente!) e mettiti subito al lavoro dopo aver letto l'articolo.
Come creare un pop-up con Claspo: 8 passaggi
La prima cosa da sapere è che Claspo, uno dei migliori strumenti popup, offre le stesse opzioni di personalizzazione complete del metodo che richiede il codice. Tuttavia, a differenza di quest'ultimo, Claspo è adatto a coloro che non possiedono competenze di programmazione e design. Rende la creazione di un pop-up in HTML un compito semplice e veloce. Vediamo come creare un pop-up utilizzando il nostro builder senza sforzo aggiuntivo.
Passo 1. Registrati e inizia
Crea un account gratuito su Claspo e clicca sul pulsante "Nuovo Widget". Ti viene offerta l'opzione di creare un widget da zero o utilizzare la galleria di modelli. Per risparmiare il massimo del tempo, opteremo per la seconda opzione.
Passo 2. Scegli il tuo modello
La nostra libreria di modelli contiene oltre 1000 template pronti all'uso che coprono molteplici casi d'uso. Puoi facilmente trovare la tua combinazione ideale utilizzando i filtri sul lato sinistro dello schermo. Ti consentono di scegliere il caso d'uso, il layout (HTML popup form, barra mobile, box mobile, widget che blocca i contenuti, ecc.), settore e tema. Una volta trovato un esempio che ti serve, vai all'editor.
Passo 3. Personalizza il tuo modello
Poiché questo articolo è dedicato a come realizzare un pop-up in HTML sul tuo sito web, abbiamo scelto un pop-up come layout e uno dei casi d'uso più popolari per esso — raccogliere i dati degli utenti. Come puoi vedere nell'esempio qui sotto, il nostro modello può essere modificato oltre ogni riconoscimento.
In questo caso, abbiamo sostituito l'immagine, creandone una con l'AI, sostituito il testo di un form pop-up in HTML, rimosso un campo di input, aggiunto una checkbox per il consenso al trattamento dei dati per rendere il pop-up conforme al GDPR, e infine modificato lo schema dei colori, incluso il colore del bottone CTA. L'unico limite è la tua immaginazione, quindi puoi personalizzare il modello ancora di più.
Passo 4. Anteprima del tuo pop-up
Una volta apportate tutte le modifiche necessarie, puoi visualizzare un'anteprima di come appare il tuo pop-up sulle versioni desktop e mobile del tuo sito web. Per farlo, clicca sull'icona del dispositivo corrispondente nella parte superiore destra dello schermo. Se non sei soddisfatto di qualcosa, puoi sempre continuare a modificare.
Passo 5. Imposta le regole di visualizzazione
Se ti stai chiedendo come creare un popup in HTML su un sito web senza infastidire gli utenti, Claspo ti copre. La nostra piattaforma offre capacità di targeting avanzate e regole di visualizzazione ottimali per un'esperienza utente fluida, preimpostate di default. Ad esempio, il popup di notifica HTML appare automaticamente una volta per sessione dopo che l'utente ha trascorso 20 secondi sulla pagina. Inoltre, smette automaticamente di essere visualizzato per coloro che hanno già lasciato il proprio email, aiutandoti a catturare efficacemente il pubblico del tuo sito web. Logico, vero?
E il tocco finale — proteggiamo automaticamente i tuoi pop-up dall'apparire contemporaneamente e sovrapporsi. Questo significa che puoi tranquillamente ampliare la tua strategia di generazione di lead con i popup senza timore di allontanare i visitatori.
Tuttavia, puoi sempre personalizzare le regole di visualizzazione per adattarle alle tue esigenze. Puoi facilmente attivare diverse opzioni per mirare a comportamenti specifici degli utenti, come abilitare i trigger di intenti di uscita. A differenza del metodo che richiede codice, devi solo cliccare alcuni pulsanti nella nostra sezione “Attivazione”, senza necessità di approfondire il CSS complesso del pop-up. Questo significa che un popup Claspo offre più controllo e flessibilità quando si crea un popup utilizzando i nostri strumenti intuitivi per raccogliere indirizzi email e altri dati preziosi.
Passo 6. Integra Claspo con la piattaforma scelta
Oltre alla questione di come creare un pop-up sul tuo sito web, devi capire come sincronizzare un messaggio popup in HTML con altri strumenti di marketing. Ma in Claspo, anche questo compito si riduce a pochi clic.
- Integra Claspo con un CRM, ESP o CDP appropriato dalla lista a tendina. In questo caso, tutte le informazioni sugli utenti raccolte tramite i nostri pop-up saranno trasferite istantaneamente alla piattaforma selezionata per la successiva segmentazione e lancio delle tue campagne automatiche.
- Integra Claspo con Google Analytics. Ti fornirà maggiori intuizioni su come gli utenti interagiscono con i tuoi pop-up e ti aiuterà a ottimizzarli per una migliore performance.
Passo 7. Installa il tuo pop-up
Una volta che il tuo pop-up è pronto, riceverai un codice script già pronto che devi incorporare nel tuo sito web. Probabilmente stai pensando, "Aspetta! Pensavo stessimo parlando di come creare un pop-up su un sito web senza abilità di coding per popup!" Ed è vero! In Claspo, devi solo copiare e incollare il codice finito seguendo una delle nostre istruzioni passo passo. Puoi trovarle facilmente sotto il tuo codice script nel nostro editor.
Tuttavia, se non riesci a gestirlo da solo, sentiti libero di contattare il nostro team di supporto e installeremo il messaggio pop-up in HTML sul tuo sito web completamente gratis!
Passo 8. Analizza e ottimizza
Il tuo pop-up è stato creato ed è attivamente al lavoro per aumentare le tue conversioni! Ma quanto successo ha? Puoi sempre tracciare gli indicatori chiave di performance di ogni pop-up, come il numero di visualizzazioni uniche, il numero di azioni mirate e il tasso di conversione direttamente in Claspo. Hai idee su come migliorare la performance del tuo pop-up? Usa il nostro A/B testing per sperimentare qualsiasi elemento e verificare cosa risuona meglio con il tuo pubblico.
Claspo mira a semplificare il tuo compito e ottenere i risultati desiderati più rapidamente. Con ciò in mente, il nostro team di marketing ha creato un modello di A/B testing. Contiene le fasi critiche di questo processo e ti permette di mettere in pratica qualsiasi ipotesi. Ottienilo gratuitamente e usalo per tutti i successivi test A/B (non solo quelli relativi ai pop-up).
Come formattare un pop-up per essere user-friendly
Disclaimer: l'aspetto ottimale del tuo pop-up può essere determinato solo attraverso test A/B. Tuttavia, alcune regole basilari ti aiuteranno a creare un design del pop-up che sia attraente per gli utenti ed efficace per te.
- Il branding è fondamentale, quindi assicurati che tutti gli elementi di design del pop-up siano coerenti con lo schema di colori e lo stile del tuo marchio. Questo aiuterà a rafforzare l'identità del tuo marchio e a far sembrare il pop-up una parte naturale del tuo sito web.
- Ricorda il principio di reciprocità e offri qualcosa in cambio delle loro informazioni di contatto.
- Rinforza il tuo messaggio con un'immagine per aumentare il click-through rate fino al 25%. Usa immagini ad alta risoluzione per assicurarti che appaiano bene su tutti i dispositivi. Immagini sfocate o pixelate possono inficiare la professionalità del tuo pop-up.
- Non aggiungere troppi campi di input. Le statistiche mostrano che i pop-up con due campi di input hanno il tasso di conversione più alto. Questo è sufficiente per chiarire i dettagli di contatto e il nome del potenziale cliente senza annoiarli con il tuo modulo pop-up.
- Assicurati che ogni campo sia chiaramente etichettato in modo che gli utenti sappiano esattamente quali informazioni sono richieste. Usa il testo segnaposto per fornire esempi o istruzioni aggiuntive.
- Progetta per la visibilità e la leggibilità. Usa un alto contrasto tra il testo e lo sfondo per rendere il tuo messaggio facile da leggere. Scegli font facili da leggere ed evita caratteri eccessivamente decorati che possono essere difficili da decifrare.
- Ottimizza per mobile. Assicurati che il tuo modulo pop-up sia reattivo e appaia bene su tutte le dimensioni dello schermo, compresi smartphone e tablet. Assicurati che i pulsanti e i link siano abbastanza grandi da poter essere facilmente toccati con un dito.
- Fai attenzione con i widget a schermo intero. Norman Nielsen Group consiglia di usare widget che bloccano il contenuto solo quando è necessario verificare l'età degli utenti, ottenere il loro consenso legale, ecc. In altri casi, possono rendere la tua pubblicità invadente e irritare gli utenti.
- Assicurati che ci sia un pulsante di chiusura chiaramente visibile in modo che gli utenti possano facilmente chiudere il pop-up se non sono interessati. Permetti agli utenti di chiudere il pop-up cliccando fuori di esso o premendo il tasto esc.
Suggerimenti per regolare la finestra del pop-up
Anche il pop-up più attraente visualmente può risultare invadente, allontanando i visitatori dal tuo sito. Pertanto, per rispondere alla domanda su come creare un pop-up che converte e non infastidisce, è fondamentale discutere non solo il design ma anche le regole di visualizzazione.
Non bombardare gli utenti con pop-up. Il 45.6% dei visitatori si lamentasul tuo sito. Con Claspo, puoi evitare questo in diversi modi:
- Utilizza l'intervallo silenzioso preconfigurato per evitare la comparsa simultanea di pop-up e mostralo una volta ogni tre minuti (l'intervallo può essere regolato)
- Scegli pagine con il contesto giusto per un pop-up specifico anziché mostrare lo stesso pop-up su tutto il sito web.
- Personalizza i tuoi pop-up, ad esempio solo per i visitatori alla prima visita, utenti da una specifica geolocalizzazione o coloro che sono arrivati al sito da una specifica fonte di traffico o campagna
- Il 28,6% degli utenti odia la visualizzazione immediata dei pop-up. Crea un pop-up che appare quando l'utente ha trascorso almeno alcuni secondi sul sito. In questo modo, dai loro tempo per ambientarsi e apprendere un po' di più sulla tua azienda prima di mostrargli la tua offerta. Questo migliora la loro esperienza di navigazione e aumenta le tue possibilità di conversione. Le nostre regole di visualizzazione preimpostate ritardano i pop-up di 20 secondi, ma puoi sempre regolare questo tempo.
- Usa un trigger di scorrimento per il tuo modulo pop-up. Ti consente di mostrare un pop-up quando l'utente ha scrollato la pagina di una certa percentuale, portando più conversioni rispetto a un trigger temporale. La ragione principale è che il tuo pop-up appare nel contesto giusto.
Ad esempio, se un utente ha letto un tuo articolo del blog fino a un certo punto, invita a iscriversi alla tua newsletter per ulteriori informazioni utili. Un pop-up può anche apparire quando l'utente ha scrollato fino alla sezione dei prezzi per offrire uno sconto sul primo ordine o una prova gratuita.
- Ferma il tuo pop-up in modo tempestivo. Il 20% degli utenti si infastidisce quando vede gli stessi moduli pop-up ogni volta che visita un sito web. Tieni cura della loro esperienza! Evita di mostrare il pop-up a coloro che lo hanno già chiuso una o più volte e a quelli che hanno già lasciato le loro informazioni di contatto. È facilmente realizzabile con Claspo.
Conclusione
Ecco fatto! Hai imparato a creare pop-up in HTML e il percorso incredibilmente semplice senza codice. Speriamo che tu abbia visto quanto Claspo possa realmente semplificare la tua vita e i tuoi progetti di web design. Con Claspo, non hai bisogno di alcuna esperienza di codifica precedente per ottenere il tuo primo widget per sito. La nostra piattaforma ti consente di creare pop-up che sembrano fantastici su qualsiasi dispositivo, dai desktop agli smartphone, garantendo un'esperienza senza interruzioni per i tuoi visitatori.
Che il tuo obiettivo sia costruire la tua lista di contatti con convincenti esempi di pop-up email, raccogliere feedback, o annunciare un'offerta speciale, puoi letteralmente avere pop-up mozzafiato in pochi minuti. Una volta scoperti casi di successo di utilizzo dei pop-up, naturalmente desideri creare anche un pop-up per il tuo sito web. Ecco perché ti invitiamo a fare il grande passo con il nostro piano gratuito a vita. Puoi iniziare a costruire e vedere risultati concreti per il tuo business senza spendere un centesimo. È il modo perfetto per utilizzare l'HTML (senza doverlo effettivamente programmare!) per migliorare le prestazioni del tuo sito web. Perché non provarlo e vedere quanto è facile creare widget efficaci per il tuo sito oggi stesso?
