Generatore di sezione hero (parte alta della pagina)

Generatore di sezione hero (parte alta della pagina): a cosa serve

La sezione hero è la prima schermata del sito, dove la persona decide in pochi secondi se continuare. Ha bisogno di una promessa chiara, una breve spiegazione e un’azione principale.

Il generatore crea l’hero con immagine di sfondo e livello scuro regolabile perché il testo resti leggibile, oppure con testo e immagine affiancati, titolo di dimensione fluida, pulsante principale e secondario. L’immagine entra come img con fetchpriority=high e senza caricamento differito, perché di solito è l’elemento più grande della prima schermata (LCP).

Come si usa

1. Scrivi titolo, sottotitolo e pulsanti.
2. Scegli immagine, layout e colori.
3. Copia il codice e incollalo in cima alla pagina.

Quando usarlo

• Home page di un’attività locale.
• Landing page di una campagna.
• Pagina di lancio.

Domande frequenti

Cosa mettere nell’hero?

Il risultato che il cliente vuole, in una frase (il titolo), come lo ottieni (il sottotitolo) e una sola azione principale, come Richiedi un preventivo su WhatsApp. Un secondo pulsante discreto è facoltativo. Tutto deve stare nella prima schermata, senza dover scorrere.

Come fa l’immagine a non rallentare il sito?

L’immagine dell’hero di solito è l’elemento più grande della prima schermata, quello che Google misura come LCP. Il codice usa un tag img (non background-image), con fetchpriority=high e senza loading=lazy, perché il browser la scarichi per prima. Usa l’immagine in WebP e della dimensione giusta.

E il testo sopra la foto?

Il livello scuro (overlay) sopra l’immagine garantisce il contrasto del testo bianco su qualsiasi foto. Regola l’opacità finché il testo non è facile da leggere; di solito bastano dal 45% al 60%.

È davvero gratis?

Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.

Strumenti simili