La hero section di un’email è la prima area visibile del messaggio, composta tipicamente da un’immagine o un banner, un titolo e una call to action. È l’elemento che determina se il lettore continua a scorrere o chiude l’email nei primi 2 secondi.
Il problema: la maggior parte delle hero section si rompe su Outlook (che blocca le immagini di default), su mobile (saturazione cognitiva) e in dark mode (inversione cromatica). In questa guida tecnica costruiamo una hero section ibrida che converte anche quando la grafica non carica.
Quando un utente apre la tua email, non vede “tutto il messaggio”. Vede solo i primi 600-800 pixel verticali.
Questa porzione di schermo, nota come Above the Fold, è la “Hero Section” della tua email.
In questo spazio ristretto si gioca una buona % della partita dopo l’apertura
Se la Hero Section fallisce nel comunicare il valore in 3 secondi netti, l’utente non scrollerà. Tornerà all’inbox e passerà alla mail successiva. Il problema è che la maggior parte dei designer tratta l’email come se fosse un sito web o, peggio, un volantino stampato. Ma l’email è un ambiente ostile.
Google blocca le immagini per risparmiare dati. Outlook le blocca per sicurezza. La Dark Mode inverte i tuoi colori. Se la tua Hero Section è un’unica, grande immagine JPEG (il classico “Bannerone”), per il 30-40% dei tuoi utenti la tua email appare come un rettangolo bianco vuoto.
Complimenti, hai appena inviato il nulla.
In questa guida operativa ti insegno a costruire una Email Hero Section “Bulletproof”, progettata per convertire in qualsiasi condizione tecnica.
Qua invece ti lascio un link se vuoi spulciare qualche statistica interessante a tema email marketing.
Iniziamo distruggendo il mito più dannoso.
Molti brand fashion e luxury inviano email composte interamente da immagini.
Sia chiaro, non è un errore utilizzare il design nelle email, ne ho parlato in questi 2 articoli:
Ma andiamo a ricercare la strategia migliore.
Il Grande Dibattito: Image-Only vs Live Text
Esistono due approcci per costruire una Hero Section.
Nessuno è “sbagliato” in assoluto, ma devi sceglierli in base al tuo modello di business e saperne gestire i rischi.
1. L’Approccio “Image-Only” (La Scelta Estetica)
Tutta la Hero (Sfondo + Titolo + Foto) è un’unica immagine JPG o GIF esportata da Photoshop/Figma.
-
Chi lo usa: Brand Fashion, Luxury, Design (es. Zara, Apple).
-
Vantaggio: Controllo tipografico totale. Puoi usare font proprietari, sovrapposizioni complesse e layout artistici impossibili da fare in HTML.
-
Il Rischio: Se le immagini non caricano (e su Outlook di default NON caricano), l’utente vede il nulla. Inoltre, su Mobile, il testo dentro l’immagine si rimpicciolisce fino a diventare illeggibile.
La Soluzione Tecnica: L’ALT Text” Se scegli questa strada, non puoi dimenticare di inserire un Alt Text dettagliato per le immagini
Puoi anche usare lo Styled ALT Text.
Si tratta di un CSS inline per formattare il testo alternativo in modo che sembri un titolo reale quando l’immagine è bloccata.
Snippet Codice:
<img src="hero.jpg" alt="SALDI: -50% SU TUTTO" style="font-family: Helvetica, sans-serif; font-size: 24px; font-weight: bold; color: #ff0000; text-align: center;">
In questo modo, anche se l’immagine fallisce, il messaggio di vendita (H1) tecnicamente rimane visibile e formattato.
Vuoi vedere come creo una Hero Section totalmente Designed? Guarda questo video.
2. L’Approccio “Ibrido” (La Scelta Funzionale)
Immagine di sfondo (o colore solido) con testo HTML (Live Text) e bottone HTML sovrapposti.
-
Chi lo usa: SaaS, B2B, Media, E-commerce focalizzati sulla conversione (es. Amazon, Booking).
-
Vantaggio: Il testo è sempre leggibile, selezionabile e si adatta perfettamente al mobile (puoi ingrandire il font su schermi piccoli).
-
Il Rischio: Sei limitato ai “Web Safe Fonts”, perché i custom font spesso saltano su Gmail App.
La Regola del Bilanciamento (60/40) Indipendentemente dalla scelta, ricorda: per i filtri Antispam, un’email composta al 100% da immagini è sospetta.
Assicurati che l’email sia bilanciata.
Anatomia della Hero Section Perfetta
Ecco gli elementi che compongono l’architettura della conversione, impilati per priorità visiva.
1. L’Header (Il Marchio Invisibile)
L’errore comune è mettere un logo gigante (200px) al centro, spingendo il contenuto vero troppo in basso.
-
Best Practice: Logo piccolo (max 100-120px di larghezza), centrato o a sinistra.
2. La Headline (H1): La Proposta di Valore
Deve rispondere alla domanda inconscia: “Perché dovrei continuare a leggere?”
-
Copy: Sii diretto.
-
❌ Debole: “Nuova Collezione Autunno/Inverno”
-
✅ Forte: “Il Freddo è Arrivato. Copriti con Stile.” (Beneficio + Contesto).
-
-
Dimensioni: Se usi Live Text, punta a 30-36px su Desktop e 24-28px su Mobile.
3. La CTA Primaria (Bulletproof Button)
-
Copy: Orienta all’azione. “Acquista Ora”, “Scopri i Modelli”, “Leggi la Guida”, “Indossalo domani”
-
Isolamento: Lascia almeno 30px di spazio vuoto (Whitespace) sopra e sotto per dargli importanza.
- Design: fallo spiccare sia tramite le dimensioni che tramite i colori rispetto al resto della tua email.
Mobile Optimization: L’arte dell’Impilamento
Su Desktop, la Hero Section può avere un layout orizzontale “Z-Pattern” (Testo a Sinistra, Immagine a Destra). Ma su Mobile, tutto collassa in una colonna unica. Qui l’ordine dei fattori cambia il risultato.
La Sequenza Mobile Corretta:
-
Headline (H1): Il messaggio prima di tutto.
-
Visual: L’immagine di supporto.
-
CTA: Il bottone.
Dark Mode: Il Killer Silenzioso
Nel 2026, oltre il 40% degli utenti ha il cellulare in Dark Mode. I client invertono i colori: lo sfondo bianco diventa nero, il testo nero diventa bianco.
I 2 Disastri da evitare:
-
Il Logo Fantasma: Se hai un logo PNG nero trasparente, su sfondo nero sparirà.
-
I Bordi Bianchi: Se tagli male le JPG, vedrai brutti riquadri bianchi.
Cosa hai appreso in questa Guida
La Hero Section di un’email non è un esercizio di stile, è un esercizio di Ingegneria della Compatibilità.
Hai imparato che:
-
Puoi usare immagini (Image-Only) ma solo se usi l’ ALT Text come rete di sicurezza.
-
la CTA deve seguire determinati parametri
-
Su Mobile devi gestire l’impilamento o creare immagini verticali dedicate.
-
La Dark Mode richiede attenzione
Ora apri la tua ultima newsletter.
Disattiva le immagini nel tuo client di posta.
Cosa vedi? Se vedi un rettangolo vuoto senza nemmeno un titolo formattato, hai appena trovato il motivo per cui il tuo Click Rate è stagnante.
Riprogettala.
A presto, Luca.
N.B. Se scegli la strada del design attento all’upload. Ne parlo qui.
Vuoi andare più a fondo sull’email marketing?
Questo articolo fa parte del mio cluster sull’email marketing.
Se vuoi avere una visione completa del canale, dalla strategia alle automazioni, dalla deliverability alla segmentazione, ho costruito una pagina pillar che collega tutti i sotto-temi in un unico ecosistema.
→ Email Marketing: Guide e Strategie
Se invece hai un brand o un ecommerce e vuoi costruire un sistema email che genera fatturato prevedibile, possiamo lavorarci insieme.
→ Scopri il servizio di Affiancamento Email Marketing
Domande Frequenti
Cos’è la hero section di un’email?
È la prima area visibile del messaggio, composta da immagine o banner, titolo e call to action. Determina se il lettore continua a leggere o chiude l’email nei primi 2 secondi.
Perché la hero section si rompe su Outlook?
Outlook blocca le immagini per impostazione predefinita. Se la hero section è composta solo da un’immagine, l’utente vede uno spazio vuoto. La soluzione è una hero section ibrida con testo HTML visibile anche senza immagini.
Quanto deve essere grande la hero section su mobile?
L’altezza ideale su mobile è tra 250px e 350px. Oltre questa misura, la hero section occupa tutto lo schermo senza mostrare il contenuto sottostante, riducendo lo scroll e il click-through rate.
Luca Attolini
Email Marketer
Studio e applico strategie di email marketing, automazioni e copywriting per aziende fisiche, brand e ecommerce che vogliono scalare il loro business. 4 volte premiato da Marketers. Valutato Eccellente su Trustpilot.