Comment injecter du contenu statique dans une collection CMS Webflow avec Finsweet ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment injecter du contenu statique dans une collection CMS Webflow avec Finsweet CMS Static.

Comprendre le cas d'usage de CMS Static

CMS Static permet d'insérer des éléments statiques (banners, CTAs, cartes spéciales) dans une Collection List à des positions précises. Exemple : insérer un bandeau "Télécharger le guide" après le 3ème article d'une liste de blog, ou placer une card "Contactez-nous" en dernière position d'un catalogue.

1. Ajoutez le script dans le head

<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsstatic@1/cmsstatic.js" defer>script>

2. Configurez votre Collection List

Sur votre Collection List Wrapper, ajoutez fs-cmsstatic-element="list".

3. Créez votre élément statique

Créez un Div avec le design de votre choix (CTA, banner, carte promotionnelle). Ajoutez-lui l'attribut fs-cmsstatic-element="item". Placez cet élément à l'intérieur de votre Collection List Wrapper, en dehors du template dynamique.

4. Définissez la position d'injection

Sur votre élément statique, ajoutez fs-cmsstatic-position="[valeur]". Valeurs disponibles : first (en premier), last (en dernier), ou un chiffre pour une position précise (3 pour après le 3ème item). Vous pouvez avoir plusieurs éléments statiques à des positions différentes.

Conclusion

CMS Static évite de créer des workarounds complexes pour insérer du contenu non-CMS dans vos listes. Cas d'usage :

• CTA "Voir tous les articles" en fin de liste de blog
• Bandeau promotionnel inséré après le 3ème produit d'un catalogue
• Card "Contactez un expert" dans une liste de ressources