Design Manager : éditeur, mise en page, widgets et configuration Bootstrap

Les illustrations montrent une version antérieure de l'interface. Utilisez les étapes de ce guide pour les fonctions et options disponibles.

Le Design Manager contrôle l'apparence du processus de réservation public : en-tête, corps, pied de page, modèles, widgets, grille, points de rupture et styles Bootstrap. C'est donc l'endroit central si votre intégration dans le site web doit non seulement fonctionner, mais aussi s'harmoniser avec le site web.

Ce guide détaille l’interface de l’éditeur. Vous trouverez l’introduction fonctionnelle dans Concevoir le processus de réservation avec le Design Manager ; les options individuelles des widgets sont également décrites dans les pages des modèles.

Aperçu : Design, modèle et widget

Le Design Manager fonctionne sur trois niveaux. D'abord, vous choisissez ou créez un Design. Ensuite, vous ouvrez un Modèle dans l'en-tête, le corps ou le pied de page, par exemple Vue d'ensemble des offres, Détails de l'offre, Formulaire des participants ou En-tête. Dans ce modèle, vous placez et configurez les Widgets.

La mise en page et le contenu des widgets sont gérés séparément. Déplacer, insérer, supprimer ou redimensionner un widget constitue un brouillon de mise en page. Vous modifiez les paramètres de contenu, par exemple le libellé, le champ obligatoire, les modes de paiement ou le bloc de texte, dans la fenêtre du widget et les enregistrez à cet endroit.

Distinguer administration, environnement et Bootstrap

En cas de différence d’affichage, comparez trois éléments distincts : l’interface de votre administration, l’environnement edoobox utilisé et le style Bootstrap du design public. Une autre interface d’administration ne fait pas automatiquement passer un design enregistré à Bootstrap 5.3. L’environnement de test et l’environnement de production peuvent utiliser des designs et des données différents.

Ouvrez le lien réellement intégré depuis Partage d'aperçu et comparez le compte, la catégorie, le nom du design et la langue. Vérifiez ensuite le style Bootstrap attribué. Certains widgets diffèrent entre les anciens styles et Bootstrap 5.3 ; les Boutons sociaux en sont un exemple. Modifiez d'abord le style dans une copie de design et testez l'ensemble du parcours de réservation.

Comprendre l'interface de l'éditeur

En haut se trouvent la sélection du design, l’indication du design standard et les interrupteurs de points de rupture pour ordinateur, tablette et mobile. L’en-tête, le corps et le pied de page sont des zones de contenu distinctes. Seule la zone active affiche la grille modifiable ; les zones inactives apparaissent comme un aperçu réduit.

La barre latérale droite affiche les widgets correspondant au modèle actuellement sélectionné. Lorsqu'un modèle est changé, edoobox charge la sélection de widgets appropriée. Sur les petits écrans, l'interface peut indiquer qu'un écran plus grand doit être utilisé, car le glisser-déposer, les largeurs de grille et la barre latérale sont difficiles à contrôler.

Design Manager avec sélection de widgets dans la barre latérale droite.

Enregistrer ou abandonner le brouillon de mise en page

Les nouveaux widgets sont d’abord insérés comme brouillon. Tant que le bouton d’enregistrement de la mise en page est actif, l’ordre, la largeur, les espacements ou les suppressions de widgets ne sont pas encore enregistrés définitivement. Lors de l’enregistrement, edoobox traite les widgets existants modifiés, les widgets nouvellement insérés et les widgets retirés dans un même plan.

Le bouton Annuler rétablit le dernier état enregistré du modèle. Si vous changez de design, de modèle, de zone de contenu ou de point de rupture avec des modifications non enregistrées, edoobox vous demande de les enregistrer, de les abandonner ou de revenir. La fermeture de la fenêtre est également protégée contre les pertes accidentelles.

Pour les widgets nouvellement insérés, enregistrez d’abord le brouillon de mise en page afin de créer durablement l’élément. Modifiez ensuite ses paramètres. Pour un widget existant, enregistrez les modifications spécifiques en cours dans la fenêtre, puis les éventuelles modifications de mise en page encore en cours. Les propriétés générales peuvent être enregistrées directement lors de leur modification ; l’état d’enregistrement affiché et les messages d’erreur de chaque section font foi.

