Utilisez les sélecteurs de couleur pour personnaliser l'apparence et la marque de votre moteur de réservation

Un sélecteur de couleur est un outil qui te permet de sélectionner et d’identifier le code couleur précis dont tu as besoin, pour l’utiliser afin d’appliquer tes couleurs et maintenir l’identité de ta marque de manière cohérente sur le web.

Cet article explique comment appliquer des couleurs personnalisées à ta page Cloudbeds Booking Engine avec le sélecteur de couleur dans Cloudbeds PMS.

 Tu cherches plus d’informations sur les codes de personnalisation pour ton moteur de réservation ? Découvre comment ajouter du code HTML et CSS pour personnaliser ton Cloudbeds Booking Engine.

Aperçu

Le sélecteur de couleur te permet de choisir les couleurs que tu souhaites appliquer pour personnaliser ton moteur de réservation. Tu trouveras des sélecteurs de couleur faciles à utiliser pour les cinq sections suivantes du moteur de réservation :

  1. Couleur principale
  2. Couleur de fond
  3. Couleur de l’en-tête
  4. Fond de la page de réservation

1. Couleur principale

La couleur principale est la couleur qui apparaît sur tous les boutons CTA (Call to Action) de ta page de moteur de réservation, le sélecteur de date et les liens hypertextes Lire la suite. Voici quelques exemples ci-dessous :


Couleur du tiroir « Afficher les offres / Masquer les offres » (Cloudbeds Booking Engine Plus uniquement)

Le tiroir « Afficher les offres » et « Masquer les offres » apparaît uniquement dans le Cloudbeds Booking Engine Plus. Ce tiroir utilise automatiquement une variation de ta couleur principale. Comme cette couleur est générée dynamiquement, elle peut apparaître légèrement plus claire ou plus foncée que la couleur de l’en-tête.

Si tu souhaites que le tiroir corresponde visuellement exactement à la couleur de l’en-tête, mets à jour la couleur principale dans le sélecteur de couleur afin que les deux éléments utilisent la même couleur de base.

2. Couleur de fond

Il s’agit de la couleur qui apparaît dans le fond de la section d’informations de l’établissement (gris clair dans l’exemple ci-dessous), juste en dessous du sélecteur de date et de la page de réservation :

3. Couleur de l’en-tête

L’en-tête est la partie supérieure de ta page de moteur de réservation. L’outil de couleur d’en-tête te permet de modifier/sélectionner la couleur qui sera appliquée à cette section. Voici l’exemple ci-dessous (bleu marine) :

4. Arrière-plan de la page de réservation

Il s'agit de la couleur d'arrière-plan qui apparaîtra sur la page d'atterrissage du moteur de réservation (bleu clair dans l'exemple ci-dessous) s'il n'y a pas d'image sélectionnée pour l'image du module :

 Le Cloudbeds Booking Engine est en cours de mise à niveau vers une nouvelle version. En savoir plus : Transition vers Booking Engine Plus - Liste de contrôle et FAQ.

Comment utiliser les sélecteurs de couleur pour personnaliser ton moteur de réservation

  1. Va à la page Paramètres dans le menu de ton compte, puis clique sur la section Moteur de réservation
  2. Clique sur l’onglet Personnaliser
  3. Choisis une couleur en cliquant sur l’échantillon de couleur. En sélectionnant une couleur, regarde l’aperçu à droite. Tu peux aussi saisir des codes couleur spécifiques.
  4. Enregistre. Les couleurs sélectionnées seront appliquées à la zone correspondante de la page du moteur de réservation.

 Pour assortir les couleurs du Cloudbeds Booking Engine à la palette de ton site web, nous te suggérons d’utiliser un outil de sélection de couleur en ligne (comme Image Color Picker, ou essaie le sélecteur de couleur de Google) pour identifier le code de tes couleurs de marque.

  • Pour inclure ton en-tête et pied de page personnalisés sur ta page de réservation, saisis les informations comme indiqué ci-dessus. Si aucun champ n’est rempli, l’en-tête et le pied de page par défaut de l’hôtel seront appliqués.

 Clique sur Réinitialiser tout par défaut pour revenir au schéma de couleurs par défaut de Cloudbeds pour une section individuelle ou pour toutes les sections.

  • Pour que l’en-tête et les flèches de navigation (par exemple) aient la même couleur, copie et colle le code (y compris le symbole "#") d’un champ dans l’autre.
Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 4 sur 8

Commentaires

0 commentaire

Vous devez vous connecter pour laisser un commentaire.