Vous souhaitez diviser vos publications en onglets pour enregistrer de l’espace et permettre aux utilisateurs/utilisatrices de trouver plus facilement ce qu’ils recherchent ?
L’ajout de contenus sous forme d’onglets vous aide à ajouter plus d’informations sur vos produits et services. Cela permet également aux utilisateurs/utilisatrices de trouver tous les détails en un seul endroit au lieu d’aller sur une page différente.
Dans cet article, nous allons vous afficher comment ajouter du contenu sous forme d’onglets aux publications et aux pages de WordPress.
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 d’un contenu à onglets à l’aide d’un constructeur de page atterrissage
- Ajout d’un contenu à 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 ne vous reste plus qu’à visiter votre site pour voir la page WordPress à onglets 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 vos onglets.
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 contenu, allez-y et ajoutez un bloc de code court 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 comment choisir le meilleur logiciel de création de sites web.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Ahmed Abo Rwash says
It’s excellent, professional, and valuable. Thank you
WPBeginner Support says
You’re welcome!
Administrateur
Alexander says
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 says
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 says
very simply explain u r no 1 in WordPress
WPBeginner Support says
Glad you like our content
Administrateur
navya says
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 says
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 says
How to stop playing video in tab when switching to another tab if i have video in every tab? Please help me
dany says
thanks bro this helpful
Lena says
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 says
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 says
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 says
Kindly show me how to post content under the different tabs i have put on my blog.
Thanks
WPBeginner Support says
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 says
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 says
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 says
what if i need the tab to display contents in the form of widgets.how can i achieve that
Tony says
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 says
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 says
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 says
if in the content , there are more pages, what should I do?
WPBeginner Staff says
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 says
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 says
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 says
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 says
Is the content in the tabs searchable or does the short code prevent the content from being searched?
WPBeginner Staff says
It will still be searchable.
Knitwit23 says
can you show us a post where this is in use?
KonaGirl says
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 says
It is used inside posts and pages to display content in tabs.
Sally Bennett says
It would be very useful if you explained what ‘tabs’ are to a complete novice
WPBeginner Staff says
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.