Webflow CMS Collections : tutoriel complet 2026

Lecture : 12 minutes · Niveau : intermédiaire · Mise à jour : avril 2026

Le CMS de Webflow est le module qui transforme un site statique en site dynamique. Articles de blog, portfolio de projets, fiches produits, équipe, témoignages, événements : toutes ces structures de contenu répétitives passent par les Collections. Ce tutoriel détaille comment les concevoir proprement, exploiter les Reference fields, construire des listes dynamiques, et anticiper les limites de la plateforme.

Voir aussi → Webflow pour PME : guide complet et Webflow vs WordPress : comparatif détaillé.

Sommaire

1. Qu’est-ce qu’une Collection ?
2. Créer une Collection : les types de champs
3. Reference et Multi-Reference fields
4. Pages Template : la page individuelle
5. Collection List : afficher les éléments
6. Filtrer, trier, paginer
7. Conditional Visibility
8. Importer en masse via CSV
9. Limites du CMS Webflow
10. Bonnes pratiques de modélisation
11. FAQ

1. Qu’est-ce qu’une Collection ?

Une Collection Webflow est l’équivalent d’une table dans une base de données ou d’un type de contenu (post type) dans WordPress. Elle définit la structure d’un type d’élément répétitif. Exemples typiques :

• Articles de blog : titre, contenu, auteur, date, image, catégorie
• Projets : nom, description, client, technologies, image principale
• Membres d’équipe : nom, rôle, photo, bio, LinkedIn
• Témoignages : nom, entreprise, citation, photo
• Produits : référence, description, prix, image, catégorie

Chaque élément de la Collection (un article spécifique, un projet spécifique) hérite de la structure définie. Webflow génère automatiquement une page individuelle pour chaque élément (Collection Page) et permet d’afficher des listes filtrables sur n’importe quelle page (Collection List).

Le CMS est inclus dans le plan CMS et au-dessus. Le plan Basic n’inclut pas le CMS — c’est une distinction importante au moment de choisir un plan.

2. Créer une Collection : les types de champs

Lors de la création d’une Collection, Webflow propose une dizaine de types de champs. Choisir le bon type dès le départ évite des migrations pénibles plus tard.

Types disponibles :

• Plain Text : texte court (titre, nom, slogan). Pas de mise en forme.
• Rich Text : texte long avec mise en forme (gras, italique, listes, images, embeds, headings). Pour le corps d’un article.
• Image : une image. On peut configurer un format préféré (paysage, portrait, carré).
• Multi-Image : galerie d’images. Utile pour un portfolio.
• Video Link : lien YouTube, Vimeo, Loom. Webflow génère le player.
• Link : URL externe avec libellé personnalisable.
• Email : valide qu’il s’agit d’une adresse email.
• Phone : numéro de téléphone.
• Number : valeur numérique. Permet décimales et bornes min/max.
• Date/Time : pour articles datés, événements.
• Switch : booléen on/off. Très utile pour des featured / draft / published.
• Color : sélecteur de couleur. Cas d’usage : tag avec couleur personnalisée.
• Option : liste déroulante de valeurs prédéfinies.
• File : un fichier (PDF, ZIP, etc.). Utile pour des téléchargements.
• Reference / Multi-Reference : lien vers d’autres Collections (voir plus bas).

Champs obligatoires automatiques : chaque Collection a un champ Name (Plain Text) et Slug (pour l’URL) que Webflow ajoute automatiquement. Le slug est généré depuis le name mais peut être édité.

Astuce : marquer un champ comme Required force la saisie au moment de la création d’un élément. Ne pas en abuser : les champs optionnels offrent plus de flexibilité éditoriale.

3. Reference et Multi-Reference fields

Les Reference fields permettent de relier des Collections entre elles. C’est la fonctionnalité qui fait passer le CMS Webflow d’une simple liste de fiches à un véritable mini-CMS relationnel.

