L’un des plus grands freins à l’adoption des CMS headless par les équipes éditoriales est le gouffre entre les développeurs et les journalistes. Les développeurs construisent des composants ; les journalistes veulent composer des pages. Sans outil adapté, chaque nouvelle mise en page nécessite une intervention technique.
Fatplant résout ce problème avec son page builder visuel — un éditeur qui permet à n’importe quel membre de la rédaction de composer des pages riches et personnalisées, sans écrire une seule ligne de code.
La logique du page builder
Le page builder repose sur une métaphore simple : une page est une pile de sections, chaque section contient des rangées, chaque rangée contient des colonnes, et chaque colonne contient des modules de contenu.
Page
├── Section (fond coloré, espacement)
│ ├── Rangée 2 colonnes
│ │ ├── Colonne 1/2 → [Module Texte]
│ │ └── Colonne 1/2 → [Module Image]
│ └── Rangée 1 colonne
│ └── Colonne pleine → [Module Bouton CTA]
└── Section (fond gris)
└── Rangée 3 colonnes
├── Colonne 1/3 → [Module Carte]
├── Colonne 1/3 → [Module Carte]
└── Colonne 1/3 → [Module Carte]Cette structure hiérarchique est délibérément simple. Elle couvre la grande majorité des besoins éditoriaux sans nécessiter de formation avancée.
Composer une page étape par étape
1. Créer une section
La section est le bloc de base. Elle définit l’apparence visuelle du conteneur : couleur de fond, image de fond, espacement interne (padding). En cliquant sur “Ajouter une section”, vous choisissez un point de départ parmi des préréglages (section blanche, section colorée, pleine largeur, etc.).
2. Ajouter une rangée
À l’intérieur d’une section, vous définissez la disposition horizontale en ajoutant une rangée. Fatplant propose des préréglages de distribution : une colonne pleine largeur, deux colonnes égales, trois tiers, deux tiers / un tiers, etc.
3. Placer des modules
Chaque colonne attend un ou plusieurs modules. Cliquez sur ”+” pour ouvrir le catalogue de modules et choisissez ce dont vous avez besoin :
- Texte : éditeur de texte enrichi avec formatage Markdown
- Image : sélection depuis la médiathèque, avec gestion du texte alternatif et de la légende
- Vidéo : embed YouTube, Vimeo, ou lecteur natif
- Citation : bloc typographié pour les extraits et citations d’experts
- Bouton (CTA) : lien stylisé configurable
- Séparateur : ligne de séparation pour aérer le contenu
- Carte : bloc image + titre + texte + lien, idéal pour les grilles
4. Réorganiser par glisser-déposer
Vous pouvez réorganiser les sections, les rangées et les modules par simple glisser-déposer. Un module peut être copié, déplacé dans une autre colonne ou supprimé. Les modifications sont sauvegardées automatiquement.
Un outil pensé pour les journalistes
Le page builder de Fatplant n’est pas un générateur de sites web généraliste. Il est optimisé pour les usages éditoriaux :
- Les images sont toujours sélectionnées depuis la médiathèque centrale, avec gestion des variantes responsive. Pas d’image uploadée en vrac dans le contenu.
- Les modules de texte supportent le Markdown, que la plupart des journalistes maîtrisent déjà.
- La collaboration est native : plusieurs personnes peuvent modifier le même document simultanément, avec visibilité des curseurs en temps réel.
- L’autosave est permanent. Il n’y a pas de bouton “Enregistrer” à ne pas oublier — chaque modification est sauvegardée au fil de l’eau.
Et pour les développeurs ?
Le page builder n’est pas une boîte noire. Les développeurs peuvent :
- Ajouter de nouveaux modules via le système de plugins, avec leur propre schéma de propriétés et leur propre composant Svelte de rendu.
- Personnaliser le rendu de chaque module dans le thème actif sans modifier le core.
- Lire le document JSON produit par le page builder pour l’intégrer dans n’importe quel frontend (le format est documenté et stable).
Le page builder produit un document JSON structuré et prévisible. Ce document est stocké dans le champ content de l’entité (article, page) et exposé via l’API. Le frontend SSR de Fatplant l’interprète pour produire le HTML final — mais vous pouvez tout à fait consommer ce JSON dans votre propre frontend.
Conclusion
Le page builder de Fatplant ferme le fossé entre les équipes éditoriales et les équipes techniques. Les journalistes gagnent en autonomie créative. Les développeurs gardent le contrôle sur le système de design et les composants. Et le résultat — des pages riches, cohérentes et performantes — profite aux lecteurs.