Vous pouvez personnaliser les couleurs et les styles de votre widget Bookeo. Vous pouvez facilement personnaliser les paramètres de couleur de votre page de réservation et votre webdesigner, ou toute personne ayant l’expérience de CSS/HTML peut ajouter des règles CSS personnalisées pour personnaliser l’interface de réservation. Cliquez ici pour voir des exemples de personnalisation du widget Bookeo.
Étape 1 -Définir les couleurs du fond et de la page du widget
1. Allez dans Paramètres>Couleurs et styles
Vous pouvez voir les effets de toutes vos modifications dans la case de prévisualisation au milieu de la page [1]. Vous pouvez également tester l'affichage sur votre site web avec le bouton Tester une réservation [2] sur le côté droit de la page .
2. Dans l'onglet Page, vous pouvez définir les couleurs du fond d'écran et de la page du widget.
Pour l'arrière-plan, vous pouvez choisir:
a. une couleur
Dans le menu déroulant Fond d'écran [3], sélectionnez couleur et choisissez la couleur [4].
Vous pouvez également définir une couleur pour votre titre [5], texte [6] et lien [7].
b. une image
Dans le menu déroulant Fond d'écran [3], sélectionnez image.
Cliquez sur le bouton Télécharger [9] pour télécharger une image. Vous pouvez également choisir un arrière-plan transparent. Vous pouvez télécharger un fond d'écran transparent en bas de cet article.
Étape 2 - Définir des couleurs pour les cases du widget - les champs contenant les noms de vos services/activités, qui servent aussi à séparer les activités/services
Dans l'onglet Case, vous pouvez sélectionner les couleurs pour vos cases. Les cases mentionnées ici sont les champs contenant les noms de vos services/activités et servent aussi à séparer les services/activités.
Vous pouvez définir la couleur par défaut ou définir des couleurs personnalisées.
Étape 3 - Définir les couleurs et styles des onglets de votre page de réservation
Dans la section Boutons
-
Cochez la case pour afficher les icônes en petits/grands boutons [10]
-
Sélectionnez le choix de couleurs [11] ;dans le menu déroulant: orange ou vert.
Étape 4 - Définir des règles CSS personnalisées
Dans la section CSS personnalisé (avancé), saisissez vos règles CSS personnalisées.
Si vous connaissez le développement web, la meilleure façon de savoir du quel sélecteur CSS vous avez besoin, est d’utiliser un navigateur comme Google Chrome, ce qui vous permet de trouver exactement l'id/classe CSS de chaque élément juste en cliquant dessus:
-
activez l'inspecteur'd'élément (Ctrl-Shift-I), section Éléments, cliquez sur l'icône de la loupe en bas
-
cliquez sur l’élément que vous voulez changer
-
trouvez son id/class CSS
-
ajouter une règle CSS pour cet élément
Pour en savoir plus sur CSS, nous suggérons un des nombreux tutoriels disponibles sur le web, par exemple: http://www.w3schools.com/css/
|
Les règles CSS ne s’appliquent pas à l’interface mobile. L’interface mobile est optimisé et testé pour toutes les principales plates-formes mobiles, et pour cette raison la personnalisation n'est pas disponible. |