Widgets, sélection et widgets uniques

La liste des widgets dépend du modèle et de la zone de contenu. Les anciens widgets juridiques ou de récapitulatif sont masqués dans la nouvelle sélection lorsqu’une variante plus moderne existe. Cela vise à éviter l’utilisation accidentelle d’anciens éléments dans les nouveaux designs.

Certains widgets ne peuvent exister qu'une seule fois par modèle, par exemple le filtre des offres, toutes les réservations ou le calendrier des dates. Si un tel widget est déjà placé, il apparaît désactivé dans la sélection ou ne peut pas être déposé à nouveau.

Filtre des offres : filtre central pour les catégories, les tags, l’état, le prix, le lieu ou le responsable dans la vue d’ensemble des offres.
Toutes les réservations : Vue d'ensemble dans le compte des participants ou sur les pages de finalisation.
Calendrier des dates : affichage en calendrier des offres ou des dates.
Bloc de texte et bannière de cookies : contenus multilingues en texte enrichi avec enregistrement distinct dans la fenêtre du widget.

Grille, points de rupture et poignées

Les widgets sont placés dans une grille de 12 colonnes. Ordinateur de bureau, tablette et mobile enregistrent leurs propres valeurs. La largeur, l'espacement gauche, l'espacement supérieur et la hauteur peuvent donc différer selon le point de rupture.

La grille dispose de poignées pour la largeur, l'espacement gauche et l'espacement supérieur. Si la largeur et l'espacement gauche dépasseraient ensemble 12 colonnes, edoobox réduit automatiquement l'autre valeur. Ainsi, la mise en page reste dans la grille même en saisie manuelle.

Vérifiez les trois points de rupture après chaque modification importante. Une mise en page ordinateur de bureau avec trois colonnes peut devenir illisible sur mobile si l'ordre des widgets, la visibilité ou les espacements n'ont pas été adaptés.

La fenêtre contextuelle du widget se compose de paramètres spécifiques et de paramètres généraux. Les paramètres généraux concernent le nom, la largeur, la hauteur, le comportement de hauteur, l'espacement, la visibilité sur les appareils et la visibilité pour les participants. Les paramètres spécifiques dépendent du widget.

Paramètres des widgets dans le Design Manager avec options générales et spécifiques.

Si la visibilité selon les tags est activée, des tags positifs et négatifs peuvent être définis. Cette logique complète les tags comme conditions, mais agit ici sur l’affichage du widget pendant la réservation.

Champ de formulaire : relie un champ du formulaire des participants à un champ de données du participant et contrôle le champ obligatoire, la validation, les options ou la visibilité.
Systèmes de paiement : contrôle les moyens de paiement sélectionnables et leur ordre dans le processus de réservation. Les détails se trouvent sous Systèmes de paiement pour les paiements des participants.
Connexion : peut imposer la connexion, gérer le titre par langue et afficher les options de connexion.
Calendrier des dates : peut afficher les places disponibles et les créneaux complets et définir le nombre minimal ou maximal de dates sélectionnables.
Vignettes de catégories : contrôle la largeur des vignettes, le bouton d’affichage et la visibilité des catégories vides.

Configurer le style Bootstrap 5.3

L'éditeur Bootstrap gère le nom, le mode de thème, l'optimisation WordPress, la version ainsi que les variables claires et sombres. Les nouveaux styles utilisent Bootstrap 5.3. L'éditeur offre un mode formulaire pour les variables importantes et un mode JSON pour la modification directe.

Lors du passage en mode JSON, les valeurs du formulaire sont sérialisées. Pour revenir au formulaire, les deux champs JSON doivent contenir des objets valides non vides. Vérifiez particulièrement les accolades, les virgules et les guillemets. Ne modifiez que quelques variables à la fois en mode JSON, puis testez l’aperçu.

