Si je modifie un composant global, est-ce que ça change sur toutes les pages
Garantir la cohérence et gagner du temps sur votre site hôtelier
Points clés :
- Les composants globaux sont synchronisés sur toutes les pages.
- Toute modification dans un composant global se met à jour automatiquement partout.
- Vous pouvez aussi détacher ou personnaliser un composant sur une page spécifique.
Les composants globaux (anciennement appelés “symboles”) sont l’un des piliers de Webflow pour assurer la cohérence et la rapidité de maintenance d’un site hôtelier. Ils permettent d’éviter les modifications répétitives et garantissent que chaque mise à jour reste uniforme sur toutes les pages du site.
1. Un composant global : une seule base, plusieurs instances
Quand vous créez un composant global dans Webflow, vous créez une référence unique.
Chaque fois que vous l’ajoutez sur une page, vous insérez une instance de ce composant.
Ainsi, si vous modifiez le composant à un endroit :
✅ Toutes les autres instances du même composant seront automatiquement mises à jour.
💡 Exemple concret :
Vous mettez à jour le bouton “Réserver maintenant” dans le header global → la modification se répercute instantanément sur toutes les pages du site.
2. Comment modifier un composant global
Pour apporter des changements :
- Sélectionnez le composant dans Webflow Designer.
- Double-cliquez pour entrer en mode édition.
- Modifiez le texte, les liens, les images ou les styles.
- Cliquez sur Save Component pour valider.
Toutes les pages contenant ce composant se mettront automatiquement à jour.
💡 Vous pouvez visualiser en un clic tous les composants de votre site via le Components Panel pour mieux les organiser et éviter les doublons.
3. Créer des variantes ou exceptions
Si vous souhaitez personnaliser un composant sur une seule page :
- Sélectionnez-le.
- Cliquez sur Unlink from Component pour le détacher.
Vous pouvez alors le modifier librement sans impacter les autres pages.
Autre option :
- Dupliquer le composant depuis le panneau Components.
- Renommez-le (ex. “Footer – Page Contact”).
Cela vous permet de garder plusieurs versions tout en conservant la structure de base.
4. Vérifier les changements avant publication
Avant de publier, vérifiez le rendu du composant dans les vues :
- Tablet, Mobile Landscape, Mobile Portrait.
- Les modifications de style (marges, taille, couleurs) s’appliquent également globalement.
💡 Astuce : si une page spécifique a besoin d’un ajustement visuel, créez une classe combo (.header-global.mobile) plutôt que de casser le composant.
Bonnes pratiques pour les sites hôteliers
- Utilisez des composants globaux pour :
- Le header (menu, logo, bouton Réserver).
- Le footer (adresse, mentions légales, liens sociaux).
- Les bannières d’appel à l’action (“Réservez votre séjour”).
- Le header (menu, logo, bouton Réserver).
- Gardez une nomenclature claire (“Header Global FR”, “Footer EN”) pour faciliter la maintenance.