Visibilité conditionnelle selon la date - Webflow

Tutoriel
July 15, 2022
3 min
Logo webflow avec drapeau français et l'option visibilité conditionnelle sur le CMS
Résumez cet article avec une IA
Points clés de l'article

Webflow offre la possibilité de personnaliser les items d'une collection grâce à des conditions ou même une page dynamique. Il est possible de créer des variantes pour chacun de vos items en fonction de critère bien précis.

Voici un article sur la fonctionnalité conditionnal visibility de Webflow.

Aujourd'hui, nous allons nous intéresser aux visibilités conditionnelles autour des dates dans Webflow. Pour cela, nous allons vous montrer comment personnaliser le style d'un item qui est à venir (qui commence dans le futur).

Étape 1 : Ajoutez un champ date à votre collection

Tout comme l'article pour masquer un item après ou avant un certain temps, nous allons ajouter un champ date à notre collection. Dans notre exemple, nous ajoutons une date de début pour notre événement. Nous remplissons ensuite notre collection avec de nouveaux items (dans notre cas, de nouveaux événements).

Ajout champ date collection webflow

Étape 2 : Créer un style pour vos items à visibilité conditionnelle

Dans notre cas, nous ajoutons juste un Div block avec un overlay et un text à l'intérieur qui signale que l'événement est à venir. Cependant, vous pouvez tout à fait personnaliser votre item comme bon vous semble.

Dans un premier temps votre style sera affecté à tous vos items, mais nous allons ajouter une visibilité conditionnelle à tous les éléments dont on souhaite qu'il ne soit visible ou non que pendant un certain temps.

Dans notre exemple, nous allons donc ajouter une conditionnal visibility sur notre Div block qui comprend notre texte "à venir".  

Ajout élements conditonnel webflow

Étape 3 : Ajouter une visibilité conditionnelle par date

Nous allons maintenant ajouter une visibilité conditionnelle pour n'afficher l'overlay et le texte uniquement lorsque le début de notre événement est dans le futur.

Nous nous rendons dans les paramètres de notre élément. Nous sélectionnons visibilité conditionnel, puis nous choisissons notre champ date (Start Date). Nous sélectionnons ensuite l'option "Is after or equal to..." puis 0 days (pour fixer la condition en fonction de la date du jour). Nous ne touchons pas à la dernière option car la valeur de la date est de 0.

ajout conditionnal visibility par date webflow

Vous pouvez bien entendu personnaliser ces paramètres en fonction de vos besoins.

Is after or equal to signifie le délai futur ou égal à la valeur que vous avez fixé en dessous

Is before or equal to signifie le délai passé ou égal à la valeur que vous avez fixé en dessous

On pourrait par exemple créer des styles différents pour nos items en fonction de s'ils sont dans 1 semaine ou 2 semaines ou 1 an, etc.

Après avoir sauvegardé notre visibilité conditionnelle, nous voyons que seuls nos événements dont la date de début est dans le futur ont le style avec l'overlay et le texte "à venir".

evenements avec visibilité conditionnelle selon la date dans webflow

Ainsi, vous pourrez facilement personnaliser vos collections événementielles ou même votre blog si vous le souhaitez !

Pour en apprendre plus sur Webflow, n'hésitez pas à vous préinscrire pour notre formation NoCode !

Thibaut Legrand
Thibaut Legrand
Technical Solutions Architect & Webflow Expert

Articles qui devraient vous intéresser

Capture d'écran de la page d'accueil de la recherche Google avec la barre de recherche et le logo Google.
Documentation
SEO

3 outils pour suivre vos positions SEO dans la SERP

3 outils pour suivre vos positions SEO dans la SERP
ChatGPT 5.0 OpenAI
News
IA

ChatGPT-5 vs ChatGPT-4 vs Claude Opus 4.1 : Le comparatif IA ultime 2025

ChatGPT-5 vs ChatGPT-4 vs Claude Opus 4.1 : Le comparatif IA ultime 2025
Capture d'écran montrant deux versions de la page d'accueil de Ramify. La version de fond représente un homme debout dans un bureau avec le texte « Vivez l'expérience banque privée, autrement ». La version au premier plan affiche une mise en page plus épurée avec le message « Votre patrimoine, notre expertise ».
Documentation

Comment Digidop a aidé Ramify à augmenter son taux de conversion grâce à une stratégie d’A/B testing avec Optibase ?

Comment Digidop a aidé Ramify à augmenter son taux de conversion grâce à une stratégie d’A/B testing avec Optibase ?

Transformez votre site web en un moteur de croissance.

Nous contacter