Comment injecter du contenu statique dans une collection CMS Webflow avec Finsweet ?
Apprenez à injecter du contenu statique dans une collection CMS Webflow avec Finsweet CMS Static.
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.
| Attribut | Élément | Valeur |
|---|---|---|
| fs-cmsstatic-element | Élément statique à injecter | item |
| fs-cmsstatic-position | Élément statique | first, last ou numéro (1, 2, 3...) |
| fs-cmsstatic-element | Collection List Wrapper | list |
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
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.
