Cet article explique comment ouvrir une page, une composition ou un média par-dessus la page en cours, en modale ou en panneau latéral. Vous saurez régler l’ouverture sur un lien et composer l’apparence de la fenêtre dans un gabarit.
Avant de commencer
- Une modale est une fenêtre qui s’ouvre par-dessus la page, au centre ou dans un coin du bas. Un panneau latéral glisse depuis la droite. Le visiteur ne quitte pas la page où il se trouve.
- L’ouverture se règle sur le lien qui mène au contenu. L’apparence de la fenêtre se compose dans un gabarit.
- Le contenu est chargé au moment du clic, sans recharger la page. Tant que personne n’ouvre la fenêtre, elle ne ralentit pas la page.
Ouvrir un lien en modale
L’exemple suivant ouvre la page de contact dans un panneau latéral depuis un bouton.
- Sélectionnez le bouton et ouvrez l’onglet Réglages, panneau Lien.
- Saisissez l’adresse de la page, ou choisissez-la parmi les contenus du site.
- Dans Ouverture du lien, choisissez Sur le côté droit.
| Choix | Ouverture |
|---|---|
| Classique (dans l’onglet du navigateur) | Le navigateur charge la page, comme pour un lien ordinaire. Valeur par défaut. |
| Dans une modale | Une fenêtre centrée. |
| Modale en bas à gauche, Modale en bas au centre, Modale en bas à droite | Une fenêtre ancrée dans un coin du bas. |
| Sur le côté droit | Un panneau latéral qui glisse depuis la droite. |
Le panneau Lien est le même sur le Conteneur, le Titre, le Bloc simple, le Média, le Bouton, les liens de la Navigation et la carte d’une liste de contenus. Un lien posé sur des mots d’un texte le propose aussi, dans la barre latérale du lien.
- Une composition ou un média s’ouvre toujours par-dessus la page : l’ouverture classique n’est pas proposée.
- Une adresse en
mailto:, entel:ou une ancre en#s’ouvre sur place : le panneau retire Ouverture du lien. - Le même contenu peut s’ouvrir en modale depuis un bouton, en panneau latéral depuis un menu et en page classique depuis un autre lien.
Comprendre la case du nouvel onglet
Une modale s’ouvre sur la page alors qu’un nouvel onglet en part. Les deux se contredisent. Dès qu’une modale ou un panneau latéral est choisi, Ouvrir dans un nouvel onglet se décoche et se grise.
| Situation | État de la case |
|---|---|
| Classique (dans l’onglet du navigateur) | Disponible, décochée par défaut. |
| Une modale ou Sur le côté droit | Décochée et grisée. |
| Un lien vers une composition ou un média | Décochée et grisée en permanence. |
| Masquer le lien aux moteurs de recherche activé | Décochée et grisée, avec Nofollow, même en ouverture classique. |
De retour sur l’ouverture classique, la case redevient disponible, décochée.
Composer la fenêtre dans un gabarit
L’apparence d’une modale ou d’un panneau latéral se compose dans un gabarit, comme celle d’une page. Chaque position a son gabarit : Modale, Modale en bas à gauche, Modale en bas au centre, Modale en bas à droite et Panneau latéral.
- Dans le menu de l’administration, ouvrez Gabarits, puis cliquez sur Ajouter un gabarit.
- Choisissez la position, par exemple Panneau latéral, puis le type de contenu visé si la fenêtre le demande.
- Dans l’éditeur du gabarit, insérez le bloc Modale ou panneau latéral et choisissez sa variante : Modale, une modale en bas, ou Panneau latéral.
- Dans le Contenu de la modale ou du panneau, posez un titre, les blocs voulus et le bloc Contenu du post à l’endroit où le contenu ouvert doit s’afficher.
- Ajoutez un bloc Fermer la modale ou le panneau, puis publiez le gabarit.
Un gabarit neuf est enregistré en brouillon : il ne sert qu’une fois publié. Le gabarit le plus précis l’emporte : un gabarit de modale fait pour un type de contenu passe devant le gabarit Modale générique. Les trois modales du bas prennent le gabarit Modale quand elles n’en ont pas à elles. Le panneau latéral ne revient pas à la Modale.
| Bloc | Rôle |
|---|---|
| Modale ou panneau latéral | Le bloc qui entoure la fenêtre. Il contient toujours un Fond de fermeture et un Contenu de la modale ou du panneau. Il porte la position et la fermeture. |
| Fond de fermeture | Le fond posé sur la page derrière la fenêtre. Vous réglez surtout sa couleur. |
| Contenu de la modale ou du panneau | Le cadre du contenu. Il accepte tous les blocs, se met en forme comme un conteneur et propose un Affichage en bloc, en flex ou en grille. |
| Fermer la modale ou le panneau | Un bouton qui ferme la fenêtre au clic, à placer où vous voulez dans le panneau. |
| Réglage | Effet | Valeur par défaut |
|---|---|---|
| Position, dans la barre d’outils du bloc | Centre, En bas à gauche, En bas au centre, En bas à droite ou Panneau latéral. | Centre |
| Fermer au clic extérieur, panneau Réglages de la modale ou du panneau | Ferme la fenêtre quand le visiteur clique sur le fond. | Activé |
Modale ou panneau latéral, Fond de fermeture et Contenu de la modale ou du panneau n’existent que dans l’éditeur d’un gabarit et dans celui du bandeau de consentement. Dans une page, on règle seulement l’ouverture du lien.
Une IA connectée avec le droit sur les gabarits peut composer ce gabarit à votre place : le fond, le panneau, un titre en tête et un bouton de fermeture.
Publier les deux gabarits obligatoires
Les gabarits Modale et Panneau latéral sont obligatoires : le site ne part pas en Production tant qu’ils ne sont pas publiés sur le Staging. Ce sont deux des étapes de l’encadré Étapes de mise en place du tableau de bord, Concevoir la modale générique et Concevoir le panneau latéral. Le catalogue de créations propose pour les deux Modale : générique, avec le fond, un titre, le contenu ouvert et un bouton de fermeture.
Rendre la fenêtre utilisable au clavier
Tout ce qui s’ouvre par-dessus la page suit les mêmes règles, sans réglage : une modale, un panneau latéral, le menu mobile et le bandeau de consentement.
| Comportement | Pour le visiteur |
|---|---|
| La fenêtre s’annonce comme une fenêtre, sous un nom | Un lecteur d’écran dit qu’une fenêtre s’est ouverte et lit son nom : le premier titre du panneau. |
| Le focus du clavier entre dans la fenêtre | La touche Tab parcourt la fenêtre, pas la page cachée derrière. |
| La tabulation tourne en boucle | Après le dernier élément, Tab revient au premier. Maj+Tab fait le chemin inverse. |
| La page du dessous est mise en sommeil | Ni le clavier, ni la souris, ni la recherche du navigateur ne l’atteignent. |
| Échap ferme la fenêtre | Si une liste déroulante est ouverte dans la fenêtre, Échap la ferme d’abord, puis un second appui ferme la fenêtre. |
| Le focus revient d’où il venait | À la fermeture, le clavier retrouve le lien ou le bouton qui a ouvert la fenêtre. |
| Les boutons de fermeture sont de vrais boutons | Ils s’atteignent au clavier, s’activent avec Entrée ou Espace et s’annoncent Fermer. |
Deux réglages restent à votre charge.
- Commencez le panneau par un titre. Une fenêtre qui commence par le titre « Nous contacter » s’annonce ainsi. Sans titre, elle s’annonce Dialogue, ce qui ne dit rien au visiteur.
- Si le déclencheur n’affiche qu’une icône ou une image, remplissez le champ Nom accessible de son panneau Lien.
Ouvrir une fenêtre sur un site multilingue
Une fenêtre s’affiche dans la langue de la page depuis laquelle on l’ouvre : ses libellés et les listes de contenus qu’elle contient. Les mots écrits dans une composition, eux, restent dans la langue où vous les avez écrits. Prévoyez une composition par langue et faites pointer chaque lien vers la bonne.