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 spécifique dont tu as besoin, de l’utiliser pour appliquer tes couleurs et de 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 du moteur de réservation Cloudbeds 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 moteur de réservation Cloudbeds.

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 (appel à l'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 l’arrière-plan 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 votre Booking Engine

  1. Accédez à la page Paramètres dans le menu Compte, puis cliquez sur la section Booking Engine
  2. Cliquez sur l’onglet Personnaliser
  3. Choisissez une couleur en cliquant sur l’échantillon. Lors de la sélection d’une couleur, consultez l’aperçu à droite. Vous pouvez aussi saisir un code couleur précis.
  4. Enregistrez. Les couleurs sélectionnées seront appliquées à la zone correspondante de la page du Booking Engine.

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

  • Pour inclure votre propre en-tête et pied de page personnalisés sur votre page de réservation, saisissez 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.

 Cliquez 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, copiez-collez 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.