Reference (lien 1-à-1) : un élément ne peut référencer qu’un seul autre élément. Cas d’usage classique : un article a un seul auteur. La Collection Articles a un champ Reference pointant vers la Collection Auteurs.

Multi-Reference (lien 1-à-N) : un élément peut référencer plusieurs autres éléments. Cas d’usage : un article a plusieurs catégories (ou tags). La Collection Articles a un champ Multi-Reference pointant vers la Collection Catégories.

Mise en pratique : structure blog typique

Trois Collections :
1. Articles : titre, slug, contenu (Rich Text), image, date, auteur (Reference → Auteurs), catégories (Multi-Reference → Catégories)
2. Auteurs : nom, slug, photo, bio
3. Catégories : nom, slug, description, couleur

Sur la page template d’un article, on affiche le nom de l’auteur et sa photo simplement en glissant les champs depuis la Collection référencée. Webflow gère automatiquement la liaison.

Limite à connaître : Webflow plafonne le nombre de Multi-References par élément (5 par défaut, configurable jusqu’à un maximum dépendant du plan). Pour un site avec beaucoup de tags par article, c’est à anticiper.

Reference circulaire : une Collection peut référencer une autre Collection qui la référence en retour (Articles → Auteurs, Auteurs → Articles populaires). Webflow gère les références dans les deux sens automatiquement via le filtre « current X ».

4. Pages Template : la page individuelle

Pour chaque Collection, Webflow génère automatiquement une Collection Page (aussi appelée Template Page). C’est la page qui s’affiche quand on visite l’URL d’un élément individuel — par exemple /blog/mon-article.

Cette page se conçoit dans le Designer comme n’importe quelle page, à une différence près : on peut y glisser des CMS-bound elements qui se remplissent dynamiquement avec les données de chaque élément.

Workflow de design :

1. Ouvrir la page template depuis l’onglet CMS du Designer
2. Construire la mise en page (header, contenu, sidebar, footer)
3. Glisser un Heading H1, le lier au champ Name de la Collection
4. Glisser un Rich Text, le lier au champ Content
5. Glisser une Image, la lier au champ Featured Image
6. Sauvegarder, prévisualiser

Webflow rend chaque élément de la Collection avec cette même mise en page. Si on a 50 articles, 50 URLs sont générées automatiquement.

URL pattern : par défaut /{collection-slug}/{element-slug}. Modifiable depuis les paramètres de la Collection (ex. : /articles/{slug} au lieu de /blog/{slug}).

SEO par élément : chaque page template hérite du Title et Meta Description par défaut, mais on peut les rendre dynamiques en les liant à des champs CMS dédiés. Exemple : créer un champ « SEO Title » et « SEO Description » dans la Collection, les utiliser dans les balises meta de la page template.

5. Collection List : afficher les éléments

Le Collection List est le composant qui affiche plusieurs éléments d’une Collection sur n’importe quelle page (page d’accueil, page catégorie, sidebar).

Glisser-déposer :

1. Sur la page concernée, glisser un Collection List depuis le panneau Add (raccourci A)
2. Choisir la Collection source
3. Webflow crée automatiquement une structure : Collection List > Collection List Wrapper > Collection Item
4. Mettre en page un seul Collection Item (titre, image, extrait, lien). Webflow réplique le rendu pour tous les éléments

Structure imbriquée : un Collection Item peut contenir des éléments imbriqués (boutons, tags, badges). On peut même imbriquer un autre Collection List à l’intérieur — par exemple pour afficher les tags d’un article (Multi-Reference).

Lien automatique : glisser un Block Link autour du Collection Item, le lier à « Current Article ». Webflow génère automatiquement le bon href vers la page individuelle.

6. Filtrer, trier, paginer

Le Collection List offre des paramètres puissants pour ne montrer que ce qui est pertinent.

Filtres : dans les paramètres du Collection List, ajouter une condition. Exemples :
– Articles où Featured = on
– Articles où Date de publication ≤ aujourd’hui
– Projets où Catégorie = web (filtre par référence)

