Blocks
7 blocchi per una pagina landing SaaS
Una landing SaaS deve far iniziare una prova, non elencare funzioni. Sette categorie, l'ordine tra prezzi e prova sociale, i guasti di toggle e loghi e i conteggi reali del catalogo.
In sintesi
- Sette categorie per una landing SaaS, ma la prova parte dal pricing.
- Il toggle mensile/annuale deve cambiare il prezzo, non solo l'etichetta.
- Quarantuno blocchi pricing, quasi tutti per tre piani.
Una landing SaaS deve far iniziare una prova, non elencare funzioni. Il catalogo indicizza 51 blocchi hero, 53 feature, 41 pricing, 50 testimonial, 74 logo, 24 faq e 27 cta, letti il 2026-11-01: sette categorie per una pagina di vendita.
I numeri sono conteggi per categoria, misurati lo stesso giorno sulle pagine pubbliche. La categoria più ricca è logo con 74 blocchi, la più povera delle sette è faq con 24: il catalogo ha più strisce di loghi che risposte alle obiezioni, e questo dice dove finirà il lavoro manuale.
Cosa deve fare la pagina
Chi arriva su una landing SaaS non ha ancora deciso se il problema è grave: la pagina deve dirgli che esiste una scorciatoia e che costa poco provarla. Deve mostrare il prodotto in uso, non un mockup generico, dire quanto costa e cosa succede dopo la prova. La demo interattiva vale più di tre paragrafi di funzioni, purché si carichi in meno di due secondi.
- Un risultato misurabile nel titolo, non «la piattaforma tutto-in-uno».
- Tre funzioni, ognuna con la prova che funziona.
- Prezzo con periodo di fatturazione esplicito e cosa finisce dopo la prova.
- Una CTA sola, ripetuta con lo stesso verbo in tutta la pagina.
L'ordine dei blocchi
| Sezione | Ruolo nella pagina | Blocchi disponibili |
|---|---|---|
| hero | promettere un risultato in una riga | 51 |
| feature | spiegare come funziona | 53 |
| pricing | rendere chiaro il costo | 41 |
| testimonial | portare la voce di chi paga | 50 |
| logo | mostrare chi già si fida | 74 |
| faq | chiudere le obiezioni | 24 |
| cta | far partire la prova | 27 |
Hero, feature, logo, testimonial, pricing, faq, cta. I loghi stanno alti perché costano poco spazio e danno fiducia subito, ma vanno prima delle feature solo se sono clienti riconoscibili nel settore. Il pricing sta dopo la prova sociale: chiedere un prezzo a chi non ha ancora visto nessuno che paga funziona peggio. FAQ e CTA chiudono, e il CTA finale ripete il verbo del primo.
I blocchi da cui partire
Le tabelle riportano blocco, registry, file e categoria. Il pricing da 2 file è una griglia a tre colonne senza toggle: il cambio mensile e annuale lo aggiungi tu, e va collegato al prezzo vero. Il testimonial da 5 file include lo slider, che su una landing è spesso un ostacolo: tre citazioni statiche si leggono meglio di sei che ruotano.
Blocchi hero
| Blocco | Registry | File | Categoria |
|---|---|---|---|
| Hero 01 - Agency Hero Section | Shadcn Space | 8 | hero |
| Hero 02 - Real Estate Hero Section | Shadcn Space | 6 | hero |
Blocchi feature
| Blocco | Registry | File | Categoria |
|---|---|---|---|
| Feature 01 - Feature with Testimonials | Shadcn Space | 3 | feature |
| Feature 02 - Three Columns Feature with Icons | Shadcn Space | 3 | feature |
Blocchi pricing
| Blocco | Registry | File | Categoria |
|---|---|---|---|
| Pricing 01 - Startup Pricing Plans | Shadcn Space | 2 | pricing |
| Pricing 02 - Scalable Pricing Table | Shadcn Space | 2 | pricing |
Blocchi testimonial
| Blocco | Registry | File | Categoria |
|---|---|---|---|
| Testimonial 02 - Testimonial Slider Showcase | Shadcn Space | 5 | testimonial |
| Feature 01 - Feature with Testimonials | Shadcn Space | 3 | feature |
Cosa si rompe in produzione
Il primo guasto è il toggle dei prezzi: cambia la cifra a schermo ma il link porta sempre al piano mensile, quindi il cliente paga più di quanto ha letto. Il secondo è la striscia di loghi in scala di grigi: metà dei marchi diventa illeggibile, e un logo illeggibile è peggio di nessun logo. Il terzo è la feature grid costruita per sei voci e riempita con tre.
- Toggle che non aggiorna il link di checkout: si paga il mensile.
- Loghi grigi sotto il rapporto 3:1: illeggibili su mobile.
- Testimonial inventati: il primo cliente vero lo nota.
- CTA con quattro verbi diversi: nessuno ricorda cosa succede dopo il click.
curl "https://ui.eneawork.it/api/blocks/category/pricing?limit=10"La chiamata restituisce dieci pricing con fonte e file: serve a vedere quanti prevedono tre piani e quanti quattro, e quanti includono il toggle. Con 41 blocchi in categoria, la differenza tra un blocco da 2 file e uno da 6 è quasi sempre il numero di stati del periodo di fatturazione.
Un limite da dichiarare
I 41 blocchi pricing sono in massima parte griglie a tre piani con una cifra statica. Confronti a cinque piani, calcolo del risparmio annuale e prezzi per utente calcolati al volo restano fuori: chi vende a consumo o a posti deve riscrivere la tabella, non solo i testi.
Nel catalogo: blocco pricing, hero SaaS e tutti i blocchi. Le guide: tabelle prezzi in 10 minuti, hero misurati e copy-paste o headless.
Domande frequenti
Quante sezioni servono davvero su una landing SaaS?
Sette bastano: hero, feature, loghi, testimonial, pricing, FAQ e CTA. Ogni sezione in più sposta il pricing più in basso, e il pricing è il punto in cui il visitatore scopre se può permettersi il prodotto.
I loghi dei clienti vanno prima o dopo le funzioni?
Prima, ma solo se sono marchi che il visitatore riconosce nel suo settore. Una striscia di nomi sconosciuti occupa la stessa altezza e non convince nessuno: in quel caso meglio tre citazioni con ruolo e azienda.
Come funziona il toggle mensile e annuale?
Cambia la cifra, il periodo e il link di checkout, e mostra il risparmio in cifre assolute. Se cambia solo l'etichetta «al mese», il cliente arriva al pagamento con un importo diverso da quello che ha letto e chiede il rimborso.
La prova gratuita va in pagina o nel pricing?
Nel pricing, come riga sotto il piano consigliato, con la durata in giorni e cosa serve per iniziare. Un bottone «prova gratis» senza durata né requisiti produce iscrizioni che si fermano al primo campo del form.
Meglio una demo interattiva o uno screenshot?
La demo, se pesa meno di 200 KB e parte senza login. Uno screenshot grande convince meno ma non si rompe; una demo lenta fa perdere più visite di quante ne guadagni, quindi va caricata dopo il primo paint.