Après l’enregistrement, une compilation peut avoir lieu. Attendez qu’edoobox ait actualisé l’état. Si aucune modification n’est détectée, l’interface indique en substance qu’aucun changement n’a dû être compilé.

Aperçu public et rendu

La page publique de réservation affiche le design enregistré avec les données des widgets enregistrées. Elle n’affiche pas l’éditeur. Les brouillons de mise en page n’apparaissent donc dans l’aperçu, l’iFrame ou le plugin WordPress qu’après leur enregistrement.

La source de design appropriée peut provenir du design standard, de la catégorie principale ou de la catégorie spécifique. Si une catégorie utilise un design propre, testez précisément cette catégorie dans la vue Partage d'aperçu.

Vérifiez après les modifications de mise en page au moins une vue d'ensemble du compte, une catégorie, une offre individuelle, une inscription et la page de finalisation. C'est seulement ainsi que vous verrez si l'en-tête, le corps, le pied de page, l'ordre des widgets et le style Bootstrap s'harmonisent.

Exploiter un design de catégorie et une vue d'ensemble complète des offres

L’attribution du design détermine l’apparence. Le lien de compte, de catégorie ou d’offre ouvert détermine le point d’entrée et donc l’ensemble des offres visibles. Masquer un widget de catégories ne limite pas à lui seul la sélection des offres à une catégorie précise.

Point d'entrée	Design et contrôle
Vue d'ensemble complète du compte	Utilise le design standard du compte. Ouvrez le lien généré pour le compte et vérifiez les catégories et offres visibles.
Catégorie spécifique et ses offres	edoobox prend en compte l'attribution du design dans la hiérarchie des catégories. Sans attribution propre, le design de la catégorie supérieure ou le design standard s'applique. Une attribution propre plus précise peut remplacer le design.
Lien direct vers l'offre	Vérifiez le design dans le chemin de catégorie associé ainsi que le modèle Détails de l'offre. Une vue d'ensemble globale correctement conçue ne suffit pas pour cette page.

Dans le Design Manager, créez ou choisissez un design personnalisé pour la vue d’ensemble complète. Définissez-le comme design par défaut avec Définir comme design standard s’il doit déterminer l’apparence générale du compte.
Copiez le design de départ souhaité pour la catégorie principale concernée et attribuez à la copie un nom explicite, par exemple « Workshops ».
Ouvrez les paramètres de cette copie et activez la catégorie principale concernée sous Catégories avec ce design. Vérifiez l'attribution de design précédente affichée.
Dans le design de catégorie, concevez l’en-tête et la Vue d’ensemble des offres. Conservez un widget affichant les offres. Décidez séparément si la navigation par catégories y est nécessaire.
Ouvrez Partage d'aperçu une fois au niveau du compte et une fois pour la catégorie souhaitée. Utilisez le lien approprié ou le code d'intégration généré pour chaque page du site web.
Vérifiez les deux points d’entrée, les sous-catégories et les détails d’une offre pour chacun. Contrôlez aussi les retours à la vue d’ensemble et la finalisation réelle de la réservation.

Exemple : une organisation affiche toutes les catégories dans le design standard sur la page générale du programme. Une deuxième page du site doit afficher uniquement les ateliers avec son propre en-tête. Le lien vers la catégorie « Workshops » y est intégré et le design des ateliers est attribué à cette catégorie principale. La vue d’ensemble complète reste présente dans le design standard. Dans le deuxième point d’entrée, vérifiez explicitement qu’aucune offre d’une autre catégorie n’apparaît.

Un ordre chronologique commun à plusieurs catégories repose sur le bon point d’entrée, un widget d’offres commun et le tri des offres. Masquer la navigation par catégories ne modifie pas à lui seul le tri. La procédure est décrite dans Afficher chronologiquement toutes catégories confondues. Configurez le retour à votre propre site de cours comme lien personnalisé dans l’en-tête.

Données, caches et rechargement

Le Design Manager charge les widgets, la sélection de widgets et les modèles en fonction du design et du modèle. Les données déjà chargées peuvent être mises en cache pour que la barre latérale réagisse plus rapidement. Après l'enregistrement d'une mise en page, edoobox recharge les données de widgets du modèle afin que les nouveaux widgets reçoivent de vrais identifiants et que les widgets supprimés n'apparaissent plus.

