Modèle : en-tête et pied de page
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 propose un modèle central pour l’en-tête et un pour le pied de page. Ces rubriques se répètent sur les autres modèles et conviennent à la navigation, aux indications statiques, à la vente de bons et aux indications de suivi ou de cookies.
Comme l’en-tête et le pied de page sont visibles sur plusieurs pages, placez-y uniquement du contenu utile pendant tout le processus de réservation.
Comprendre l’en-tête et le pied de page
L’en-tête se trouve au-dessus du modèle de processus de réservation concerné et le pied de page en dessous. Les deux modèles sont gérés séparément et conservent leur dernière sélection dans chaque rubrique.
N’utilisez pas ces rubriques pour de longues descriptions d’offres. Ces contenus appartiennent à la catégorie, à l’offre ou au modèle Body approprié.
Un modèle pour toutes les pages
Chaque design contient un en-tête et un pied de page communs. Ils sont utilisés par les pages qui chargent réellement ce design. Un design de catégorie et le design standard du compte peuvent posséder des en-têtes et pieds de page différents. Vérifiez donc à la fois les pages d’offres et la page du compte ou de finalisation ; une modification dans un design de catégorie n’actualise pas automatiquement tous les autres designs.
Utilisez les rubriques communes pour la navigation, le logo, le contact, la langue ou la vente de bons. Les indications propres à l’offre appartiennent à sa description ou au modèle Body approprié.
Menu de navigation
Dans le menu de navigation, vous déterminez comment les participants se déplacent dans le processus de réservation. Les options habituelles sont :
Position de la navigation, par exemple fixée en haut.
Afficher ou masquer le bouton Toutes les offres.
Afficher le bouton Accueil dans le processus de réservation.
Afficher le champ de recherche, généralement dans la vue d’ensemble et le détail des offres.
Afficher le bouton de connexion si le compte participant est actif.
Afficher le choix de langue si plusieurs langues du processus de réservation sont actives.
Si vous intégrez certaines catégories ou offres dans un site web et ne souhaitez pas permettre le retour à la vue d’ensemble de toutes les offres, masquez le bouton Toutes les offres.
Options du menu de navigation
| Option | Effet | Quand est-ce pertinent ? |
|---|---|---|
| Toutes les offres | Ramène du détail de l’offre à la vue d’ensemble des offres. | Laissez cette option active si les participants peuvent changer d’offre. Désactivez-la si certaines catégories ou offres sont intégrées séparément. |
| Accueil | Ramène à la page de détail d’offre dans le parcours de réservation. | Utile si les participants doivent revérifier les détails de l’offre avant la finalisation. |
| Champ de recherche | Affiche la recherche dans la vue d’ensemble et le détail des offres. | À activer pour les grands catalogues d’offres ; souvent inutile sur les pages individuelles très ciblées. |
| Connexion | Ouvre l’accès au compte participant. | À activer si les participants doivent consulter eux-mêmes leurs réservations, factures, billets ou fichiers. |
| Choix de langue | Permet de basculer entre les langues de correspondance activées. | Pertinent uniquement si les offres, modèles et textes juridiques sont réellement renseignés dans plusieurs langues. |
Ramener de la page de réservation à votre propre site de cours
Le bouton Accueil intégré constitue une navigation de retour à l’intérieur du parcours de réservation edoobox. Vous pouvez l’afficher ou le masquer ; il ne prévoit pas d’adresse d’accueil externe librement définie. Le bouton Toutes les offres mène à la vue d’ensemble des offres edoobox.
- Ouvrez le design réellement attribué et son en-tête.
- Dans le menu de navigation, masquez la navigation de retour inutile pour votre périmètre individuel intégré.
- Ajoutez un bloc de texte et écrivez par exemple « Vers la vue d’ensemble des cours sur notre site web ».
- Sélectionnez le texte, choisissez Insérer un lien et saisissez l’adresse complète, par exemple
https://example.org/kurse/. Choisissez la cible de fenêtre proposée dans la boîte de dialogue du lien selon votre point d’accès. - Renseignez toutes les langues actives, enregistrez le widget et la mise en page et vérifiez le lien depuis la vue d’ensemble, le détail et l’inscription.
- Contrôlez l’accès direct à edoobox et la véritable intégration iFrame ou WordPress. Le lien doit ouvrir le site web prévu sans créer un second site de cours à l’intérieur d’un espace intégré trop petit.
Le bloc de texte est un contenu fixe de ce design. Pour des sites de cours différents selon le périmètre, vous avez besoin de l’attribution de design appropriée. Un retour ne termine ni ne confirme une réservation en cours ; donnez-lui un libellé explicite.
Bloc de texte dans l’en-tête ou le pied de page
Un bloc de texte convient à un logo, de brèves coordonnées, une adresse d’entreprise, un bandeau d’information ou des indications saisonnières. Renseignez le texte dans toutes les langues actives.
Les paramètres de visibilité déterminent si le texte apparaît toujours ou seulement dans certains cas d’intégration. Vérifiez l’affichage mobile pour que l’en-tête et le formulaire de réservation ne perdent pas trop d’espace.
Bouton de vente de bons
Le bouton de vente de bons peut être placé dans l’en-tête ou le pied de page. Avantage : la vente de bons reste visible sur toutes les pages pertinentes.
Utilisez cet emplacement uniquement si les bons sont réellement une offre récurrente. Trop de boutons permanents peuvent détourner l’attention de la finalisation de réservation. Les détails figurent dans Modèle : page de finalisation et vente de bons et Bons vendus / bon cadeau.
Bloc de texte et visibilité iFrame
Le bloc de texte permet de renseigner un logo, une adresse d’entreprise, une ligne de contact, de brèves indications ou des images dans toutes les langues actives. Vérifiez l’affichage mobile avec une attention particulière, car l’en-tête et le pied de page deviennent rapidement trop hauts sur les petits écrans.
Selon le paramètre du widget, un bloc de texte peut être toujours visible ou seulement si le processus de réservation est ouvert directement en dehors de votre site web. C’est utile lorsque le logo et l’adresse sont déjà visibles sur votre site, mais doivent apparaître en plus dans un lien direct edoobox.
Widget de code
Le widget de code est proposé dans le pied de page de la sélection actuelle et permet d’ajouter du code HTML, CSS ou script personnalisé. Nommez le composant selon son usage. Utilisez-le uniquement si vous connaissez précisément les effets du code sur l’affichage, la sécurité, la protection des données et le temps de chargement.
Si vous utilisez votre propre JavaScript ou jQuery, attendez que la page soit chargée et testez la modification dans tous les modèles pertinents. Un code qui masque un widget selon son identifiant peut devenir sans effet après des modifications de design ou toucher accidentellement un autre élément.
Bannière de cookies
Le bandeau de cookies recueille les consentements au suivi ou aux services externes. Placez-le de manière visible sans masquer les actions centrales de réservation. Rédigez un texte compréhensible et vérifiez le comportement du bandeau après consentement et refus. Si les cookies de suivi ne doivent pas être déposés en cas de refus, testez aussi le processus de réservation sans consentement.
Pour le suivi, lisez aussi Bandeau de cookies et Google Tag Manager / Google Analytics.
Exemple d’utilisation : en-tête pour un portail de cours
Une organisation affiche dans l’en-tête son logo, la navigation, la recherche et le choix de langue. Elle place le bouton de vente de bons dans le pied de page pour qu’il reste visible sans concurrencer le bouton d’inscription dans le processus de réservation.
Exemple d’utilisation : navigation multilingue avec compte participant
L’en-tête affiche le logo, la vue d’ensemble des offres, le choix de langue et la connexion. L’équipe vérifie chaque lien en allemand et en anglais ainsi que l’état avant et après la connexion. Sur mobile, le menu reste utilisable sans recouvrir le formulaire de réservation.
Exemple d’utilisation : suivi uniquement après consentement
Un code d’analyse est testé avec le bandeau de cookies. Avant le consentement, le suivi facultatif ne doit pas se charger ; après acceptation, il fonctionne sans ralentir la finalisation de réservation. Le refus et la modification ultérieure du choix sont aussi vérifiés.
Ajouter la navigation des abonnements et le parcours de rétractation
Si le plugin d’abonnement est actif, le menu de navigation peut afficher une entrée supplémentaire pour les abonnements. Réglez la visibilité, la couleur et le libellé par langue. Un texte personnalisé vide entraîne un repli sur la langue de l’organisation, puis sur le nom du produit. Le lien mène au catalogue public d’abonnements. Configuration : Catalogue d’abonnements et espace client.
Bootstrap 5.3 propose aussi une action de rétractation dans la navigation et le widget Bouton d’exercice de la rétractation. Ils mènent au formulaire de rétractation prévu sur la page de connexion. Le libellé et la couleur sont choisis dans le design ; les paramètres métier de rétractation appartiennent aux paramètres d’inscription, d’annulation et de rétractation.
Donnez un nom explicite aux widgets de code personnalisés. Vérifiez aussi l’en-tête et le pied de page sur les nouvelles pages d’abonnement : un lien toujours visible doit mener au bon catalogue et à la langue active.
Afficher le panier dans la navigation
Dans l’en-tête, ouvrez le menu de navigation et activez Afficher le panier dans la navigation. L’accès visible nécessite un parcours de panier prévu dans le design et une session de réservation appropriée. Une option de navigation ne modifie ni les règles de prix ni, à elle seule, l’action principale de finalisation.
Harmonisez cette option avec Vue de réservation dans les paramètres du design et Proposer le panier dans le bouton de finalisation. Le guide du panier explique les variantes classique et principale. Vérifiez le lien avant et après connexion, ainsi que sur mobile. Si un autre en-tête est chargé, contrôlez le design de catégorie ou le design standard du compte.