Introduction

Quand ton site commence à contenir beaucoup de contenus, modifier chaque page manuellement devient vite compliqué.

C’est exactement pour cela que le CMS existe.

Le CMS de Framer permet de gérer du contenu dynamique.
Tu crées une structure une seule fois, puis tu ajoutes du contenu sans modifier le design.

C’est la base pour créer :

• un blog

• une page de tutoriels

• un portfolio

• une liste de ressources

• une base de connaissances

• une page de projets

Le CMS sépare le contenu du design.
Le design reste fixe. Le contenu peut évoluer.

Dans ce guide, tu vas comprendre comment fonctionne le CMS dans Framer et comment l’utiliser concrètement.

Qu’est ce que le CMS dans Framer

CMS signifie Content Management System.

C’est un système qui permet de gérer du contenu structuré.

Au lieu de créer une page différente pour chaque contenu, tu crées une collection.

Une collection est une base de données.

Chaque élément ajouté dans cette collection devient un contenu affichable sur ton site.

Exemple simple :

Collection = Articles

Éléments dans la collection

• Article 1

• Article 2

• Article 3

Chaque article possède ses propres informations :

• titre

• image

• description

• contenu

• date

Ces informations sont appelées des champs.

Une collection contient des éléments.
Chaque élément possède des champs.

Les 3 façons principales d'utiliser le CMS dans Framer

Dans Framer, tu peux utiliser le CMS de trois manières différentes.

Comprendre ces trois méthodes permet de construire presque tous les types de sites.

1 - Afficher une collection CMS directement sur une page

La première méthode consiste à afficher une collection directement sur une page.

C’est la méthode la plus simple.

Tu ajoutes une CMS List sur une page qui se connecte à une collection précise.

Framer affiche automatiquement tous les éléments de la collection.

Exemple :

Une page ressources peut afficher :

• une image

• un titre

• une description

• un bouton

Chaque carte représente un élément du CMS.

C’est exactement ce que font des pages comme :

• un blog

• une galerie de projets

• une liste de tutoriels

• une page de ressources

Une CMS List permet d'afficher automatiquement tous les contenus d'une collection.

Cette méthode est souvent utilisée pour créer une grille de contenus dynamique.

2 - Créer une page index pour afficher tous les contenus

La page index est la page qui affiche l’ensemble des contenus d’une collection.

C’est généralement la page principale d’un CMS.

Exemples.

• page blog

• page tutoriels

• page ressources

• page projets

Sur cette page, tu affiches une liste de contenus avec une CMS List.

Chaque élément mène ensuite vers sa page détaillée.

La page index agit comme le sommaire de ton contenu.

Dans Framer, tu peux créer cette page via :

→ New CMS Page
→ Index

C’est généralement la page qui centralise toute ta collection.

3 - Créer une page détail pour chaque contenu

La page détail est le modèle utilisé pour afficher un contenu précis.

Par exemple :

• un article de blog

• un tutoriel

• une ressource

• un projet

Cette page fonctionne comme un template.

Tu crées le design une seule fois.

Framer remplit automatiquement les informations selon l’élément sélectionné.

Exemple pour un article :

• titre

• image

• description

• contenu complet

• date

Chaque article utilise exactement la même structure.

Une page détail est un template qui se remplit automatiquement avec les données du CMS.

Dans Framer, elle se crée via :

→ New CMS Page
→ Detail Page

Comment connecter un champ CMS à un élément

Pour afficher les informations du CMS, tu dois connecter les champs aux éléments du design.

Cette connexion se fait via les variables.

Important.

Un champ CMS ne peut être relié que si l’élément se trouve dans une collection CMS.

Par exemple :

• dans une CMS List

• dans une page détail CMS

Sinon les champs ne seront pas disponibles.

Voici la méthode.

Sélectionne un élément dans ton design.

Exemple :

un texte.

Dans le panneau de droite :

→ Content
→ Set Variable

Choisis ensuite le champ CMS que tu veux afficher.

Exemple :

• Title

• Description

• Image

Le contenu sera alors automatiquement remplacé par la donnée du CMS.

Si l’élément n’est pas dans une collection CMS, les champs ne peuvent pas être utilisés.

Comprendre l’interface du CMS dans Framer

Le CMS possède sa propre interface dans Framer.

Tu peux y gérer :

• les collections

• les champs

• les éléments

• les images

• les liens

Chaque ligne correspond à un contenu.

Par exemple :

• un tutoriel

• un article

• une ressource

Chaque colonne correspond à un champ.

Exemple :

• titre

• description

• image

• catégorie

• date

Cela fonctionne comme une base de données simple.

Le CMS est l’endroit où tu gères tout le contenu de ton site.

Bonnes pratiques pour utiliser le CMS dans Framer

Structure bien ta collection dès le début.

Modifier la structure plus tard peut demander des ajustements.

Utilise des champs simples.

Évite de créer trop de champs inutiles.

Utilise Rich Text pour les contenus longs.

C’est idéal pour les articles ou les tutoriels.

Optimise tes images.

Des images trop lourdes ralentissent les pages CMS.

Organise ton contenu.

Une collection claire rend la gestion beaucoup plus simple.

Erreurs fréquentes avec le CMS

• Créer des pages manuellement au lieu du CMS.

• Si un contenu se répète, utilise une collection.

• Créer trop de collections différentes.

• Cela complique l’organisation.

• Ne pas utiliser de page détail.

• La page détail permet de structurer les contenus.

• Essayer de connecter un champ CMS hors d’une collection.

Les variables CMS ne fonctionnent que dans un contexte CMS.

Résumé

Le CMS de Framer permet de créer des sites dynamiques.

Il repose sur trois éléments principaux :

• les collections

• les champs

• les templates

Dans Framer, il existe trois façons principales d'utiliser le CMS :

• afficher une collection sur une page

• créer une page index qui liste les contenus

• créer une page détail qui affiche un contenu précis

Le CMS permet de gérer un grand volume de contenu sans modifier le design.

C’est une fonctionnalité essentielle pour créer des sites évolutifs avec Framer.