Besoin de lancer, tester votre offre ou produit rapidement ? Testez notre nouvelle offre 🏎 💨 💨

Comment personnaliser le design d’un seul item dans une collection CMS Webflow

Tanguy
December 16, 2022

Pour personnaliser le design d’un seul item dans une collection CMS sans que cela ne se répercute sur chaque item de notre collection, vous avez besoin d’un petit peu de CSS et un Embed.

Rien de bien sorcier, et en plus ça change la vie ! Je vous explique !

Personnaliser le design d’un seul item dans votre collection CMS

Vous avez possibilité de personnaliser chaque item d’une collection CMS individuellement dans Webflow. Mais uniquement votre élément “collection item”, et non pas les éléments enfants de ce dernier, ce qui est donc très limité.

Pour venir personnaliser les éléments à l’intérieur de notre item, nous avons besoin d’un peu de CSS.

Ajouter un Embed en haut de votre page avec le code ci-dessous :

<style>

/* Customize every 1st, 2nd, & 3rd item inside your collection item */

.your-collection-item:nth-child(3n+1) .item-inside-collection-item {background-color: yellow;}.

your-collection-item:nth-child(3n+2) .item-inside-collection-item {background-color: green;}.

your-collection-item:nth-child(3n+3) .item-inside-collection-item {background-color: purple;}

</style>

Le code ci-dessus vous permet de personnaliser l’arrière-plan de l’élément que vous ciblez à l’intérieur de votre item. La logique ici est que 3 éléments auront une couleur spécifique et la boucle se répétera ensuite.

C’est-à-dire que si vous venez ajouter une autre ligne dans ce code, vous aurez besoin de modifier “3n” par “4n” parce que maintenant il y aura non pas trois items distincts, mais 4. (voir exemple ci-dessous)

<style>

/* Customize every 1st, 2nd, & 3rd item inside your collection item */
.your-collection-item:nth-child(4n+1) .item-inside-collection-item {background-color: yellow;}
.your-collection-item:nth-child(4n+2) .item-inside-collection-item {background-color: green;}
.your-collection-item:nth-child(4n+3) .item-inside-collection-item {background-color: purple;}
.your-collection-item:nth-child(4n+4) .item-inside-collection-item {background-color: purple;}

</style>

Vous pouvez regarder la vidéo de Tanguy qui vous explique ça d’une manière plus visuelle.

Après avoir ajouté vos classes dans le custom code, vous pouvez personnaliser le CSS avec vos couleurs.

Pour venir personnaliser un autre élément dans votre item, copier-coller la ligne de code et ajoutez simplement le nom de classe de l’élément ciblé.

Si vous n’êtes pas familier avec le CSS, n’hésitez pas à réserver un visio avec l’un d’entre nous pour que l’on puisse vous aider à réaliser la tâche abordée dans ce tuto.

Comment inverser l’ordre des images dans une collection CMS ?

Nous avons donc une collection CMS ci-dessous où je voudrais tout simplement inverser les images 1 fois sur 2.

Avant :

collection CMS items on webflow designer interface - innovationa 1

Après :

collection CMS items on webflow designer interface - innovationa 2

La structure de notre layout se présente ainsi :

Organisation layout designer Webflow - collection CMS article

Le div block qui contient tous les éléments de notre item cms “layout1_item-card” est donc en Flexbox horizontal.

Si vous venez simplement inverser l’ordre de vos Divblocks en l’occurrence passer le “layout1_content” juste au-dessus du “Layout1_wrapper-image”, le changement va s’appliquer à l’intégralité des items de votre collection CMS.

Nous, nous voulons personnaliser l’ordre d’un item CMS sur 2.

Pour réaliser cela, il faut ajouter un Embed avec un peu de code CSS, pour inverser une fois sur 2 l’ordre de notre image (comme montré dans l’exemple illustré plus haut).

Vous ajoutez cette embed en haut de votre page, et vous venez ajouter :

<style>

/* Customize every 1st, 2nd, & 3rd item inside your collection item */

.layout1_collection-item:nth-child(even) .layout1_compenent {flex-direction: row-reverse;}

</style>

Pour que la personnalisation de vos items CMS fonctionne, ajouter simplement le nom de la classe de votre élément collection item (ici : layout1_collection-item) dans le code ci-dessus.

Et ensuite, vous venez cibler votre divblock en position flexbox. Vous ajoutez alors le nom de votre classe également. (Les classes à modifier dans le code ont été surlignées pour vous aider).

Pas besoin de publier votre site, le résultat devrait apparaître directement sur l’interface designer de Webflow. ✅

OPTIMISEZ VOTRE SITE

RECOS ET AUDIT GRATUIT

ligne

Votre site ne convertit pas ? ❌
Vous ne générez pas suffisamment de lead ?❌
Votre n'avez pas de visibilité ? 😭

Free Audit illustration
Politique de confidentialité