L’un de nos lecteurs nous a récemment demandé comment séparer les publications en onglets pour enregistrer l’espace et permettre aux utilisateurs/utilisatrices de trouver plus facilement ce qu’ils/elles recherchent.
Chez WPBeginner, nous avons aidé de nombreux propriétaires de sites à améliorer l’organisation de leur contenu avec des mises en page à onglets.
L’ajout d’onglets vous permet de rassembler plus d’informations sur vos produits et services en une seule page, ce qui améliore le compte de l’utilisateur et permet de conserver tous les détails en un seul endroit pratique. Vous réduirez ainsi l’encombrement de la page et faciliterez la navigation des internautes.
Dans cet article, nous allons vous afficher comment ajouter du contenu sous forme d’onglets à vos publications et pages WordPress, afin que vos internautes puissent trouver facilement ce dont ils ont besoin.
Quand utiliser les onglets dans WordPress ?
L’utilisation d’onglets vous permet d’ajouter plus de détails dans un espace réduit ou de diviser de gros morceaux de contenu pour une meilleure organisation et un meilleur compte rendu.
Imaginons que vous ayez un magasin en ligne. Vous pouvez ajouter des onglets pour les descriptions de produits, les avis, les spécifications techniques, et plus encore. Cette séparation aide à fournir tous les détails à vos clients/clientes en un seul endroit et rend la page interactive.
De la même manière, vous pouvez voir un contenu à onglets sur les pages des extensions de WordPress.org. La page est divisée en différentes sections à l’aide d’onglets tels que détails, avis, installation, support et informations sur le développement.
Le contenu des onglets permet aux internautes de rester sur votre site WordPress. Vous n’avez pas besoin d’envoyer les gens sur une autre page pour obtenir tous les détails 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 aux publications de WordPress.
Voici les deux méthodes que nous utiliserons pour y parvenir :
- Ajout de contenu sous forme d’onglets à l’aide d’un constructeur de page d’atterrissage
- Ajout de contenu sous forme d’onglets à l’aide d’une extension WordPress
Méthode 1 : Ajout d’un contenu sous forme d’onglets à l’aide d’un constructeur de page d’atterrissage
La meilleure façon d’ajouter un contenu tabulé dans WordPress est d’utiliser un SeedProd. C’est le meilleur constructeur de page d’atterrissage et de site WordPress. SeedProd est convivial pour les débutants et est livré avec un constructeur drag-and-drop, des modèles prédéfinis et de multiples 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 l’extension SeedProd. Si vous avez besoin d’aide, veuillez consulter notre guide sur l ‘installation d’une extension WordPress.
Lors de l’activation, vous serez redirigé vers l’écran de bienvenue de SeedProd dans votre Tableau de bord WordPress. Saisissez/saisissez votre clé de licence, que vous trouverez dans votre espace de compte SeedProd.
Ensuite, vous pouvez vous rendre dans SeedProd » Pages d’atterrissage à partir de votre panneau d’administration WordPress.
Après cela, il suffit de cliquer sur le bouton » Créer une nouvelle page d’atterrissage « .
A partir de là, SeedProd vous affichera plusieurs modèles de pages d’atterrissage parmi lesquels vous pourrez choisir.
Sélectionnez le Modèle que vous souhaitez utiliser. Survolez le modèle et cliquez sur l’icône orange de la coche.
Une fenêtre surgissante s’ouvre alors, dans laquelle vous devez saisir un titre pour votre page dans le champ « Nom de la page » et un slug permalien dans le champ « URL de la page ».
Ensuite, il suffit de cliquer sur le bouton « Enregistrer et commencer à modifier la page ».
Cela lancera le Constructeur SeedProd par glisser-déposer. Vous pouvez maintenant ajouter différents blocs à votre Modèle et modifier les éléments existants.
Pour ajouter du contenu sous forme d’onglets, il suffit de faire glisser le bloc « Onglets » sous la section Avancé et de le déposer 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 article » pour ajouter autant d’onglets que vous le souhaitez. De plus, des options permettent de modifier la taille de la police, l’espace entre les textes et l’alignement du contenu de chaque onglet.
Ensuite, vous pouvez cliquer sur n’importe quel onglet pour le modifier davantage et ajouter des modifications.
Par exemple, vous pouvez modifier le titre de chaque onglet, ajouter du contenu et changer l’icône de l’onglet.
En outre, SeedProd offre des options de personnalisation avancées.
Il vous suffit de cliquer sur l’onglet « Avancé » dans le menu de gauche. Ici, vous pouvez modifier la mise en page de l’onglet, la typographie, la couleur, la couleur d’arrière-plan, les bordures, et plus encore.
Lorsque vous avez apporté des modifications au bloc d’onglets et personnalisé votre page d’atterrissage, n’oubliez pas de cliquer sur le bouton vert » Enregistrer » en haut.
Ensuite, vous pouvez vous rendre dans l’onglet » Réglages de la page « .
Ensuite, vous pouvez cliquer sur le permutateur « État de la page » et modifier l’état de Brouillon à Publier.
Vous pouvez cliquer sur le bouton « Enregistrer » pour stocker vos modifications et fermer le constructeur de page.
Il vous suffit à présent de visiter votre site pour voir le contenu à onglets de la page WordPress en action.
Méthode 2 : Ajout de contenu sous forme d’onglets à l’aide d’une extension WordPress
Si vous ne souhaitez pas utiliser un constructeur de page d’atterrissage, vous pouvez alors utiliser une extension WordPress dédiée pour ajouter du contenu sous forme d’onglets à vos publications et à vos pages.
Tout d’abord, vous devrez installer et activer l’extension Tabs Responsive. Pour plus de détails, veuillez consulter notre guide sur l’installation d’une extension WordPress.
Une fois activé, vous pouvez vous rendre sur Tabs Responsive » Ajouter de nouveaux onglets depuis votre Tableau de bord WordPress et commencer par saisir un nom pour vos onglets.
Ensuite, vous pouvez défiler vers le bas pour ajouter autant d’onglets que vous le souhaitez en cliquant sur le bouton rouge « Ajouter de nouveaux onglets ».
Ajouté à cela, vous pouvez modifier chaque onglet individuellement en changeant son titre, en ajoutant une description, en utilisant une icône d’onglet différente et en modifiant l’emplacement de l’icône.
En outre, l’extension propose également différents » Réglages des onglets » dans le menu de droite.
Par exemple, vous pouvez choisir d’afficher ou non 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, etc.
Une fois les modifications effectuées, vous pouvez désormais utiliser les onglets dans n’importe quelle publication ou page de votre blog à l’aide du code court généré par l’extension.
Il suffit de cliquer sur le bouton « Publier ».
Ensuite, vous pouvez ajouter les onglets sur n’importe quelle page ou publication en utilisant le code court [TABS_R id=130]. Confirmez simplement que vous remplacez le numéro ID dans le code court par le numéro ID de votre onglet.
Vous pouvez facilement trouver l’ID de l’onglet et le code court en allant dans Onglets Responsive » Tous les onglets et en copiant le code sous la colonne Tabs Shortcode.
Ensuite, il vous suffit d’ajouter une nouvelle publication ou de modifier une publication existante.
Lorsque vous êtes dans l’éditeur de blocs de Gutenberg, allez-y et ajoutez un bloc de short code pour saisir le code court.
Vous pouvez ensuite prévisualiser votre publication ou votre page de blog. Si tout est en ordre, vous pouvez cliquer sur le bouton « Publier » ou « Mettre à jour » pour enregistrer les onglets dans votre publication.
Visitez maintenant votre site pour voir le contenu à onglets en action.
Nous espérons que cet article vous a aidé à apprendre comment ajouter du contenu sous forme d’onglets aux publications et pages WordPress. Vous pouvez également consulter notre guide sur WooCommerce rendu simple et notre liste d’experts des meilleures extensions WordPress pour les sites professionnels.
Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
Ahmed Abo Rwash
It’s excellent, professional, and valuable. Thank you
WPBeginner Support
You’re welcome!
Administrateur
Alexander
Hi, I need to display posts as tabs, I need the post title to be the tab label and the post content to be the tab content, any recommendations on how to do it?
WPBeginner Support
For what it sounds like you’re wanting, you would want to go through some of the options from our guide below:
https://www.wpbeginner.com/wp-tutorials/how-to-display-recent-posts-in-wordpress
Administrateur
msiddiqui
very simply explain u r no 1 in WordPress
WPBeginner Support
Glad you like our content
Administrateur
navya
I am beginner in wp.Can anyone help me to solve my problem?
in my site there is part of ou story as like history,fo eg. if click on 2018 tab i wanto get the corresponding description about 2018.How to do this in wp.Thank you in advance
Dan Acton
I love this, Not the end of the world if this option is not available, just would like to be able to edit a current set of tabs using the same interface in which I created them. Is this possible instead of having to paste new content in between the shortcodes?
Andi Sutrisnya
How to stop playing video in tab when switching to another tab if i have video in every tab? Please help me
dany
thanks bro this helpful
Lena
Is it possible to have just a button on the users editor which automatically creates a new tab where he/she can write her content in?
I’m planning a Content sharing platform …
David
Hi,
I’m looking for vertical tabs that have the option of adding a link for each tab so that each tab has an address.
Can you suggest a tab plugin that has this option or a tutorial that explains how to add this functionality.
Thanks for any help
David
Soni
This is a helpful article.
I would like to know about the tabbed content in wpbeginner homepage. Could this plugin create the same tabbed content?
Or you use another plugin to create that tabbed content?
I think that tab is great.
Ssekito
Kindly show me how to post content under the different tabs i have put on my blog.
Thanks
WPBeginner Support
Your blog is hosted on WordPress.com. Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.
Administrateur
Ssekito
Thanks for the reply!
I am actually a beginner of wordpress blog and i want to first get familiar with it so that i upgrade to wordpress.org with bluehost as my host.
I want to monetize my blog as i am into affiliate marketing! I currently want to add content just below each pages i created on the menu bar and some social share buttons though am finding it challenging!
Please guide me this.
Thanks.
Sase Antic
Helpful info on tabs in WordPress!
However, is there a solution in this plugin or any other WP plugin to add tabs at the whole site (site-wide) and not just in posts and pages?
For example: I need one « tabs group » consisted of 3 tabs, and I like to add it sitewide (the same content / tabs at all pages and posts; like menu / submenu but with tabs functionality).
Is this possible?
Otherwise, it’s a lot of work to add the same « tabs group » to all pages and posts one by one.
Thanks in advance for the reply!
uvie
what if i need the tab to display contents in the form of widgets.how can i achieve that
Tony
This looks like a great tabs plugin – but, it would be even greater if I can added also to Pages not just posts. I looked all over, but does not appear in editor of Pages – any chance of that?
Sameer
Hello,
Is it possible to create tables inside tabs in wordpress blog pages. Please see this page: , Please help me to create something like this one in wp.
WPBeginner Support
Yes, it is possible. You will need to generate the HTML code required for the table in the content area of each tab.
Administrateur
Weiwei
if in the content , there are more pages, what should I do?
WPBeginner Staff
If you cannot figure out why you would need them, then this means that you don’t really need them on your website. We write about a lot of cool things that users can add to their websites. If users find something useful, then they can add it to their site.
Shah
I’m very new to building a website. I think being so far advanced, your assumption of how well someone like me can understand and follow your instructions, is highly exaggerated. I still don’t understand what tabs are for. I know you explained it, and even showed us where we can see them in action, but I still don’t understand why I need to have tabs. It would be great if you were more deliberate in giving us, slower people, more examples. Thanks!
Heather Lewis
This is a helpful article. I will use this plugin whenever it’s necessary. I think this is much better compared with the one I am using in terms of design. Thank you for sharing.
vinayak
hi and thanks for providing a post where i could add tabbed content in my blog.
i was looking for a plugin that could do this.
Amjaru
Is the content in the tabs searchable or does the short code prevent the content from being searched?
WPBeginner Staff
It will still be searchable.
Knitwit23
can you show us a post where this is in use?
KonaGirl
Will this plugin make a tabbed menu hierarchy? If it does, then do I remove the menu tabs prior to adding this plugin?
WPBeginner Staff
It is used inside posts and pages to display content in tabs.
Sally Bennett
It would be very useful if you explained what ‘tabs’ are to a complete novice
WPBeginner Staff
Tabs are like tabs in a folder or a telephone index book. Allowing users to browse different sections by clicking on the tab title. You can see them in action here.