Si une modification n'est pas visible dans l'aperçu, vérifiez d'abord si la mise en page a été enregistrée, si la fenêtre contextuelle du widget a été enregistrée séparément et si vous avez ouvert la bonne catégorie ou le bon design. Rechargez ensuite l'aperçu. Pour les intégrations WordPress ou de site web, un cache du site web peut également être impliqué.

Évitez de modifier le même modèle en parallèle dans plusieurs fenêtres de navigateur. L'état enregistré le plus récent peut sinon écraser les modifications d'une autre fenêtre ou donner l'impression que les paramètres disparaissent.

Trouver une modification de design enregistrée sur le site web

En cas de texte, logo ou mise en page manquant, procédez dans cet ordre. Cela permet de déterminer d'abord quel modèle enregistré le site web appelle réellement.

Identifier la page précise : ouvrez la page du site concernée et déterminez si elle affiche la vue d’ensemble du compte, d’une catégorie, les détails d’une offre ou une étape de réservation. Notez aussi la langue et l’affichage selon la taille d’écran.
Comparer le design de travail : Vérifiez en haut du Design Manager le nom de la copie modifiée. Une nouvelle copie ne devient pas automatiquement le design standard ou de catégorie par l'enregistrement seul.
Vérifier l'attribution : Comparez Définir comme design standard et Catégories avec ce design avec le chemin de catégorie concerné. Vérifiez également les attributions divergentes dans la hiérarchie pour les sous-catégories.
Ouvrir le modèle approprié : Une modification dans Vue d'ensemble des offres n'apparaît pas automatiquement dans Détails de l'offre ou dans le formulaire des participants. Pour les textes, vérifiez également la langue, la visibilité mobile et les éventuelles conditions par étiquettes du widget.
Terminer les enregistrements : enregistrez les paramètres de widget en cours et le brouillon de mise en page selon l’état affiché. Pour un nouveau widget, enregistrez d’abord sa création dans la mise en page. Corrigez les erreurs affichées avant d’évaluer le résultat.
Ouvrir directement le lien généré : Ouvrez à nouveau le lien approprié depuis Partage d'aperçu. Si le contenu et la conception y correspondent, comparez le lien de catégorie/d'offre ou le code d'intégration utilisé sur le site web avec ce point d'entrée.
Contrôler l'intégration : Vérifiez la même page dans la vue directe et sur le site web. Seulement si la vue directe correcte est à jour et que le site web diverge, vérifiez en outre le cache du site web, le thème WordPress et l'intégration. Rechargez ensuite le contexte du navigateur concerné.

Un cas fréquent : le logo a été modifié dans la nouvelle copie de design, mais la catégorie intégrée utilise toujours le design précédent. Attribuez la copie approuvée à la bonne catégorie et contrôlez à nouveau la même page du site web. Le parcours de réservation complet, y compris la page de finalisation, fait partie du contrôle, en particulier si plusieurs designs sont utilisés dans le compte.

Widgets spéciaux et pièges typiques

Systèmes de paiement : La mise en page et la logique de paiement sont séparées. Si un moyen de paiement manque, vérifiez également les paramètres du système de paiement et pas seulement le widget.
Bannière de cookies : les textes multilingues et le type de bannière doivent être adaptés aux paramètres juridiques et à l’intégration au site Web.
Connexion : une connexion imposée peut modifier fortement le parcours de réservation. Testez avec des participants existants et nouveaux.
Champ de formulaire : un champ visible est utile uniquement s’il est lié au bon champ de données du participant.
Vignettes de catégories : après un clic sur une vignette, le niveau suivant doit posséder un widget affichant les offres.
Bloc de texte : renseignez les contenus dans toutes les langues actives et vérifiez si le texte doit apparaître uniquement lors de l’accès direct ou également dans l’iFrame.

Optimisation de WordPress et sites Web externes

