L'un de nos lecteurs nous a récemment demandé comment diviser les articles en onglets pour gagner de la place et permettre aux utilisateurs de trouver plus facilement ce qu'ils cherchent.
Chez WPBeginner, nous avons aidé de nombreux propriétaires de sites Web à améliorer l'organisation de leur contenu avec des mises en page à onglets.
L'ajout de contenu sous forme d'onglets vous permet d'intégrer plus d'informations sur vos produits et services sur une seule page, améliorant ainsi l'expérience utilisateur et regroupant tous les détails en un seul endroit pratique. En conséquence, vous réduirez l'encombrement de la page et faciliterez la navigation pour les visiteurs.
Dans cet article, nous vous montrerons comment ajouter du contenu sous forme d'onglets à vos articles et pages WordPress, en veillant à ce que vos visiteurs puissent trouver facilement ce dont ils ont besoin.
Quand utiliser du contenu sous forme d'onglets dans WordPress ?
L'utilisation d'onglets vous permet d'ajouter plus de détails dans un petit espace ou de diviser de gros blocs de contenu pour une meilleure organisation et une meilleure expérience utilisateur.
Disons que vous avez une boutique en ligne. Vous pouvez ajouter des onglets pour les descriptions de produits, les avis, les spécifications techniques, et plus encore. Cette séparation permet de fournir tous les détails à vos clients en un seul endroit et rend la page interactive.
De même, vous pouvez voir du contenu sous forme d'onglets sur les pages de plugins de WordPress.org. La page est divisée en différentes sections à l'aide d'onglets tels que les détails, les avis, l'installation, le support et les informations de développement.
Le contenu sous forme d'onglets aide à retenir les visiteurs sur votre site WordPress. Vous n'avez pas besoin d'envoyer les visiteurs vers une autre page pour obtenir toutes les informations dont ils ont besoin sur vos produits et services.
Cela dit, voyons comment vous pouvez ajouter du contenu sous forme d'onglets aux pages et articles WordPress.
Voici les 2 méthodes que nous utiliserons pour y parvenir :
- Ajouter du contenu sous forme d'onglets à l'aide d'un constructeur de pages de destination
- Ajouter du contenu sous forme d'onglets à l'aide d'un plugin WordPress
Méthode 1 : Ajouter du contenu sous forme d'onglets à l'aide d'un constructeur de pages de destination
La meilleure façon d'ajouter du contenu sous forme d'onglets dans WordPress est d'utiliser SeedProd. C'est le meilleur constructeur de pages de destination et de sites Web WordPress. SeedProd est convivial pour les débutants et est livré avec un constructeur par glisser-déposer, des modèles prédéfinis et plusieurs options de personnalisation.
Pour ce tutoriel, nous utiliserons la licence SeedProd Pro car elle inclut des blocs avancés pour ajouter du contenu sous forme d'onglets. Il existe également une version SeedProd Lite que vous pouvez utiliser gratuitement.
Tout d'abord, vous devrez installer et activer le plugin SeedProd. Si vous avez besoin d'aide, veuillez consulter notre guide sur comment installer un plugin WordPress.
Après l'activation, vous serez redirigé vers l'écran d'accueil de SeedProd dans votre tableau de bord WordPress. Entrez votre clé de licence, que vous trouverez dans votre espace compte SeedProd.
Ensuite, vous pouvez accéder à SeedProd » Pages de destination depuis votre panneau d'administration WordPress.
Après cela, cliquez simplement sur le bouton « Créer une nouvelle page de destination ».
À partir de là, SeedProd vous présentera plusieurs modèles de pages de destination parmi lesquels choisir.
Allez-y et sélectionnez un modèle que vous souhaitez utiliser. Survolez simplement le modèle et cliquez sur l'icône de coche orange.
Une fenêtre contextuelle s'ouvrira maintenant où vous devrez entrer un titre pour votre page dans le champ « Nom de la page » et un slug de permalien sous « URL de la page ».
Après cela, cliquez simplement sur le bouton « Enregistrer et commencer à modifier la page ».
Cela lancera le constructeur par glisser-déposer de SeedProd. Vous pouvez maintenant ajouter différents blocs à votre modèle et modifier les éléments existants.
Pour ajouter du contenu sous forme d'onglets, faites simplement glisser le bloc « Onglets » sous la section Avancé et déposez-le sur le modèle de page.
Ensuite, vous pouvez personnaliser le bloc d'onglets dans SeedProd.
Par exemple, vous pouvez cliquer sur le bouton « Ajouter un nouvel élément » pour ajouter autant d'onglets que vous le souhaitez. De plus, il existe des options pour modifier la taille de la police, l'espacement du texte et l'alignement du contenu dans chaque onglet.
Ensuite, vous pouvez cliquer sur n'importe quel onglet pour le modifier davantage et ajouter des détails.
Par exemple, vous pouvez changer le titre de chaque onglet, ajouter du contenu et changer l'icône de l'onglet.
En outre, SeedProd offre également des options de personnalisation avancées.
Simply click the ‘Advanced’ tab in the menu on your left. Here, you can change the tab layout, typography, color, background color, borders, and more.
When you’ve made changes to the tab block and customized your landing page, don’t forget to click the green ‘Save’ button at the top.
After that, you can head to the ‘Page Settings’ tab.
Next, you can click the ‘Page Status’ toggle and change the status from Draft to Publish.
You can click the ‘Save’ button to store your changes and close the page builder.
Now, simply visit your website to see the tabbed content on the WordPress page in action.
Method 2: Adding Tabbed Content Using a WordPress Plugin
If you don’t want to use a landing page builder, then you can use a dedicated WordPress plugin to add tabbed content to your posts and pages.
First, you’ll need to install and activate the Tabs Responsive plugin. For more details, please see our guide on how to install a WordPress plugin.
Upon activation, you can go to Tabs Responsive » Add New Tabs from your WordPress dashboard and start by entering a name for your tabs.
Next, you can scroll down to add as many tabs as you want by clicking the red ‘Add New Tabs’ button.
Plus, you can edit each tab individually by changing its title, adding a description, using a different tab icon, and editing the icon location.
Besides that, the plugin also offers different ‘Tabs Settings’ in the menu on your right.
Par exemple, vous pouvez choisir d'afficher le titre des onglets, sélectionner différentes options pour le titre et l'icône, modifier la position de l'icône, afficher la bordure des onglets, sélectionner la couleur du texte, et plus encore.
Une fois les modifications apportées, vous pouvez maintenant utiliser les onglets dans n'importe quel article de blog ou page en utilisant le shortcode généré par le plugin.
Cliquez simplement sur le bouton « Publier ».
Ensuite, vous pouvez ajouter les onglets sur n'importe quelle page ou article en utilisant le shortcode [TABS_R id=130]. Assurez-vous simplement de remplacer le numéro d'ID dans le shortcode par votre numéro d'ID d'onglet.
Vous pouvez facilement trouver l'ID de l'onglet et le shortcode en allant dans Onglets Responsive » Tous les onglets et en copiant le code sous la colonne Shortcode des onglets.
Ensuite, il vous suffit d'ajouter un nouvel article ou de modifier un article existant.
Lorsque vous êtes dans l'éditeur de blocs Gutenberg, allez-y et ajoutez un bloc de shortcode pour entrer le shortcode.
Après cela, vous pouvez prévisualiser votre article de blog ou votre page. Si tout est correct, vous pouvez cliquer sur le bouton « Publier » ou « Mettre à jour » pour enregistrer les onglets dans votre article.
Maintenant, visitez votre site web pour voir le contenu sous forme d'onglets en action.
Nous espérons que cet article vous a aidé à apprendre comment ajouter du contenu à onglets à vos articles et pages WordPress. Vous pouvez également consulter notre guide sur WooCommerce simplifié et notre liste d'experts des meilleurs plugins WordPress pour les sites Web d'entreprise.
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Jiří Vaněk
Cela semble être une excellente option pour mieux personnaliser les articles d'avis sur les produits. Les utilisateurs pourraient facilement basculer entre la note du produit (avis), les informations détaillées sur le produit ou un onglet leur proposant des endroits où l'acheter. En tant que plugin d'avis, cette solution semble vraiment excellente, et merci pour cette excellente astuce.
Ahmed Abo Rwash
C'est excellent, professionnel et précieux. Merci
Support WPBeginner
De rien !
Admin
Alexander
Bonjour, j'ai besoin d'afficher des articles sous forme d'onglets, j'ai besoin que le titre de l'article soit l'étiquette de l'onglet et le contenu de l'article soit le contenu de l'onglet, des recommandations sur la façon de le faire ?
Support WPBeginner
Pour ce que vous semblez vouloir, vous devriez consulter certaines des options de notre guide ci-dessous :
https://www.wpbeginner.com/wp-tutorials/how-to-display-recent-posts-in-wordpress
Admin
msiddiqui
expliquer très simplement que vous êtes le n°1 dans WordPress
Support WPBeginner
Glad you like our content
Admin
navya
Je suis débutant en wp. Quelqu'un peut-il m'aider à résoudre mon problème ?
Sur mon site, il y a une partie de notre histoire comme l'histoire, par exemple. si je clique sur l'onglet 2018, je veux obtenir la description correspondante sur 2018. Comment faire cela dans wp. Merci d'avance.
Dan Acton
J'adore ça, ce n'est pas la fin du monde si cette option n'est pas disponible, j'aimerais juste pouvoir modifier un ensemble d'onglets existants en utilisant la même interface que celle dans laquelle je les ai créés. Est-ce possible au lieu d'avoir à coller du nouveau contenu entre les shortcodes ?
Andi Sutrisnya
Comment arrêter la lecture d'une vidéo dans un onglet lorsque je passe à un autre onglet si j'ai une vidéo dans chaque onglet ? S'il vous plaît, aidez-moi
dany
merci mec c'est utile
Lena
Est-il possible d'avoir juste un bouton sur l'éditeur d'utilisateurs qui crée automatiquement un nouvel onglet où il/elle peut écrire son contenu ?
Je prévois une plateforme de partage de contenu…
David
Bonjour,
Je cherche des onglets verticaux qui ont la possibilité d'ajouter un lien pour chaque onglet afin que chaque onglet ait une adresse.
Pouvez-vous suggérer un plugin d'onglets qui a cette option ou un tutoriel qui explique comment ajouter cette fonctionnalité.
Merci pour toute aide.
David
Soni
Ceci est un article utile.
Je voudrais en savoir plus sur le contenu à onglets sur la page d'accueil de wpbeginner. Ce plugin peut-il créer le même contenu à onglets ?
Ou utilisez-vous un autre plugin pour créer ce contenu à onglets ?
Je pense que cet onglet est génial.
Ssekito
Montrez-moi gentiment comment publier du contenu sous les différents onglets que j'ai mis sur mon blog.
Merci
Support WPBeginner
Votre blog est hébergé sur WordPress.com. Veuillez consulter notre guide sur la différence entre WordPress.org auto-hébergé et les blogs WordPress.com gratuits.
Admin
Ssekito
Merci pour votre réponse !
Je suis en fait un débutant sur le blog WordPress et je veux d'abord me familiariser avec pour pouvoir passer à WordPress.org avec Bluehost comme hébergeur.
Je veux monétiser mon blog car je fais du marketing d'affiliation ! Je veux actuellement ajouter du contenu juste en dessous de chaque page que j'ai créée sur la barre de menu et quelques boutons de partage social, bien que je trouve cela difficile !
S'il vous plaît, guidez-moi là-dessus.
Merci.
Sase Antic
Informations utiles sur les onglets dans WordPress !
Cependant, existe-t-il une solution dans ce plugin ou tout autre plugin WP pour ajouter des onglets à l'ensemble du site (sur tout le site) et pas seulement dans les articles et les pages ?
Par exemple : J'ai besoin d'un "groupe d'onglets" composé de 3 onglets, et j'aimerais l'ajouter sur tout le site (le même contenu / les mêmes onglets sur toutes les pages et publications ; comme un menu / sous-menu mais avec la fonctionnalité d'onglets).
Est-ce possible ?
Sinon, cela représente beaucoup de travail d'ajouter le même « groupe d'onglets » à toutes les pages et tous les articles un par un.
Merci d'avance pour votre réponse !
uvie
et si j'ai besoin que l'onglet affiche du contenu sous forme de widgets. comment puis-je y parvenir ?
Tony
Cela ressemble à un excellent plugin d'onglets – mais, ce serait encore mieux si je pouvais l'ajouter aussi aux pages et pas seulement aux articles. J'ai cherché partout, mais il n'apparaît pas dans l'éditeur des pages – y a-t-il une chance pour cela ?
Sameer
Bonjour,
Est-il possible de créer des tableaux à l'intérieur d'onglets dans les pages de blog WordPress. S'il vous plaît, regardez cette page : , Aidez-moi s'il vous plaît à créer quelque chose comme ceci dans WP.
Support WPBeginner
Oui, c'est possible. Vous devrez générer le code HTML requis pour le tableau dans la zone de contenu de chaque onglet.
Admin
Weiwei
si dans le contenu, il y a plus de pages, que dois-je faire ?
L'équipe de WPBeginner
Si vous ne parvenez pas à comprendre pourquoi vous en auriez besoin, alors cela signifie que vous n'en avez pas vraiment besoin sur votre site web. Nous écrivons sur beaucoup de choses intéressantes que les utilisateurs peuvent ajouter à leur site web. Si les utilisateurs trouvent quelque chose d'utile, alors ils peuvent l'ajouter à leur site.
Shah
Je suis tout nouveau dans la création d'un site web. Je pense qu'en étant si avancé, votre supposition quant à la facilité avec laquelle quelqu'un comme moi peut comprendre et suivre vos instructions est très exagérée. Je ne comprends toujours pas à quoi servent les onglets. Je sais que vous l'avez expliqué, et même montré où nous pouvons les voir en action, mais je ne comprends toujours pas pourquoi j'ai besoin d'onglets. Ce serait formidable si vous étiez plus délibéré en nous donnant, à nous les gens plus lents, plus d'exemples. Merci !
Heather Lewis
C'est un article utile. J'utiliserai ce plugin chaque fois que ce sera nécessaire. Je pense que c'est bien mieux comparé à celui que j'utilise en termes de design. Merci de partager.
vinayak
salut et merci d'avoir fourni un article où je pouvais ajouter du contenu à onglets sur mon blog.
je cherchais un plugin qui pourrait faire ça.
Amjaru
Le contenu des onglets est-il consultable ou le shortcode empêche-t-il la recherche du contenu ?
L'équipe de WPBeginner
Il sera toujours consultable.
Knitwit23
Pouvez-vous nous montrer un article où cela est utilisé ?
KonaGirl
Ce plugin créera-t-il une hiérarchie de menu en onglets ? Si oui, dois-je supprimer les onglets du menu avant d'ajouter ce plugin ?
L'équipe de WPBeginner
Il est utilisé à l'intérieur des articles et des pages pour afficher le contenu sous forme d'onglets.
Sally Bennett
Ce serait très utile si vous expliquiez ce que sont les « onglets » à un novice complet
L'équipe de WPBeginner
Les onglets sont comme les onglets d'un classeur ou d'un répertoire téléphonique. Ils permettent aux utilisateurs de parcourir différentes sections en cliquant sur le titre de l'onglet. Vous pouvez les voir en action ici.