Se stai usando Framer per il tuo sito personale o per i tuoi clienti, il CMS integrato e una delle funzionalita che cambiano le regole del gioco. A differenza di Webflow o WordPress, non hai bisogno di plugin esterni, database separati o configurazioni complicate: tutto vive all interno del tuo progetto Framer.

In questa guida pratica vedremo come costruire un blog dinamico da zero, passo dopo passo. Alla fine avrai un sistema di blog completamente funzionante, con pagine articoli generate automaticamente e una lista aggiornata sulla homepage.

Cos e il Framer CMS e quando usarlo

Il CMS (Content Management System) di Framer ti permette di creare collection strutturate di dati, simili a tabelle di un database. Ogni collection ha dei campi che tu definisci come titolo, data, immagine, contenuto e ogni riga della collection e un articolo o un elemento del tuo sito.

Quando usarlo? Il CMS di Framer e perfetto per blog, portfolio con case studies, cataloghi prodotti, team members o qualsiasi contenuto che si ripete con la stessa struttura. Se hai piu di 5-6 elementi simili da gestire, il CMS e la scelta giusta.

Crea la tua prima Collection Blog

Per iniziare, apri il tuo progetto Framer e vai su CMS dal pannello laterale sinistro. Clicca su Nuova Collection e chiamala Blog o Articoli.

Ora aggiungi i campi fondamentali per ogni articolo: Titolo (stringa), Slug generato automaticamente dal titolo, Data di pubblicazione (data), Immagine di copertina (immagine), Contenuto (rich text) e facoltativamente una Categoria per filtrare gli articoli. Puoi sempre aggiungere altri campi in seguito, come un sottotitolo, l autore o i tag.

Una volta creata la collection, aggiungi i tuoi primi articoli cliccando sul pulsante + per creare una nuova riga e compilando tutti i campi. Il rich text editor di Framer ti permette di formattare il contenuto con headings, grassetto, corsivo, liste e immagini inline.

Configura il Template della Pagina Articolo

Questa e la parte piu importante: il template e la pagina che verra usata automaticamente da Framer per mostrare ogni singolo articolo. Vai su Pagine e crea una nuova pagina con un path dinamico, per esempio /blog/:Blog dove Blog e il nome della tua collection.

All interno di questa pagina, aggiungi i tuoi elementi di layout: un titolo, l immagine, la data e il corpo dell articolo. Per ogni elemento, clicca sul campo Text o Image e collegalo alle variabili della tua collection usando il pannello Variable. Per esempio, il titolo della pagina si collega alla variabile Titolo della collection Blog.

Il bello del template dinamico e che devi crearlo una sola volta: Framer lo usera automaticamente per tutti gli articoli presenti nella tua collection, generando un URL univoco per ciascuno basato sullo slug.

Aggiungi la Lista Articoli sulla Homepage

Ora che hai il template degli articoli, vuoi mostrare una lista degli ultimi post sulla tua homepage o sulla pagina blog. Seleziona un Frame sulla pagina, poi nel pannello destra vai su CMS Collection List e scegli la collection Blog.

Definisci il componente ripetuto: e il card che verra duplicato per ogni articolo. Puoi personalizzarlo con immagine, titolo, data e un link che punta alla pagina dinamica dell articolo. Framer gestira automaticamente la generazione del link corretto per ogni voce della collection.

Vuoi mostrare solo gli articoli di una certa categoria? Usa i filtri della Collection List: puoi filtrare per qualsiasi campo della tua collection. Puoi anche ordinare per data, impostare un limite al numero di articoli mostrati e aggiungere la paginazione per collection molto grandi.

Gestisci i Contenuti e Pubblica

Il grande vantaggio del CMS Framer e che puoi aggiornare i contenuti senza toccare il design. Apri il progetto, vai sul CMS, aggiungi o modifica un articolo e pubblica: il sito si aggiorna in pochi secondi.

Se lavori con clienti, puoi condividere l accesso al CMS tramite le impostazioni dello Workspace. Il cliente potra gestire i contenuti autonomamente senza rischiare di rovinare il design, perche il CMS e separato dal canvas di progettazione.

Per la SEO, configura i meta title e la meta description di ogni articolo usando le variabili della collection. Framer genera automaticamente URL puliti basati sullo slug, quindi hai gia una buona base di partenza per il posizionamento organico.

Conclusione

Il CMS di Framer e uno strumento potente che molti designer italiani non sfruttano abbastanza. Con questa guida hai tutte le basi per costruire un blog professionale integrato nel tuo sito Framer, senza plugin esterni e senza dover scrivere una riga di codice.

Hai domande sul CMS di Framer o vuoi condividere il tuo blog? Unisciti alla community di Framer Italia e confrontati con altri designer e developer italiani che usano Framer ogni giorno!