---
url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/panneau-d-onglets'
title: 'Ajouter un panneau d’onglets | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:23:33+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  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.
tags:
  - Layout
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Ajouter un panneau d’onglets'
      description: |-
        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.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T14:23:33+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/panneau-d-onglets'
      articleSection: 'Mise en page'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/panneau-d-onglets'
      description: |-
        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.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Accueil
            item: 'https://dxpr.com/fr'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: fr
---
[Centre d’aide](/fr/hc)/[Documentation](/fr/hc/documentation) /[Apprendre DXPR Builder](/fr/hc/documentation/learn-dxpr-builder) /[Créer des pages](/fr/hc/documentation/learn-dxpr-builder/build) /[Ajouter du contenu](/fr/hc/documentation/learn-dxpr-builder/elements) /[Mise en page](/fr/hc/documentation/learn-dxpr-builder/layout/overview) # Ajouter un panneau d’onglets.

 Apprendre DXPR BuilderCréer des pagesAjouter du contenuMise en page

   ## Dans ce guide

 Guides associés

- [Ajouter un panneau repliable](/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/panneau-repliable)
- [Ajouter un carrousel](/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/mise-en-page-carrousel)
- [Ajouter une mise en page imbriquée](/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/mise-en-page-imbriquee)

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](/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/panneau-repliable) se lit généralement mieux.

## Ajouter un panneau d’onglets

1. 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.
2. Dans l’onglet **Mise en page**, cliquez sur **Onglets**. L’élément apparaît avec un onglet, nommé **Title**.
3. Survolez le panneau de l’onglet et ouvrez **Plus > Paramètres**. Tapez un nom dans **Tab title** et cliquez sur **Save**.
4. Cliquez sur **+** dans le panneau pour ajouter du contenu, comme un élément **Texte**.
5. 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](/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/panneau-repliable) : empiler questions et réponses qui s’ouvrent une à la fois.
- [Ajouter un carrousel](/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/mise-en-page-carrousel) : montrer le même type de contenu une diapositive après l’autre.
- [Ajouter une mise en page imbriquée](/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/mise-en-page-imbriquee) : mettre lignes et colonnes dans un onglet pour des mises en page plus riches.