Lorsqu’un design est utilisé via le plugin WordPress, le CSS de WordPress peut influer sur l’affichage. Vérifiez donc l’aperçu edoobox ainsi que la page WordPress réelle avec son thème et son cache actifs.

Avec une intégration par iFrame, la séparation est plus forte, mais la hauteur, le comportement de défilement et l’affichage mobile peuvent dépendre du site Web. Coordonnez le Design Manager, le partage d’aperçu, le libellé, la langue et le retour en haut de page. Si vous utilisez un style Bootstrap avec optimisation WordPress, vérifiez aussi si les styles du thème remplacent ceux des boutons, des espacements ou des champs de formulaire.

Tester les modifications

Dupliquer le design ou utiliser le design de travail.
Modifier la mise en page, vérifier tous les points de rupture et enregistrer.
Ouvrir les popups de widgets, enregistrer les contenus et tester à nouveau.
Ouvrir l'aperçu au niveau du compte, de la catégorie et de l'offre.
Effectuer une réservation de test avec les principaux moyens de paiement et les champs de formulaire.
Vérifier séparément l'intégration WordPress ou iFrame si le site Web apporte un autre CSS.

Exemple d’utilisation : formulaire d’inscription propre à chaque catégorie

Une académie crée un design pour les cours d'entreprise. Dans le formulaire des participants, les champs inutiles sont supprimés, des champs supplémentaires sont ajoutés et les champs obligatoires sont vérifiés. Ensuite, l'équipe enregistre d'abord la mise en page, ouvre chaque champ de formulaire et contrôle la réservation sur mobile et sur ordinateur de bureau.

Exemple d’utilisation : vue d’ensemble des offres avec filtre et vignettes

Pour un programme de cours, le filtre des offres et les vignettes de catégories sont ajoutés. Le filtre des offres reste un widget à instance unique. Une liste d’offres est également ajoutée afin que des offres soient visibles après un clic sur une catégorie.

Coordonner le modèle, le plugin et le design enregistré

La sélection actuelle comprend des modèles de corps supplémentaires pour la zone d’attente, l’inscription à une place, la validation des certificats et, lorsque le plugin d’abonnement est actif, un catalogue et une finalisation d’achat d’abonnement. Utilisez la vue d’ensemble complète des modèles si l’élément recherché n’est pas proposé dans le modèle actuel.

Pour les widgets prévus en un seul exemplaire, la sélection empêche toute insertion supplémentaire dans le même modèle. Cela comprend notamment Filtre des offres, Toutes les réservations, Solde, Mes abonnements, Sélection d’abonnement, les différents éléments du catalogue et de finalisation d’achat ainsi que le calendrier des dates. Un changement de modèle peut afficher une autre sélection.

Lorsque le plugin d’abonnement est désactivé, les modèles et options d’insertion correspondants sont masqués. Les mises en page d’abonnement déjà enregistrées ne sont pas supprimées pour autant ; leur utilisation publique dépend toujours de l’état du plugin. Après activation, vérifiez la mise en page et la navigation et enregistrez délibérément votre configuration.

Les widgets de code personnalisés peuvent porter un nom propre. Nommez plusieurs composants selon leur objectif afin que vous puissiez modifier le bon composant dans l'en-tête du widget et dans la zone de contenu sélectionnée.

Corriger les erreurs d'enregistrement et attribuer le design

Si un message d'erreur reste visible après Enregistrer, la reprise n'est pas confirmée. Laissez la modification ouverte, corrigez les informations signalées ou la connexion et enregistrez à nouveau. Vérifiez ensuite à nouveau le même modèle. Annuler abandonne le brouillon de mise en page et restaure la dernière version de mise en page enregistrée ; les contenus de widgets enregistrés séparément ne sont pas automatiquement annulés par cela.

Sélectionnez dans les paramètres de design les catégories qui doivent utiliser le design propre, ou définissez-le spécifiquement comme design standard du compte. Le compte et certaines pages générales utilisent le design standard. Un design de travail enregistré n'est pas automatiquement attribué à toutes les catégories par le simple enregistrement. Le mode supplémentaire Vue de réservation est décrit dans Panier et action de finalisation.