Plusieurs filtres sont combinables (ET / OU).

Tri : par n’importe quel champ, ascendant ou descendant. Tri classique pour un blog : Date de publication décroissante.

Limite : par défaut Webflow affiche tous les éléments. On peut limiter à N éléments (ex. : 6 derniers articles sur la page d’accueil).

Pagination : activable pour les listes longues. Webflow génère automatiquement les liens « Page suivante / précédente ». Le SEO de la pagination Webflow est correct mais limité (pas de balises rel="next" automatiques — détail à compenser via custom code si nécessaire pour des sites de contenu volumineux).

Empty State : si aucun élément ne correspond aux filtres, Webflow peut afficher un message personnalisé (« Aucun article dans cette catégorie »). Configurable depuis le Collection List Wrapper.

7. Conditional Visibility

La Conditional Visibility permet d’afficher ou masquer dynamiquement un élément selon une condition CMS.

Exemples concrets :

• Afficher un badge « Nouveau » seulement si la date de publication est inférieure à 30 jours
• Masquer le champ « Vidéo » si le champ Video Link est vide
• Afficher un encart spécial si Featured = on

Mise en place :

1. Sélectionner l’élément à conditionner dans le Designer
2. Onglet Settings (D)
3. Section Conditional Visibility
4. Définir la règle (champ, opérateur, valeur)

C’est l’un des outils les plus sous-utilisés du CMS Webflow. Bien employé, il évite des duplications de pages et permet des templates très flexibles.

8. Importer en masse via CSV

Pour peupler une Collection avec beaucoup d’éléments d’un coup (migration depuis WordPress, import d’un catalogue, etc.), Webflow propose un import CSV.

Workflow :

1. Préparer un CSV avec une colonne par champ de la Collection
2. Onglet CMS > Import CSV
3. Webflow détecte les colonnes et propose le mapping vers les champs
4. Pour les champs Reference / Multi-Reference, utiliser le slug ou le nom des éléments cibles dans le CSV
5. Pour les images, fournir des URL publiques (Webflow télécharge et héberge automatiquement)

Limites de l’import :
– Une seule Collection par import (pas d’import multi-Collections relationnel automatique)
– Les Reference fields imposent que la Collection cible soit déjà peuplée
– Les images doivent être accessibles via URL publique (pas d’upload de fichier local en bulk)

Conseil migration WordPress → Webflow : exporter via un plugin (WP All Export ou similaire), nettoyer le CSV, uploader les médias séparément, puis importer. Compter une journée de travail pour une migration propre.

9. Limites du CMS Webflow

Le CMS Webflow est puissant mais a des limites strictes qu’il faut connaître avant de modéliser un projet.

Items par site : plafond selon le plan (CMS = 2 000 items, Business = 10 000 items au moment de la rédaction — vérifier sur webflow.com pour les valeurs actuelles). Au-delà, migration vers un plan supérieur ou un CMS headless externe (Sanity, Contentful) avec Webflow comme front uniquement.

Collections par site : également plafonné par plan. Pour un site complexe avec 15-20 Collections, prévoir le plan Business.

Champs par Collection : ~30 champs maximum. Largement suffisant en pratique mais à anticiper pour des fiches produits très détaillées.

Pas de relations many-to-many natives au sens classique d’une base de données. Multi-Reference simule mais a ses limites de cardinalité.

Pas de logique conditionnelle complexe côté CMS : la Conditional Visibility est binaire (afficher/masquer). Pour des règles sophistiquées (« afficher X si Y et Z mais pas W »), il faut combiner plusieurs visibilities ou recourir au custom code.

Pas de calculs entre champs : impossible de stocker un champ « prix TTC » calculé depuis « prix HT × 1.18 ». Le calcul doit se faire à la saisie ou côté frontend via JavaScript.

10. Bonnes pratiques de modélisation

