Blocks
4 blocchi per una pagina blog magazine
La pagina indice di un blog magazine deve far scegliere un articolo, non mostrare quanti ne hai. Quattro categorie, l'ordine, i guasti delle card con immagini e i conteggi reali del catalogo.
In sintesi
- La griglia si sceglie dal numero di articoli che regge, non dal titolo del blocco.
- Copertine con proporzioni diverse spostano il testo: serve un rapporto fisso.
- La newsletter va dopo due articoli letti, non prima.
La pagina indice di un blog magazine deve far scegliere un articolo, non mostrare quanti ne hai scritti. Il catalogo indicizza 51 blocchi hero, 20 blog, 6 newsletter e 45 footer, letti il 2026-11-01: quattro categorie bastano per una pagina indice.
Questa pagina riguarda l'indice, non il singolo articolo. I conteggi sono quelli pubblicati dalle pagine categoria, misurati lo stesso giorno: 20 blocchi blog sono pochi rispetto ai 51 hero, e questo dice già che la griglia va adattata più spesso di quanto si creda.
Cosa deve fare la pagina
Un magazine non vende un articolo: vende l'idea che valga la pena tornare. La pagina indice deve mostrare il tema in una riga, mettere in evidenza un pezzo forte, e poi elencare gli altri con data e tempo di lettura. Chi arriva da una ricerca vuole capire in tre secondi se il sito parla del suo argomento, e la risposta non è un carosello di dodici copertine.
- Un tema riconoscibile in una riga, non «benvenuti nel nostro blog».
- Un pezzo in evidenza con titolo, occhiello e data.
- Almeno otto articoli visibili senza click, con data e minuti.
- Una via d'uscita per chi cerca l'archivio o un autore.
L'ordine dei blocchi
| Sezione | Ruolo nella pagina | Blocchi disponibili |
|---|---|---|
| hero | dichiarare il tema del magazine | 51 |
| blog | far scegliere un articolo | 20 |
| newsletter | trattenere chi legge due pezzi | 6 |
| footer | dare archivio, autori e note legali | 45 |
Hero, blog, newsletter, footer. Il newsletter sta dopo la griglia perché chiede un'azione prima che il lettore abbia visto qualcosa: spostarlo in cima riduce la scelta degli articoli, che è il vero compito della pagina. Se il magazine ha un pezzo del mese, il blocco blog va aperto da quello e non ordinato per data pura.
I blocchi da cui partire
Le tabelle qui sotto elencano blocco, registry, file e categoria. La categoria dichiarata non sempre coincide con quella della tabella: il blocco newsletter di questo catalogo arriva da un registry che lo classifica come dialog, quindi aspettati un componente con overlay e non una striscia in pagina.
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 blog
| Blocco | Registry | File | Categoria |
|---|---|---|---|
| Blog 01 - Latest Blog & News Grid | Shadcn Space | 2 | blog |
| Blog | 1st-pouf | 1 | blog |
Blocchi newsletter
| Blocco | Registry | File | Categoria |
|---|---|---|---|
| Dialog 01 - Newsletter Subscription Dialog | Shadcn Space | 2 | dialog |
| Newsletter 01 - Newsletter Subscription CTA | Shadcn Space | 2 | newsletter |
Blocchi footer
| Blocco | Registry | File | Categoria |
|---|---|---|---|
| Footer 01 - Agency Footer Layout | Shadcn Space | 3 | footer |
| Footer 02 - Dark Conversion Footer | Shadcn Space | 2 | footer |
Cosa si rompe in produzione
Il problema ricorrente è la card con immagine: il blocco presume copertine 16:9 e riceve file verticali, così ogni riga ha un'altezza diversa e il testo si sposta mentre le immagini arrivano. Il secondo guasto è la paginazione: il blocco blog mostra «load more» e non dice quanti articoli restano, quindi il lettore non sa se vale la pena cliccare.
- Copertine senza aspect-ratio: righe di altezza diversa e layout shift.
- Estratto lungo 300 caratteri dentro una card da 120: il testo esce.
- Data in formato americano dentro una pagina italiana.
- Newsletter con doppio invio: due iscrizioni per un click.
curl "https://ui.eneawork.it/api/blocks/category/blog?limit=10"La chiamata elenca i blocchi blog con fonte e file: serve a contare quante varianti esistono prima di impegnarsi su una griglia a tre colonne. Con 20 blocchi totali, la scelta reale è più stretta di quanto sembri dal numero dei componenti.
Un limite da dichiarare
I 20 blocchi blog sono in massima parte griglie statiche: nessuno porta ricerca, filtri per tag o paginazione server. Se il magazine supera i 40 articoli, il blocco resta utile per l'impaginazione ma la logica di caricamento va scritta a mano, e questo è il costo che il catalogo non mostra.
Nel catalogo: hero del magazine, componenti e tutti i blocchi. Le guide: struttura App Router, stale-while-revalidate e peso di una libreria UI.
Domande frequenti
La pagina indice deve mostrare tutti gli articoli?
No: deve mostrarne abbastanza da far capire il taglio. Otto o dieci in pagina bastano, purché siano recenti e leggibili senza click. L'archivio completo serve a chi è già convinto e va linkato, non riversato in home.
Quanti articoli regge un blocco blog tipico?
Da tre a sei, a seconda delle colonne. I blocchi del catalogo non dichiarano un massimo, ma la griglia è scritta per quel numero: oltre, la card mantiene l'altezza del contenuto più corto e il testo si allunga in modo irregolare.
Meglio data o tempo di lettura sulla card?
Entrambi, ma la data è l'unica che dice se il pezzo è vecchio. Il tempo di lettura aiuta a decidere se aprirlo adesso; senza data, un articolo di tre anni fa sembra nuovo e il lettore si sente ingannato quando lo scopre.
Il blocco newsletter conviene in un dialog o in pagina?
In pagina, sotto la griglia, se il magazine punta sulla lettura. Il dialog interrompe e nel catalogo arriva già con overlay: usalo solo per un'iscrizione esplicita, mai all'ingresso, perché su mobile copre l'articolo che stavi vendendo.
Come evito che la griglia salti mentre carica?
Dichiarando larghezza e altezza, o un aspect-ratio fisso, su ogni immagine di copertina. Il browser riserva lo spazio prima del download e il testo non si sposta. Senza queste due proprietà, il layout shift si misura e peggiora il punteggio di pagina.