# Design della hero section: la prima schermata del tuo sito web

[Canonical HTML page](https://gradiently.design/it/guide/hero-section-design)

I visitatori decidono se restare prima ancora di scorrere. La hero è il punto in cui decidono, quindi ogni parola e ogni pixel devono guadagnarsi il posto.

## The short version

- 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.

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](https://gradiently.design/it/guide/website-hero-background).

## Cosa va in una hero section

| Parte | Compito | Lunghezza tipica |
| --- | --- | --- |
| Eyebrow (facoltativo) | Contesto o categoria: «Per i caffè indipendenti» | Da 2 a 5 parole |
| Titolo | La promessa, con le parole del lettore | Da 4 a 10 parole |
| Riga di supporto | Come funziona o cosa lo rende diverso | Una frase, da 15 a 25 parole |
| Pulsante principale | L’unico passo successivo | Da 2 a 4 parole |
| Link secondario (facoltativo) | Un percorso a minore impegno: «Scopri come funziona» | Da 2 a 4 parole |
| Visual | Mostra il prodotto, il risultato o la sensazione | Un’immagine, un video in loop o uno sfondo |

Se una parte non aiuta il visitatore a decidere se restare, il suo posto è più in basso nella pagina.

## 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.

| Vago | Specifico |
| --- | --- |
| Potenziamo la tua crescita | Contabilità per freelance, aggiornata ogni venerdì |
| Il futuro del caffè | Chicchi single origin, tostati il lunedì, a casa tua entro giovedì |
| Il design reso semplice | Post social che sembrano il tuo brand, in ogni formato |
| Il tuo percorso di benessere comincia qui | Pilates in piccoli gruppi a Leeds, sei persone per lezione |
| Soluzioni innovative per team moderni | Calendari condivisi per cliniche che detestano le doppie prenotazioni |

Le versioni specifiche sono più lunghe, e va bene così. In un titolo la chiarezza batte la brevità.

Riserva la riga di supporto al come o alla prova, non a una ripetizione. Per approfondire le parole, aiutano [scrivere testi per i visual](https://gradiently.design/it/guide/writing-copy-for-visuals) e la [gerarchia visiva](https://gradiently.design/it/guide/visual-hierarchy).

## 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.

Una hero centrata per una torrefazione, con titolo e riga di supporto su un gradiente caldo

Centrato: le parole reggono tutto, lo sfondo crea l’atmosfera.

Una hero divisa per un software di gestione appuntamenti di cliniche, con il testo a sinistra e lo spazio per un’immagine del prodotto

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](https://gradiently.design/it/guide/color-contrast-accessibility) 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](https://gradiently.design/it/guide/gradient-overlay) e [testo su un gradiente](https://gradiently.design/it/guide/text-on-gradient).

## 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

La stessa hero in tre dimensioni di viewport comuni. Ciò che sta accanto al titolo su desktop deve andare sopra o sotto su un telefono.

```css
.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](https://gradiently.design/it/guide/webp-images).

La hero apre la pagina; il resto della pagina deve mantenere la promessa. [Il design delle landing page](https://gradiently.design/it/guide/landing-page-design) tratta le sezioni che seguono.

## FAQ

### 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.