Une longue page avec spécifications, avis et instructions: les utilisateurs défilent, se perdent et repartent. Les boutiques en ligne ont résolu ce problème depuis longtemps en répartissant les descriptions, les paramètres et les avis dans des onglets. Pas de rechargement, pas de défilement jusqu’à la section recherchée.

Mais les onglets ne sont pas utiles que pour les boutiques en ligne. Regardez n’importe quelle page d’extension sur WordPress.org: les informations, les avis, l’installation, tout est séparé en onglets. Les utilisateurs voient immédiatement la structure et basculent là où ils en ont besoin.

Voici deux méthodes concrètes pour ajouter des onglets aux articles et pages WordPress. La première, via un constructeur de pages, si vous en avez déjà un d’installé. La seconde, via l’extension gratuite Tabs Responsive, si vous avez besoin d’onglets sans dépendre d’un constructeur spécifique.

💡 Aperçu rapide:

• Vérifiez si votre constructeur de pages propose un module d’onglets
• Installez l’extension gratuite Tabs Responsive depuis le répertoire WordPress.org
• Créez les onglets dans le constructeur par glisser-déposer et remplissez-les avec votre contenu
• Insérez le shortcode généré sur la page souhaitée ou dans un widget

En quoi les onglets diffèrent des accordéons

Il ne faut pas confondre les onglets avec les accordéons, ils répondent à des besoins différents. Un accordéon déploie un bloc et referme les autres: pratique pour une FAQ et pour les écrans mobiles. Les onglets gardent tous les intitulés visibles et changent le contenu instantanément. Les utilisateurs voient toujours la structure et peuvent passer rapidement d’une section à l’autre.

Selon le Nielsen Norman Group, les accordéons sont adaptés quand les utilisateurs n’ont besoin que d’une seule section parmi plusieurs. Les onglets fonctionnent quand les visiteurs sont susceptibles de passer d’un onglet à l’autre au cours d’une même visite. Pour les pages produit, les onglets l’emportent: les acheteurs comparent les spécifications et la description dans une même fenêtre sans perdre le contexte.

Attention: si le contenu d’un onglet dépasse la hauteur d’un écran, un accordéon peut s’avérer plus pratique. Un onglet trop long oblige à faire défiler la page, comme une page classique.

Méthode 1: les onglets via un constructeur de pages

Si vous utilisez déjà un constructeur de pages, vous avez de la chance. La plupart des constructeurs populaires intègrent un module d’onglets en standard.

Elementor

🔗 Elementor sur WordPress.org

Elementor, le constructeur de pages le plus populaire pour WordPress: plus de 10 millions d’installations actives et 40 à 50% du marché des constructeurs de pages, d’après les données Colorlib pour 2026. Le module d’onglets est inclus dans la version gratuite. Faites glisser l’élément «Onglets» sur la page, modifiez les titres et le contenu des onglets, puis personnalisez le style pour l’adapter au design de votre site.

L’avantage est que les onglets Elementor héritent des styles globaux: les polices, les couleurs et les espacements sont repris automatiquement. Vous n’avez pas besoin de modifier le CSS séparément.

WPBakery

🔗 WPBakery, site officiel

WPBakery (anciennement Visual Composer), un constructeur premium souvent fourni avec les thèmes. Contrairement à Elementor, le module d’onglets démarre ici vide: vous ajoutez des éléments distincts dans chaque onglet, texte, images, icônes, boutons. Cela offre davantage de flexibilité, mais demande quelques étapes supplémentaires lors de la configuration.

Si vous avez besoin d’instructions détaillées pour WPBakery, nous avons un guide séparé.

Méthode 2: le plugin Tabs Responsive, configuration pas à pas

Vous n’utilisez pas de constructeur de pages et en installer un uniquement pour des onglets serait disproportionné. Tabs Responsive, un plugin gratuit du répertoire WordPress.org, fait exactement ce qu’il promet: il ajoute des onglets à n’importe quel article ou page via un shortcode ou un widget.

🔗 Tabs Responsive sur WordPress.org

Le plugin est vivant et régulièrement mis à jour: plus de 20 000 installations actives, note de 4,7 sur 5, plus de 500 avis, dernière mise à jour en mai 2026, compatible avec WordPress 6.8.3. La version gratuite inclut un modèle de design, des styles horizontal et vertical, et la prise en charge des icônes Font Awesome. La version Pro ajoute plus de 20 modèles, plus de 500 polices Google Fonts et l’animation du contenu.

Étape 1: installation

Dans l’administration WordPress, allez dans Extensions → Ajouter, saisissez tabs responsive dans la recherche. Trouvez l’extension de wpshopmart, cliquez sur Installer, puis sur Activer.

Après l’activation, une nouvelle entrée «Tabs Responsive» apparaît dans le menu de gauche.

Étape 2: créer vos premiers onglets

Allez dans Tabs Responsive → Add New Tabs. Un constructeur par glisser-déposer s’ouvre.

Donnez d’abord un nom explicite à votre jeu d’onglets, par exemple «Fiche produit» ou «Onglets page d’accueil». Cela vous sera utile lorsque vous aurez plusieurs jeux pour différentes pages.

Le constructeur peut sembler imposant, mais la logique est simple:

Remplissez maintenant les onglets eux-mêmes. Dans la section Add tabs, configurez pour chaque onglet:

• Tab title, ce que l’utilisateur verra sur l’onglet: «Description», «Caractéristiques», «Avis».
• Tab description, le contenu de l’onglet. Un éditeur WYSIWYG complet est disponible: vous pouvez insérer des images, des vidéos, de la musique, d’autres shortcodes.
• Tab icon, choisissez une icône dans la bibliothèque Font Awesome intégrée au plugin.
• Display above icon, cette option place le titre au-dessus de l’icône ou désactive l’icône pour ne laisser que le texte.
• Remove, bouton pour supprimer un onglet spécifique.
• Add new tabs, ajoute un onglet vide au jeu.
• Remove all, réinitialise tous les onglets en une fois.

