Comment créer une pagination personnalisée dans Webflow CMS ?
Apprenez à créer une pagination personnalisée dans Webflow CMS avec Finsweet CMS Load : load-more, infinite scroll et compteur.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment créer une pagination personnalisée dans Webflow CMS avec Finsweet CMS Load.
| Mode Finsweet | Comportement | Cas d'usage |
|---|---|---|
| load-more | Bouton 'Charger plus' qui append les items | Blog, catalogue produit |
| infinite-scroll | Chargement automatique au scroll | Feeds, galeries photo |
| pagination | Navigation numérotée (1, 2, 3...) | Répertoires, résultats de recherche |
1. Ajoutez le script Finsweet CMS Load
<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsload@1/cmsload.js" defer>script>2. Mode "Charger plus"
Sur votre Collection List Wrapper, ajoutez :
fs-cmsload-element="list"fs-cmsload-mode="load-more"
Sur votre bouton "Charger plus" : fs-cmsload-element="button". Réglez le nombre initial d'items à afficher dans les paramètres de votre Collection List dans Webflow (ex: 6).
3. Mode "Scroll infini"
Remplacez fs-cmsload-mode="load-more" par fs-cmsload-mode="infinite-scroll". Les items se chargent automatiquement quand l'utilisateur approche du bas de la liste. Aucun bouton nécessaire.
4. Affichez un compteur de résultats
Ajoutez un Text Block avec fs-cmsload-element="items-count" pour afficher le nombre total d'items. Webflow et Finsweet mettent à jour ce compteur automatiquement au fil du chargement.
Conclusion
Une pagination adaptée améliore l'UX et les performances. Cas d'usage :
- Blog avec bouton "Voir plus d'articles"
- Galerie photo avec chargement progressif
- Répertoire avec navigation numérotée
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
