Visibilité conditionnelle selon la date - Webflow

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).

É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".  

É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.

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".

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 !