Comment créer une pagination personnalisée dans Webflow CMS ?

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.

1. Ajoutez le script Finsweet CMS Load

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