Ajouter

Lorem ipsum

Lorem ipsum

A
A
A
Easter egg

20 vues

2 min

Comment afficher un texte différent selon l'heure du jour dans Webflow ?

Apprenez à afficher un texte différent selon l'heure du jour dans Webflow : salutation dynamique et message par jour.

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment afficher un texte différent selon l'heure du jour dans Webflow.

Exemple

Selon votre heure locale

Chargement...

...

Plage horaireMessageID à utiliser
5h - 12h☀️ Bonjourtime-greeting
12h - 14h🍽️ Bon appétittime-greeting
18h - 22h🌙 Bonsoirtime-greeting
Selon le jourBon lundi, Bon vendredi...day-greeting

1. Ajoutez un ID sur votre texte dans Webflow

Sur votre Text Block : custom attribute Name = id, Value = time-greeting.

2. Ajoutez le script dans Footer code

(function() {
function getGreeting() {
var h = new Date().getHours();
if (h >= 5 && h < 12) return '☀️ Bonjour';
if (h >= 12 && h < 14) return '🍽️ Bon appétit';
if (h >= 14 && h < 18) return '🌤️ Bonne après-midi';
if (h >= 18 && h < 22) return '🌙 Bonsoir';
return '⭐ Bonne nuit';
}
var el = document.getElementById('time-greeting');
if (el) el.textContent = getGreeting();

var dayEl = document.getElementById('day-greeting');
var days = ['Bon dimanche', 'Bon lundi !', 'Bon mardi', 'Bonne mi-semaine',
'Presque le weekend 🙌', 'Bon vendredi !', 'Bon samedi ☀️'];
if (dayEl) dayEl.textContent = days[new Date().getDay()];
})();

bon à savoir

Le script utilise l'heure locale du visiteur. Un visiteur en Australie verra 'Bonsoir' à midi en France : la salutation correspond à son heure locale, ce qui la rend personnalisée.

Conclusion

Un détail de personnalisation qui crée une connexion immédiate avec le visiteur.

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 dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

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.

Publié le

Ces tutoriels pourraient vous intéresser

tutoriels similaires

SEO / GEO

5 min lecture

5 vues

Comment faire une redirection sur Webflow ? (2026) ?

Mis à jour le 19.12.2025 par Sandro DA SILVA

SEO / GEO

5 min lecture

5 vues

Ajouter des données structurées à votre site Webflow ?

Mis à jour le 21.08.2025 par Sandro DA SILVA

No-code

5 min lecture

5 vues

Comment obfusquer un lien dans Webflow ?

Mis à jour le 23.04.2025 par Sandro DA SILVA

Let’s f*****G GO !!

Prêt à faire décoller
votre activité  ?

Alexandre

Max

Enora

Bryan

Cannelle

Tiphaine

Vous allez :heart: notre collaboration...