Introduzione
Impara i concetti base, per iniziare a sviluppare con Webflow.
Il CMS in Webflow
Con il CMS di Webflow possiamo strutturare in modo ordinato e coerente i dati presenti all’interno del nostro sito web.
Scopri la potenza di questo strumento.
Contenuti ➡️
- Overview
- Benefici e logica del CMS
- Anatomia e logica del CMS
- Esempio pratico: Webflow Facile
- Recap
Overview
Tra i vari strumenti che Webflow ci mette a disposizione troviamo il CMS.
Il CMS (Content Management System) è uno strumento straordinario che permette di organizzare e aggiornare una grande quantità di contenuti da un’unica interfaccia.
Oltre a darci la possibilità di avere una gestione più semplice di tutti i nostri contenuti, questo approccio consente di mantenere un sito web più veloce e coerente in tutte le sue pagine.
Il CMS possiamo tradurlo semplicemente come database che organizza i dati del sito web.
La definizione di database, semplificata al massimo, è uno spazio in cui immagazziniamo i nostri contenuti.
Ma a cosa serve il CMS di Webflow?
Attraverso il CMS possiamo ordinare i nostri dati come se fossero delle cartelle suddivise in base alle nostre esigenze. In queste cartelle possiamo inserire i dati di cui abbiamo bisogno.
Queste cartelle sono chiamate da Webflow: Collections
Le Collections, in inglese collezioni, permettono di organizzare le informazioni in maniera ordinata e precisa.
L’obiettivo delle Collections è avere i dati strutturati che potremo richiamare all’interno delle nostre pagine web.
Sì, lo sappiamo: è un discorso totalmente astratto.
Il primo impatto il più delle volte può essere contorto, e ci potrebbe far pensare di lasciar perdere.
Continua a leggere e non ti scoraggiare, è bene che sbattiamo la testa per poter capire il funzionamento. Una volta messo le mani in piattaforma il discorso sarà più concreto e inizierai a unire i puntini.
Prima di vedere il CMS direttamente in Webflow facciamo un esempio per capire i benefici che questo strumento può darci e la logica con la quale applicarlo. Una volta capito il meccanismo, avremo capito il beneficio che può apportare ai nostri progetti, non torneremo più indietro.
Benefici e logica del CMS
Per avere una maggior chiarezza dello strumento CMS prendiamo come esempio un sito web di mobili.
La Geppetteria.
Il sito web la Geppetteria commercializza arredamento per la casa.
L’esigenza del direttore commerciale è quella di suddividere il sito web in 3 categorie di prodotti:
- Salotto
- Cucina
- Bagno
Queste 3 categorie di prodotti contengono al loro interno una moltitudine di prodotti. Nella categoria salotto troviamo Salotto Charlie, Salotto Karl, etc. Lo stesso vale per la categoria Cucina e Bagno per dare ai clienti una scelta ampia.
Pertanto, per organizzare il nostro sito web al meglio, dovremo creare 3 categorie di prodotti con all’interno i relativi prodotti:
Immaginatevi che ogni categoria di prodotto contiene 100 prodotti.
Per poter inserire tutto il catalogo prodotti all’interno del sito web, dovremmo creare 300 pagine ad-hoc.
Passano tre mesi dalla messa live del sito web e il proprietario della Geppetteria vuole inserire nella pagina dei prodotti un nuovo bottone.
Oppure dopo un anno la Geppetteria decide di svecchiarsi facendo un’operazione di rebranding. Con un sito web statico dovremmo cambiare 300 pagine per aggiornare il nuovo font, logo e colore.
Con un sito web statico dovremmo cambiare 300 pagine. Una ad una.
Con un sito web dinamico (CMS), invece, possiamo modificare i nostri contenuti una sola volta, da un’unica schermata, e vedere queste modifiche applicate alle 300 pagine-prodotto.
Sì, è molto efficace per non dire figo.
Ma come facciamo ad utilizzare il CMS? Iniziamo a vedere l’anatomia dello strumento che troviamo in Webflow.
Anatomia del CMS
Iniziamo a prendere confidenza con la struttura del CMS:
- Collections (all’interno del CMS)
- Collection Item (“File” all’interno delle Collections)
- Collections Fields (campi all'interno dei Collection Item)
Qui in basso trovate uno schema grafico che riassume la struttura del CMS.
Approfondiamo questi 3 elementi:
Innanzitutto, per impostare i nostri contenuti dobbiamo entrare nel CMS di Webflow. Attraverso la sidebar che troviamo nel lato sx troviamo il pulsante dedicato al CMS:
Una volta entrati nella schermata CMS possiamo creare la nostra prima Collection.
Le Collection, come già scritto, sono cartelle in cui suddividere le nostre informazioni.
Dopo aver cliccato sul pulsante per la creazione della nostra Collection la piattaforma apre la schermata Collection Settings. Da qui possiamo impostare la nuova Collection:
In questa schermata poss
Capiamo assieme i 3 campi evidenziati nella schermata di sopra:
- (Collection templates)
Sono template, quindi modelli pre-impostati. Webflow ci mette a disposizione questi modelli per venire incontro alle nostre esigenze.
Il nostro consiglio è quello di ignorarli e sporcarci le mani direttamente noi, così da capire il funzionamento delle impostazioni della Collections.
- Collection Settings
In questa sezione dobbiamo impostare:
- Nome della Collection:
è il nome della Collection che visualizzaremo all’intenro del CMQ si Webflow
- Collection URL:
è il percorso della URL. Se impostiamo blog, le nostre URL saranno impostate in questo modo:
www.nomesito.it/blog/come-cucinare-pasta
www.nomesito.it/blog/come-tagliare-legna
etc
- Collection fields
Da qui possiamo gestire le impostazioni della nostra Collection. Queste impostazioni sono molto importanti perché servono a impostare i nostri contenuti all’interno della nostra Collection.
Basic info
Come prime impostazioni troviamo Basic Info con 2 elementi: Nome e Slug.
Con l’elemento Nome potremo rinominare il nostro Item. Ad esempio se in questo campo inseriremo “Come fare la pasta” il nostro Item sarà rinominato con questa dicitura, inoltre la nostra URL prenderà questo nome. Vediamolo di seguito
Lo Slug, invece, è il campo che permette di modificare la nostra URL.
Se ad esempio in questo campo inseriamo Come cambiare batteria auto la nostra URL sarà: www.sitoweb.it/blog/come-cambiare-batteria-auto
Custom fields
La seconda impostazione che possiamo inserire è quella relativa a Custom Fields.
Al di sotto di questa sezione potremo impostare i campi che vogliamo inserire all’interno della nostra Collection. Facciamo un esempio pratico.
Per creare un articolo all’interno del nostro blog possiamo impostare i campi (fields) in questa maniera:
Campo titolo
Campo immagine
Campo paragrafo
In questa maniera quando creiamo un elemento (item) all’interno della nostra Collection possiamo inserire un titolo, un immagine e un paragrafo che comporranno, ad esempio, i nostri articoli del blog.
Una volta impostati tutti i campi possiamo creare la nostra nuova Collection attraverso il bottone blu Create Collection che troviamo in alto.
Una volta impostata la nostra Collection, Webflow ci viene in soccorso con questa schermata:
La piattaforma ci sta chiedendo se vogliamo inserire dei Collection item di esempio così da avere già dei dati con cui popolare il nostro sito web per iniziare a fare i primi test con elementi concreti.
In alternativa, possiamo creare direttamente noi gli Item senza avvalerci di questa funzione.
Per far ciò clicchiamo nel bottone blu che troviamo in alto a destra.
Nel nostro caso il bottone “New Guida introduttiva” (il nome del bottone cambia in base a come abbiamo rinominato la nostra Collection.
Una volta cliccato il bottone, del nuovo item, apparirà la schermata con i campi che abbiamo inserito precedentemente nel Collection Settings.
Se hai dei dubbi rispetto a queste impostazioni, il nostro consiglio è quello di lanciarsi e provare a smanettare con la piattaforma.
Anche se dovessimo sbagliare o voler fare delle modifiche successive alla Collection già creata, Webflow permette di tornare all’interno dei Collection Setting ed effettuare nuove modifiche.
Come spiegato, qui sopra, all’interno di queste impostazioni, possiamo modificare i campi (Collection Fields) che troviamo nei nostri Collection Item.
Esempio pratico: Webflow Facile
Dopo averne capito la logica del CMS vediamo un esempio concreto.
Prendiamo l’esperienza diretta che possiamo condividere:
webflowfacile.it
Il nostro sito propone delle guide e articoli con determinate informazioni, così strutturate:
- Titolo
- Sottotitolo
- Immagine di copertina
- Corpo centrale
- etc
(Tutte queste informazioni, sono state inserite all’interno dei Collections Settings di Webflow)
Man mano che passano le settimane i nostri contenuti aumentano e non vogliamo creare, ogni qualvolta, una pagina per ogni guida che sviluppiamo. Sarebbe una grande quantità di tempo e sforzi.
Ecco che arriva in soccorso il CMS e la pagina dinamica.
Grazie alle pagine dinamiche avremo un’unica pagina web, costruita ad-hoc per i nostri contenuti. Queste pagine prenderanno il dato direttamente dagli Item in base ai campi impostati (Collections field) che verranno popolati con informazioni, all’interno delle Collections.
Recap
Facciamo un sunto delle principali funzioni che abbiamo visto.
All’interno del CMS abbiamo:
- Collections
- Items
- Collections Fields
- Collections
Le Collections contengono una serie di Item (Collections Fields).
- Items
Gli Item possiamo richiamarli all’interno di una pagina e creare il nostro articolo.
- Collections Fields
I Collection fields sono i campi che impostiamo all’interno degli Items e possiamo impostarli in 2 modi:
- Ex-novo: quando clicchiamo su Create New Collection
- Modifica: se abbiamo già creato la Collection, possiamo modificarli tramite la rotellina dei setting (Collection Settings) facendo mouse-over sopra la Collection
Quello che abbiamo visto in questa lezione è un overview del CMS di Webflow. Come diciamo spesso, il modo migliore per imparare ad utilizzare lo strumento è mettere in pratica la teoria.
É importante quindi approfondire ulteriormente questa incredibile funzione messa a disposizione da Webflow.
Il CMS diventa cruciale nel momento in cui dobbiamo gestire un elevato numero di dati e contenuti. Inserendo le informazioni all’interno delle Collection ci aiuterà a organizzare i nostri dati in maniera automatica e scalabile all’interno delle del sito web.
Sembra contorto e inizialmente potrebbe esserci un po' di confusione ma con un po’ di pratica sarà molto semplice far proprio il concetto e utilizzare lo strumento CMS di Webflow.
Nella lezione successiva entriamo nelle impostazioni del sito web che Webflow chiama Project Setting. Queste impostazioni ci aiutano a impostare Hosting, SEO, Form e tante altre funzionalità molto importanti per un utilizzo totale di un sito web.
Per andare alla lezione successiva clicca nel bottone in basso.
LEZIONE PRECEDENTE
LEZIONE SUCCESSIVA