Introduction

Sur Webflow, il est possible d’adapter le design de vos pages templates (page CMS) en utilisant une fonctionnalité puissante : la visibilité conditionnelle.

Pour vous donner un exemple plus parlant, prenez un article de blog, vos pages d’article sont dynamiques, elles sont donc reliées à une collections CMS pour vous permettre de publier de nouveaux articles depuis votre back office (CMS).

Si vous vous êtes déjà posé la question suivante :

Comment changer le design d’une page modèle pour un seul article de blog par exemple ?

Et bien, vous êtes au bon endroit, car c’est possible avec la conditional visibility de Webflow !

‍

PS : Si vous n’êtes pas familier avec le contenu dynamique (CMS) de Webflow, ce tutoriel est peut-être trop avancé. (Un article sur le contenu dynamique est en préparation…)

‍

Comment activer la visibilité conditionnelle de Webflow

Pour paramétrer la visibilité conditionnelle :

1. Vous devez être sur une page template (exemple : page d’article de blog)
2. Sélectionner l’élément (section, container, div, etc.) sur lequel vous souhaitez ajouter la visibilité conditionnelle
3. Dans les paramètres de l’élément, descendez jusqu’à conditional visibility
4. Cliquer sur le “+” pour ajouter une nouvelle condition
5. Définissez votre variable ✅

‍

‍

Comment savoir si une page contient des éléments avec la conditional visibility

Dans votre navigateur (onglet à gauche, contenant votre structure de page), certains éléments passent du blanc au violet si la visibilité conditionnelle est active. Sinon, vous pouvez toujours le voir depuis les paramètres de votre élément.

‍

Exemple : les Divblocks ci-dessous sont en violet.

‍

‍

Cas d’utilisation

‍

Pour notre exemple, on va prendre deux pages template de Blog Posts pour lesquelles on souhaite avoir une section différente en bas de page.

Dans un cas, on veut une section avec un Call to Action, et dans l’autre on veut une section qui nous indique les autres articles à lire. Et tout cela sur une seule et même page dynamique.

‍

Notre idée ici est de créer notre visibilité conditionnelle sur la base d’un champ option que l’on va venir ajouter dans notre collection CMS (blog post).

On va tout d’abord se rendre dans les réglages de la collection CMS (voir photo ci-dessous).

‍

‍

Une fois dans les paramètres, on va venir rajouter un nouveau champ dans les “Custom fields” et sélectionner “Option”.

‍

‍

Ensuite, on renomme le champ Option par “Choisir un layout” par exemple, dans l’onglet Label. Et on ajoute 2 options : “CTA” et “More post”.

‍

‍

Une fois ces étapes effectuées, vous devez vous rendre dans les items de votre collection CMS puis pour chaque item, il vous faut choisir le layout adapté en fonction de vos besoins. Vous allez comprendre plus bas.

‍

‍

Vous n’avez plus qu’à enregistrer vos items et à retourner sur votre page template pour venir paramétrer la visibilité de vos éléments.

On va dans l’onglet réglage à droite puis dans la partie “Conditional Visibility”. Dans la case ”Name”, on sélectionne “Choisir un layout” et dans la dernière case “Value” on pourra choisir entre nos deux layouts : “CTA” et “More post”.

Alors bien évidemment, c'est à vous de faire correspondre vos éléments avec le nom des options que vous avez choisi dans les paramètres de votre collection blogpost.

Une fois la visibilité conditionnelle activée, vous pouvez sauvegarder !

‍

‍

Après avoir réalisé cela, votre layout apparaitra uniquement sur la page si vous l’avez sélectionné dans les paramètres de votre item CMS.

Voici donc un moyen simple de personnaliser et de modifier vos items CMS sur Webflow nativement ! 💪 ✅

‍