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

<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