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 horaire | Message | ID à utiliser |
|---|---|---|
| 5h - 12h | ☀️ Bonjour | time-greeting |
| 12h - 14h | 🍽️ Bon appétit | time-greeting |
| 18h - 22h | 🌙 Bonsoir | time-greeting |
| Selon le jour | Bon 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()];
})();Conclusion
Un détail de personnalisation qui crée une connexion immédiate avec le visiteur.
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.















