In breve
- La hero section è la prima schermata intera di un sito web e deve dire cos’è il prodotto, per chi è e cosa fare dopo.
- Le parti fondamentali sono un titolo, una riga di supporto, una sola call to action principale e un visual che mostra il prodotto o crea l’atmosfera.
- I titoli specifici che nominano un risultato funzionano meglio degli slogan che potrebbero appartenere a qualsiasi azienda.
- Una hero ha bisogno di un’azione principale; un secondo link più discreto va bene, ma più scelte la diluiscono.
- Progetta di proposito la versione per telefono, perché molti visitatori vedono la hero per la prima volta su uno schermo stretto.
In questa pagina
Una buona hero section risponde a tre domande prima che qualcuno scorra: cos’è, è per me, e cosa faccio adesso. La hero è la prima schermata del tuo sito, di solito un titolo, una frase di supporto, un solo pulsante principale e un visual. Tutto il resto (loghi, badge, un secondo pulsante, un carosello) deve giustificare lo spazio che toglie a questi quattro elementi. Questa guida tratta le parole, il layout e la realizzazione; per il solo sfondo, vedi sfondi per la hero del sito web.
Cosa va in una hero section
Compito
Lunghezza tipica
Lunghezza tipica
Compito
Lunghezza tipica
Compito
Lunghezza tipica
Compito
Lunghezza tipica
Lunghezza tipica
Scrivere il titolo della hero
Il titolo è la frase più difficile del tuo sito. Gli slogan brillanti falliscono perché potrebbero essere di chiunque. Uno buono nomina a chi è rivolto, cosa ottiene chi lo legge o il problema che toglie, con le parole che i tuoi clienti usano davvero. Leggilo ad alta voce accanto alla home di un concorrente: se potessi scambiarli senza che nessuno se ne accorga, non è abbastanza specifico.
Specifico
Specifico
Specifico
Specifico
Specifico
Riserva la riga di supporto al come o alla prova, non a una ripetizione. Per approfondire le parole, aiutano scrivere testi per i visual e la gerarchia visiva.
Tre layout di hero che funzionano
- Centrato. Titolo, riga e pulsante impilati al centro sopra uno sfondo. Forte per brand, lanci e prodotti che sono più una sensazione che una schermata.
- Diviso. Parole a sinistra, immagine del prodotto o screenshot a destra. Il migliore quando vedere il prodotto è l’argomento: app, beni fisici, cibo.
- Immagine o video a tutto schermo. Una foto o un loop riempie lo schermo con le parole su una zona calma. Adatto a hotel, ristoranti, eventi e portfolio, se la leggibilità è gestita bene.
Centrato: le parole reggono tutto, lo sfondo crea l’atmosfera.
Diviso: parole da un lato, spazio dall’altro per lo screenshot del prodotto.
La call to action
Un solo pulsante principale, visivamente l’elemento più forte dopo il titolo. Scrivi sull’etichetta cosa succede dopo, non un verbo generico: «Inizia la prova gratuita», «Prenota un tavolo», «Vedi il menu». Se aggiungi un’opzione secondaria, rendila un link di testo più discreto, così i due non competono mai.
Da evitare
- Tre pulsanti dello stesso peso
- «Invia», «Scopri di più» o «Clicca qui»
- Un pulsante dello stesso colore dello sfondo
- Il pulsante sotto la piega su un telefono
- Un carosello automatico di messaggi diversi
Da fare
- Un pulsante, un link più discreto
- Un’etichetta che dice cosa succede dopo
- Un colore del pulsante che non compare altrove nella schermata
- Titolo e pulsante visibili su un telefono largo 390 px
- Un solo messaggio, detto bene
Sfondi della hero e leggibilità
Lo sfondo è metà dell’impressione e il motivo più comune per cui una hero fallisce. Foto affollate e gradienti accesi lottano con il titolo, e un overlay scuro su tutto appiattisce l’atmosfera. Prevedi una zona calma dietro le parole, tieni lontano da esse il dettaglio più fitto, e controlla il contrasto a ogni larghezza dello schermo, perché l’area dietro il testo si sposta quando il layout si riorganizza.
Qui un Mark di Gradiently è utile: la sua zona più calma e a più alto contrasto si sposta dietro le tue parole e il colore del testo viene scelto dalla sua stessa palette, così il titolo si legge a 1920×1080 e su un telefono senza riquadri né ombre. Per gli approcci in CSS, vedi overlay a gradiente e testo su un gradiente.
Progettare la hero per i telefoni
Su un telefono la hero è stretta e alta, quindi i layout divisi si impilano e le immagini a tutto schermo vengono ritagliate di brutto. Decidi cosa mostra il telefono invece di lasciare che accada: titolo e pulsante devono essere visibili senza scorrere, il visual può spostarsi sotto o ridursi.
Desktop 1920×1080
1920 × 1080
Portatile 1440×900
1440 × 900
Telefono 390×844
390 × 844
.hero {
min-height: min(100svh, 56rem);
display: grid;
place-items: center;
padding: clamp(1.5rem, 5vw, 4rem);
text-align: center;
}
.hero h1 {
font-size: clamp(2.25rem, 6vw, 4.5rem);
line-height: 1.05;
max-width: 18ch;
text-wrap: balance;
}
.hero p {
max-width: 40ch;
margin-inline: auto;
}svh si dimensiona sullo schermo visibile del telefono, clamp() scala il testo tra telefono e desktop, e text-wrap: balance bilancia le righe del titolo.Una checklist per la hero section
- 1
Scrivi prima il titolo
Prima di scegliere le immagini, scrivi cinque titoli e prendi il più specifico. Il layout segue le parole.
- 2
Riduci a una sola azione
Scegli il singolo passo successivo che vuoi far compiere alla maggior parte dei visitatori e fanne l’unico pulsante.
- 3
Scegli un visual che dimostri o crei atmosfera
Uno screenshot, una foto del prodotto o uno sfondo che porta il brand. Non una foto d’archivio di persone che indicano i portatili.
- 4
Controlla la leggibilità ovunque
Ridimensiona il browser da largo a stretto e osserva il testo contro lo sfondo per tutto il tragitto.
- 5
Mantienila veloce
L’immagine della hero è spesso la cosa più pesante della pagina. Dimensionala bene e servila in WebP o AVIF.
La hero apre la pagina; il resto della pagina deve mantenere la promessa. Il design delle landing page tratta le sezioni che seguono.
Le domande più frequenti
Che cos’è una hero section in un sito web?
La prima schermata intera di una pagina, above the fold. Di solito contiene un titolo, una riga di supporto, un pulsante principale e un visual.
Cosa deve dire il titolo di una hero section?
Cosa fa il prodotto e per chi, con le parole del cliente. I risultati specifici battono gli slogan generici.
Quanti pulsanti deve avere una hero section?
Un pulsante principale. Un secondo link di testo più discreto per un’opzione a minore impegno va bene, ma più scelte indeboliscono quella principale.
Che dimensioni deve avere l’immagine di una hero?
Progetta a 1920×1080 per desktop e fornisci versioni più piccole per i telefoni tramite srcset, così chi è da mobile scarica un file più leggero.
Una hero section deve riempire tutto lo schermo?
Non necessariamente. Una hero a schermo intero si addice ai siti guidati dal brand; i siti di prodotto spesso traggono vantaggio da una hero più bassa che lascia intravedere il contenuto sotto.
Scritto da Gradiently
Il team dietro Gradiently, uno strumento di design costruito attorno ai Mark: gradienti vivi che fanno sembrare tuo tutto ciò che progetti.
Vedi il nostro profilo