Penser en termes de réutilisation. Avant de créer une Collection, se demander : ce contenu est-il vraiment répété et structuré ? Une page « À propos » unique n’a pas besoin d’une Collection — c’est juste une page statique.

Slugs propres dès le départ. Le slug détermine l’URL. Un changement de slug casse les liens existants (Webflow propose des redirections mais c’est mieux de bien faire dès le début).

Champs SEO dédiés. Toujours créer un champ « SEO Title » et « SEO Description » distinct du Name et de l’extrait éditorial. Cela permet d’optimiser le SEO sans trahir l’éditorial.

Champ « Featured » Switch. Pratique pour mettre en avant 2-3 éléments sans dupliquer la Collection.

Champ « Published Date ». Plutôt que se reposer sur la date de création système, créer un champ Date dédié donne le contrôle éditorial (programmer une publication, antidater).

Reference plutôt que duplicate. Si trois Collections partagent un même type d’info (ex. : auteurs), créer une Collection Auteurs unique et référencer plutôt que dupliquer le champ.

Tester avec 5 éléments réels avant de finaliser la structure. Beaucoup de problèmes de modélisation n’apparaissent qu’avec du contenu concret.

FAQ

Quelle différence entre une Collection et une Static Page ?

Une Static Page est une page unique (page d’accueil, à propos, contact). Une Collection définit une structure répétée pour générer plusieurs pages similaires (un article par élément, un projet par élément). Si le contenu est unique : Static Page. Si répété et structuré : Collection.

Peut-on changer le type d’un champ après coup ?

Webflow autorise certaines conversions (Plain Text → Rich Text par exemple) mais beaucoup d’autres sont impossibles sans migrer manuellement. Mieux vaut bien réfléchir au départ. Pour les types de champs critiques (Reference notamment), un changement implique souvent de recréer le champ et de re-saisir les valeurs.

Comment afficher les articles d’une catégorie spécifique sur une page ?

Créer une page template pour la Collection Catégories. Sur cette page, glisser un Collection List Articles, ajouter un filtre « Catégorie = Current Category ». Chaque page catégorie listera automatiquement ses articles.

Le CMS Webflow supporte-t-il les brouillons ?

Oui, chaque élément peut être en draft, staged, ou published. Le draft n’est pas visible sur le site live. Le staged est visible mais marqué comme non publié — pratique pour de la prévisualisation côté éditeur.

Y a-t-il une API pour piloter le CMS depuis l’extérieur ?

Oui, Webflow propose une CMS API REST permettant de créer/modifier/supprimer des éléments depuis un script externe. Utile pour synchroniser un catalogue produit depuis un ERP ou pousser automatiquement des articles depuis un autre système.

Comment gérer le multilingue avec les Collections ?

Webflow a lancé une fonctionnalité Localization native. Pour les sites multilingues simples (FR/EN), elle suffit. Pour des sites complexes, certaines équipes préfèrent dupliquer les Collections par langue ou utiliser un CMS headless externe.

Les changements CMS sont-ils versionnés ?

Webflow conserve un historique limité des modifications côté Designer. Côté CMS Editor, l’historique de chaque élément n’est pas aussi profond que sur un Git. Pour des sites éditoriaux à forte rotation, garder une sauvegarde CSV régulière est une bonne pratique.

Peut-on faire de la recherche full-text dans les Collections ?

Pas nativement avec une UX riche. Webflow propose une fonction de recherche basique. Pour de la vraie recherche performante, intégrer un service tiers comme Algolia via custom code.

Articles liés (cluster Webflow)

• 👉 Webflow pour PME : guide complet
• 👉 Webflow SEO et performance : guide complet
• 👉 Webflow vs WordPress : comparatif détaillé

Voir aussi : Strapi headless CMS pour PME pour une alternative open-source, et WordPress pour PME africaines pour le standard du marché.

Article mis à jour le 25 avril 2026. Pour signaler une erreur ou suggérer une amélioration, écrivez-nous.