Afficher une collection dans une section

Une collection conserve vos contenus. Une section reliée à cette collection les présente sur votre site : chaque fiche devient, par exemple, une carte avec une image, un titre et une introduction.

Vous construisez une seule carte modèle. La liste reprend ce modèle pour chaque fiche affichée. Changer le texte d’une fiche dans le CMS change son contenu ; changer le design de la carte change la présentation de toutes les cartes.

1. Préparer les fiches et leur page de détail

Dans Données, préparez une collection avec des champs clairs. Pour le carnet Alma, nous utilisons Titre, Introduction, Visuel, Categorie et Slug. Ajoutez plusieurs fiches, avec des titres différents et de vraies images : vous pourrez vérifier que la liste affiche les bons contenus.

Si les cartes doivent ouvrir une fiche complète, préparez aussi une page modèle avec une variable dans son adresse, comme /carnet/[slug]. Reliez cette page à la collection et associez sa variable au champ Slug. Chaque fiche doit avoir une valeur de slug distincte.

Une liste peut aussi présenter des contenus sans page de détail. Choisissez alors une section adaptée et contrôlez qu’elle ne laisse pas de bouton inutile.

2. Choisir une section reliée aux données

Ouvrez la page qui doit accueillir la liste. Cliquez sur Ajouter. Dans Ajouter un mode, réglez Responsive sur Tout pour conserver les règles d’écran du modèle, puis fermez ce réglage. Ouvrez ensuite le choix de source des sections et Dynamique. Choisissez un modèle de liste adapté au contenu : une image et un résumé sont utiles pour des articles ; une présentation plus compacte peut suffire pour des questions fréquentes.

Dans la fenêtre qui s’ouvre, sélectionnez votre collection. Choisissez le nombre de fiches à afficher pour cette première présentation. Dans la démonstration, nous choisissons trois fiches.

Le choix Tout conserve notamment les dispositions prévues pour les écrans intermédiaires. Avec le mode simplifié mobile et ordinateur, certaines règles d’un modèle peuvent être retirées : contrôlez toujours la grille obtenue.

Ce nombre concerne la liste affichée, pas le nombre de fiches conservées dans la collection. Vos autres fiches restent disponibles dans le CMS.

3. Associer les zones aux bons champs

Cliquez sur Suivant. Pour chaque zone proposée par le modèle, choisissez le champ correspondant : Image avec Visuel, Title avec Titre, Excerpt avec Introduction et Category avec Categorie dans notre exemple.

Les intitulés de ces zones dépendent du modèle. Le nom du champ dans votre collection reste le vôtre. Une zone de titre attend le titre de la fiche, une zone d’image attend son image : évitez de les associer à un champ qui contient une autre sorte de valeur.

Pour le lien de la carte, choisissez la page de détail préparée précédemment. Vérifiez la correspondance avec le slug de la fiche. La liste et la page de détail doivent désigner les mêmes contenus pour que le visiteur retrouve l’article choisi.

Cliquez sur Ajouter un bloc, puis fermez la bibliothèque pour retrouver la page.

4. Vérifier le résultat et personnaliser les textes fixes

Contrôlez au moins trois fiches : leurs titres, leurs résumés, leurs images et leurs catégories doivent correspondre à la collection. Enregistrez la page et rechargez-la pour vérifier que la connexion est conservée.

Le modèle peut également contenir des textes fixes, par exemple un titre de section, un libellé de bouton ou une durée de lecture. Ils ne deviennent pas automatiquement des données du CMS. Remplacez ces exemples, reliez les zones dont vous avez besoin et retirez celles qui ne servent pas. Ne publiez pas un auteur ou une date d’exemple comme s’il s’agissait de vos contenus.

La vidéo explique la connexion des contenus. Le réglage de la disposition et l’adaptation aux écrans se font ensuite dans les commandes de design. Vérifiez le rendu obtenu, au-delà du nom du modèle choisi.

5. Tester les cartes comme un visiteur

Publiez en prévisualisation, puis ouvrez la liste sur ordinateur et sur mobile. Vérifiez que les images se chargent, que les textes restent lisibles et que chaque lien ouvre la bonne fiche. Choisissez des fiches aux contenus différents pour ne pas confondre un exemple affiché dans le builder avec la destination réelle du visiteur.

Si une image manque, contrôlez sa présence dans la fiche et l’association du champ Visuel. Si un titre manque, contrôlez le champ choisi et son contenu. Si le lien ouvre une autre fiche, contrôlez les slugs et la connexion de la page de détail.

Pour ne présenter qu’une partie de la collection ou changer son ordre, réglez les filtres, le tri et la limite de la liste. Ces réglages font l’objet de l’article suivant.