# 4 blocks for a blog magazine page

The index page of a magazine blog has to make someone pick an article, not show how many you wrote. Four categories, the order, the card faults with images and the real catalogue counts.

> Page: https://ui.eneawork.it/blog/blocchi-per-blog-magazine
> Markdown: https://ui.eneawork.it/blog/blocchi-per-blog-magazine.md

*2026-10-31*

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.

## L'ordine dei blocchi

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

## Blocchi blog

## Blocchi newsletter

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

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.

Scegli la griglia dal numero di articoli che deve mostrare oggi e fra un anno, non dal numero che hai adesso: un blocco a tre card con sei articoli lascia due buchi in fondo.

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

## FAQ

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