J’aimerais créer un bloc réutilisable, comment faire

Points clés :

Créer un composant global (anciennement “symbole”) dans Webflow.
Réutiliser et modifier ce bloc sur toutes les pages.
Simplifier la maintenance et garantir l’uniformité du site.

Sur un site Webflow hôtelier, certains éléments apparaissent sur plusieurs pages : le bandeau de réservation, le pied de page, la navigation ou encore un encart promotionnel. Plutôt que de les recréer manuellement à chaque fois, Webflow permet d’en faire un bloc réutilisable. Ce système de composants rend vos mises à jour plus rapides et garantit une cohérence parfaite sur tout le site.

1. Identifier le bloc à rendre réutilisable

Commencez par repérer les éléments présents sur plusieurs pages :

Le header (logo, menu, bouton “Réserver”).
Le footer (adresse, contact, liens sociaux).
Une bannière d’appel à l’action (“Réservez votre séjour dès maintenant”).
💡 Astuce : regroupez tous les éléments qui composent ce bloc dans un Div Block pour une meilleure organisation.

2. Transformer le bloc en composant global

Dans Webflow Designer :

Sélectionnez le bloc souhaité.
Faites un clic droit, puis choisissez “Create Component” (ou utilisez le raccourci Cmd + Shift + A / Ctrl + Shift + A).
Donnez un nom clair au composant (ex. “Footer Global” ou “Header Réservation”).
Ce bloc devient désormais un composant réutilisable : toute modification y sera répercutée automatiquement sur l’ensemble du site.

3. Ajouter le composant sur d’autres pages

Pour utiliser votre bloc sur d’autres pages :

Ouvrez la page concernée dans le Designer.
Allez dans le panneau Add (A) → Components.
Glissez votre bloc réutilisable à l’endroit souhaité.
💡 Le composant garde toutes ses propriétés (styles, interactions, liens), ce qui garantit une parfaite cohérence visuelle.

4. Modifier un bloc réutilisable

Si vous souhaitez changer le contenu ou le style du bloc :

Sélectionnez-le dans le Designer.
Double-cliquez pour éditer le composant.
Une fois les modifications enregistrées, elles s’appliquent automatiquement sur toutes les instances du composant dans le site.
💡 Si vous avez besoin d’une version différente pour une page spécifique, utilisez “Unlink from Component” afin de la personnaliser sans impacter les autres.

5. Gérer et organiser vos composants

Ouvrez l’onglet Components Panel pour visualiser tous vos blocs réutilisables.
Utilisez un système de nommage clair (ex. “Header EN”, “Footer FR”, “Promo Été”).
Supprimez les anciens composants inutilisés pour garder votre projet propre et rapide à charger.

Bonnes pratiques pour les sites hôteliers

Créez un composant global de réservation avec un bouton toujours visible.
Centralisez vos coordonnées et mentions légales dans un footer commun.
Utilisez un bandeau d’offres dynamiques que vous pouvez mettre à jour en un clic (offre week-end, code promo, saison).

Conclusion

Créer un bloc réutilisable dans Webflow est une étape essentielle pour maintenir la cohérence et la qualité visuelle de votre site hôtelier. En utilisant les composants globaux, vous simplifiez la gestion du contenu, gagnez du temps et garantissez une expérience fluide et homogène sur toutes vos pages.