Les onglets peuvent être glissés pour modifier leur ordre. Cliquez sur Save Draft pendant le processus: si vous quittez la page par inadvertance, les modifications ne seront pas perdues.

Étape 3: design et styles

L’apparence des onglets se configure dans la barre latérale droite du constructeur.

La version gratuite propose un modèle de design:

La version Pro ajoute 19 modèles supplémentaires. Mais même dans la version gratuite, vous pouvez personnaliser: couleur de fond et de police, famille de polices, marges internes, bordures, alignement des icônes, animation de transition.

Si les réglages standards ne suffisent pas, le plugin dispose d’un champ pour du CSS personnalisé:

Vous trouverez également ici le bouton Update Default Settings: cliquez dessus pour que tous les nouveaux jeux d’onglets soient créés avec les paramètres de style actuels.

Étape 4: publier les onglets sur une page

Lorsque le contenu et le style sont prêts, cliquez sur Publish en haut de l’écran.

Le plugin génère un shortcode du type [TABS_R id=443]. Copiez-le.

Ouvrez l’article ou la page où vous souhaitez insérer les onglets et collez le shortcode à l’endroit voulu. Cela fonctionne dans tous les éditeurs, aussi bien l’éditeur classique que Gutenberg.

Si vous devez placer des onglets dans une barre latérale ou un pied de page, utilisez le widget Tabs Responsive. Allez dans Apparence → Widgets:

Cliquez sur le lien «Cliquez ici» et vous accéderez à l’écran des widgets, où vous pourrez faire glisser le widget dans la zone de votre choix:

Après 5 à 7 minutes de paramétrage, voici le résultat obtenu:

Les couleurs et les styles sont ici basiques; si vous le souhaitez, ajustez-les dans le panneau de droite du constructeur ou via du CSS personnalisé.

Regardez la vidéo pour voir l’ensemble du processus, de l’installation jusqu’aux onglets finalisés sur la page:

⁉️🤔 Foire aux questions

Les onglets fonctionnent-ils sur les appareils mobiles?

Oui. L’extension Tabs Responsive est construite sur Bootstrap, les onglets s’adaptent donc à tous les écrans. Sur les écrans étroits, les onglets horizontaux peuvent se transformer en liste verticale ou en accordéon, selon le template choisi. Vérifiez l’affichage des onglets sur un téléphone après la configuration: si le texte des onglets est long, le style vertical peut s’avérer plus pratique que l’horizontal.

Peut-on ajouter des onglets dans le corps d’un article sans extension?

Sans extension ni constructeur de pages, non, sauf à écrire votre propre code JavaScript et CSS. WordPress seul ne propose pas de solution prête à l’emploi pour des onglets dans le contenu. L’extension Tabs Responsive résout ce besoin sans code: l’installation et le paramétrage prennent quelques minutes, le résultat s’obtient via un shortcode. C’est un compromis entre «je ne veux pas installer d’extension» et «je ne veux pas coder from scratch».

Les onglets ont-ils un impact sur le SEO?

Avec une implémentation correcte, non. Le contenu de tous les onglets est présent dans le code HTML de la page dès le premier chargement, Google le voit et l’indexe. L’extension Tabs Responsive délivre l’intégralité du contenu dans le code source, sans chargement asynchrone, ce qui est sans risque pour le SEO. Les problèmes ne peuvent survenir qu’avec des onglets chargés en AJAX (le contenu de l’onglet ne se charge qu’au clic): utilisez ce type de solution avec prudence.

Que faire si les onglets entrent en conflit avec le thème?

Le conflit de styles est le problème le plus fréquent. Essayez d’abord le champ CSS personnalisé dans les réglages de l’extension: en général, quelques lignes suffisent pour corriger la couleur de fond ou les espacements pour le thème. Si cela ne résout pas le problème, passez du style horizontal au style vertical dans les paramètres du template; parfois, le souci ne concerne qu’un seul des deux modes. En dernier recours, le forum de support de l’extension sur WordPress.org: le développeur répond et aide à résoudre les conflits.

En quoi Tabs Responsive diffère-t-il des onglets d’un constructeur de pages?

L’extension n’est pas liée à un constructeur spécifique. Si vous décidez de changer de constructeur ou de revenir à l’éditeur de blocs natif, les onglets insérés par shortcode continueront de fonctionner. Avec les onglets d’Elementor ou de WPBakery, cette flexibilité n’existe pas: si vous changez de constructeur, les onglets disparaissent avec lui. De plus, Tabs Responsive prend en charge le style vertical, les widgets et les icônes, ce que tous les constructeurs ne proposent pas en version gratuite.

Que choisir selon votre besoin

Si un constructeur de pages est déjà installé, utilisez son module d’onglets. C’est plus rapide: un glisser-déposer, et les onglets sont sur la page.

Si vous n’avez pas de constructeur, utilisez l’extension Tabs Responsive. Elle est gratuite, maintenue à jour et ne vous lie pas à un constructeur particulier. Le shortcode et le widget fonctionnent avec n’importe quel thème et n’importe quel éditeur.

Pour les boutiques WooCommerce, l’extension ajoute un onglet séparé avec la description sur la fiche produit, ce qui n’est pas disponible avec les onglets d’Elementor.

Testez Tabs Responsive sur un site de test: l’installation prend une minute, et vous créerez vos premiers onglets en 5 minutes. Si vous bloquez à une étape, consultez la vidéo ci-dessus ou écrivez en commentaire, nous trouverons la solution ensemble.