Ajouter un panneau d’onglets.
Utilisez les onglets quand vous voulez plusieurs blocs de contenu lié au même endroit, avec un seul visible à la fois. Vous obtenez une rangée d’étiquettes d’onglets ; les visiteurs cliquent sur une étiquette pour voir son contenu. L’exemple construit une page d’agence avec un onglet par service. Pour des questions et réponses, un panneau repliable se lit généralement mieux.
Ajouter un panneau d’onglets
- Survolez la colonne et cliquez sur + dans sa barre de contrôle, ou sur le + au milieu d’une colonne vide, pour ouvrir le sélecteur d’éléments.
- Dans l’onglet Mise en page, cliquez sur Onglets. L’élément apparaît avec un onglet, nommé Title.
- Survolez le panneau de l’onglet et ouvrez Plus > Paramètres. Tapez un nom dans Tab title et cliquez sur Save.
- Cliquez sur + dans le panneau pour ajouter du contenu, comme un élément Texte.
- Pour ajouter un onglet, survolez les étiquettes d’onglets et cliquez sur Add tab dans la barre de contrôle Onglets. Le nouvel onglet atterrit premier, devant les autres. Nommez-le et remplissez-le de la même façon.
Ce que vous voyez
Une rangée d’étiquettes d’onglets se trouve au-dessus du contenu de l’onglet ouvert. En mode Preview et sur la page publiée, un clic sur une étiquette montre le contenu de cet onglet et cache le reste. Chaque onglet contient ses propres éléments, donc un onglet peut porter du texte et un autre un jeu de cartes. Sur les écrans de moins de 768 pixels, les onglets deviennent des en-têtes empilés qui s’ouvrent comme un panneau repliable.
Régler vos onglets
L’élément Onglets a trois réglages. Ouvrez-les depuis Plus > Paramètres dans la barre de contrôle Onglets, qui s’affiche quand vous survolez les étiquettes d’onglets.
| Réglage | Rôle | Défaut |
|---|---|---|
| Tab direction | Où se placent les étiquettes : Default (au-dessus du contenu), Left ou Right | Default |
| Style | L’aspect des étiquettes : Default (une ligne sous les étiquettes), Modern (cartes arrondies) ou Accordion (en-têtes avec lignes de séparation) | Default |
| Mobile friendly | Affiche les onglets comme en-têtes repliables sur les écrans de moins de 768 pixels | Activé |
Chaque onglet a ses propres réglages sous Plus > Paramètres sur son panneau. Tab title est le texte de l’étiquette. Tab description est une courte ligne optionnelle sous l’étiquette de l’onglet ouvert.
Gérer les onglets
- Réordonner : glissez une étiquette d’onglet vers une nouvelle place parmi les étiquettes. Son contenu suit.
- Renommer : survolez le panneau de l’onglet, ouvrez Plus > Paramètres, changez Tab title et cliquez sur Save.
- Retirer : survolez le panneau de l’onglet, ouvrez Plus et choisissez Delete. Tout ce que contient l’onglet est retiré avec lui.
Limitez les étiquettes à un à trois mots et restez autour de cinq onglets, pour que les étiquettes tiennent sur une ligne.
Si rien ne s’affiche
- Le nouvel onglet est premier au lieu de dernier. Add tab met toujours le nouvel onglet devant. Glissez son étiquette où vous voulez.
- Les réglages ne montrent que Tab title et Tab description. Vous avez ouvert les réglages d’un seul onglet. Survolez les étiquettes d’onglets pour afficher la barre de contrôle Onglets, puis ouvrez Plus > Paramètres là.
- Les téléphones affichent des en-têtes empilés au lieu d’onglets. Mobile friendly est activé, c’est le défaut. Désactivez-le dans les réglages Onglets pour garder des onglets sur toutes les largeurs d’écran.
- Onglets manque dans l’onglet Mise en page du sélecteur. Votre profil
d’utilisateur DXPR Builder l’exclut. Un administrateur coche Tabs sous
Elements dans votre profil à
/admin/dxpr_studio/dxpr_builder/profile.
Et ensuite ?
- Ajouter un panneau repliable : empiler questions et réponses qui s’ouvrent une à la fois.
- Ajouter un carrousel : montrer le même type de contenu une diapositive après l’autre.
- Ajouter une mise en page imbriquée : mettre lignes et colonnes dans un onglet pour des mises en page plus riches.