Bootstrap 5.3
Les illustrations montrent une version antérieure de l'interface. Utilisez les étapes de ce guide pour les fonctions et options disponibles.
Avec un style Bootstrap 5.3 personnalisé, vous adaptez l’apparence du processus de réservation edoobox à votre identité visuelle. Vous réglez par exemple les couleurs, les espacements, les arrondis, les polices et certaines options Bootstrap.
Cette fonction s’adresse aux personnes ayant des connaissances en HTML, CSS ou Bootstrap. Les modifications simples, comme la couleur principale, la couleur des boutons ou la police, peuvent souvent être réalisées directement en mode formulaire. Pour des styles complexes, un modèle de design précis ou l’aide d’une personne compétente est utile.
Conditions et domaine d’utilisation
Vous ouvrez le Design Manager avec un accès en modification et travaillez sur votre propre design. Un design système protégé sert de point de départ ; créez votre propre copie pour effectuer les modifications.
Vous savez quelles couleurs, polices et espacements vous souhaitez pour votre processus de réservation.
Vous testez les modifications avant la publication dans l’aperçu et sur des appareils mobiles.
Pour les adaptations très personnalisées, vérifiez les règles CSS et Bootstrap avant d’utiliser le style en production.
La conception de base du processus de réservation est décrite dans Concevoir le processus de réservation avec le Design Manager. Vous trouverez les détails de l’éditeur dans Design Manager : éditeur, mise en page, widgets et configuration Bootstrap.
Créer ou modifier un style Bootstrap
Dans le Design Manager, ouvrez votre propre design et ses paramètres. Contrôlez le style Bootstrap attribué et sa version.
Sous Styles Bootstrap, sélectionnez un style personnalisé à modifier ou créez-en un avec Ajouter. Attribuez un nom explicite et utilisez la version 5.3 pour les nouvelles fonctions.
Sélectionnez le mode initial Clair ou Sombre. Choisissez de gérer les variables en mode Formulaire ou séparément pour Light et Dark en mode JSON.
Enregistrez et attendez la fin du traitement du style. Sélectionnez le style dans votre propre design et contrôlez l’aperçu public.
Les styles d’anciennes versions de Bootstrap (jusqu’à la version 5) peuvent être sélectionnés dans l’éditeur actuel, mais ne peuvent pas y être modifiés. Un nouveau style personnalisé ne modifie les designs existants qu’une fois attribué à ceux-ci. Activez l’optimisation WordPress pour l’intégration WordPress réelle et vérifiez-la séparément dans cet environnement.
Adapter les couleurs
Les principales valeurs de couleur contrôlent les boutons principaux, les liens, les messages de réussite, les avertissements, les erreurs, l’arrière-plan et la couleur globale du texte. Utilisez de préférence les couleurs officielles de votre identité visuelle et assurez un contraste suffisant.
Les couleurs peuvent être choisies dans le champ de couleur ou saisies sous forme de valeur hexadécimale. L’exemple présente la sélection des couleurs d’un style Bootstrap 5.3.
- B
- Ouvrir la palette de couleurs du champ sélectionné
Les valeurs courantes sont --bs-primary pour la couleur principale et les liens, --bs-success pour les boutons d’inscription, --bs-warning pour les avis de liste d’attente, --bs-danger pour les erreurs ou les actions d’annulation, --bs-white pour les arrière-plans clairs et --bs-gray-900 pour le texte.
Espacements, bordures et arrondis
Les espacements et les arrondis déterminent si le processus de réservation paraît compact, aéré, sobre ou fidèle à votre marque. Même de petites modifications peuvent être visibles, notamment sur les cartes, les boutons, les champs de formulaire et les messages.
Vérifiez toujours le résultat dans la vue d’ensemble des offres, les détails de l’offre, le formulaire des participants et la page de paiement. Des espacements trop grands peuvent allonger inutilement les pages mobiles ; des espacements trop petits rendent l’utilisation plus difficile.
Autres options Bootstrap
Certaines options Bootstrap activent ou désactivent des comportements généraux tels que les arrondis, les ombres, les dégradés, les mouvements, les classes de grille ou les icônes de validation. Modifiez ces valeurs uniquement si vous pouvez réellement vérifier leur effet dans le processus de réservation.
Pour l’accessibilité, la lisibilité, des états de focus clairs et des mouvements discrets sont essentiels. Si vous modifiez les animations, les ombres ou les contrastes, testez particulièrement les champs de formulaire, les messages d’erreur et les boutons.
Variables Bootstrap courantes
Les clés suivantes sont des variables de l’éditeur/JSON pour la création de styles. Saisissez-les en mode JSON sans --bs-. Les interrupteurs d’activation ne sont pas des variables CSS que vous pouvez simplement écrire dans un bloc de texte à l’exécution.
| Clé | Effet |
|---|---|
enable-rfs | Tailles de police adaptatives |
enable-rounded | Coins arrondis |
enable-shadows | Ombres |
enable-gradients | Dégradés de couleurs |
enable-transitions | Transitions |
enable-validation-icons | Icônes de validation |
enable-reduced-motion | Prise en compte de la réduction des mouvements |
Si le JSON est invalide, corrigez d’abord l’erreur de syntaxe affichée. Si le traitement du style échoue, utilisez le style précédent qui fonctionne, corrigez la modification et enregistrez à nouveau. Vérifiez ensuite les erreurs de formulaire, les boutons et les textes longs dans les apparences claire et sombre.
Adapter la police
Dans la section Police, vous définissez la police sans empattement et la police à chasse fixe utilisées. Une police sans empattement bien lisible suffit pour la plupart des processus de réservation.
Les deux champs de police distinguent la famille de police générale et celle dont les caractères ont une largeur identique. L’aperçu doit correspondre au site Web intégré et au design utilisé.
Si vous utilisez une police externe comme Google Fonts, vous devez également vous assurer qu’elle est chargée pendant la réservation. Ajoutez l’import CSS approprié uniquement après avoir clarifié la protection des données, les performances et le temps de chargement.
Tester le style avant sa mise en ligne
Testez au minimum ces sections : vue d’ensemble des offres, détails de l’offre, formulaire des participants, questions supplémentaires, panier ou page de paiement, messages d’erreur, liste d’attente et affichage mobile. Vérifiez également que les textes des boutons, des badges et des champs de formulaire ne sont pas tronqués.
Si le style est utilisé dans plusieurs langues, testez particulièrement les libellés longs en allemand et en anglais. Un bouton adapté à une langue peut être trop étroit dans une autre.
Exemple d’utilisation : préparer un style pour une académie d’entreprise
Une académie d’entreprise reprend la couleur principale, la police et l’arrondi des boutons de son identité visuelle. L’équipe teste ensuite la vue d’ensemble des offres, l’inscription et la page de paiement sur ordinateur et smartphone. Le style est utilisé pour la page publique de réservation uniquement lorsque le contraste, la lisibilité et la largeur des boutons conviennent.
Comparez votre style Bootstrap avec les principales pages de réservation : vue d’ensemble des offres, détails de l’offre, formulaire des participants, récapitulatif et paiement. Vérifiez le contraste, les états de focus, les messages d’erreur et la lisibilité sur mobile. Un style qui paraît réussi dans l’éditeur peut tout de même sembler chargé dans de longs formulaires.
Planifier ensemble la version Bootstrap et les nouveaux widgets
Un style Bootstrap se sélectionne dans le design. Le modèle seul ne fait pas passer un ancien design à Bootstrap 5.3. Vérifiez la version du style réellement attribué avant de chercher de nouveaux widgets.
L’image de l’offre, la photo du participant, la sélection d’abonnement dans le récapitulatif de réservation et la nouvelle action de rétractation nécessitent Bootstrap 5.3. Les trois widgets de la zone d’attente sont également affichés dans le design de réservation Bootstrap 5.3. La vue d’ensemble des modèles et widgets indique les emplacements adaptés.
En mode formulaire, utilisez les paramètres libellés. En mode JSON, utilisez les clés de variables proposées sans le préfixe --bs-, par exemple primary ou enable-rounded. Les libellés --bs-… visibles dans le formulaire ne constituent pas une instruction pour insérer toutes les options comme CSS à l’exécution. Enregistrez les paramètres Light et Dark et vérifiez les deux affichages.