TL;DR : Comment créer des onglets dans WordPress
Il existe 3 façons d’ajouter du contenu à onglets à n’importe quelle page WordPress, sans avoir besoin de coder.
- Installer SeedProd – Téléchargez et activez SeedProd (un plan payant est requis pour le bloc Onglets), puis saisissez votre clé de licence
- Ajouter des onglets avec SeedProd – Ouvrez n’importe quelle page avec « Modifier avec SeedProd », faites glisser le bloc Onglets, configurez votre contenu et enregistrez
- Utiliser l’éditeur de blocs – Installez Ultimate Blocks (gratuit), ouvrez n’importe quel article ou page, et ajoutez le bloc Onglets depuis l’insert de blocs
- Utiliser un plugin gratuit – Installez Tabs Responsive, créez un ensemble d’onglets, copiez le shortcode et collez-le dans n’importe quel article ou page
- Choisir votre méthode – SeedProd vous donne un contrôle visuel complet ; l’éditeur de blocs et Tabs Responsive fonctionnent avec n’importe quel thème existant
Ajouter des onglets à une page WordPress semble simple, mais la plupart des tutoriels supposent que vous êtes un développeur ou que vous souhaitez installer trois plugins juste pour commencer.
La plupart des guides vous guident dans la création d’un thème personnalisé complet à partir de zéro. Ils omettent entièrement l’option de l’éditeur de blocs, ou ils ne couvrent qu’un seul plugin.
SeedProd est ma méthode de prédilection pour le contenu à onglets, mais dans ce guide, je vous montrerai également l’approche de l’éditeur de blocs et une option de plugin gratuit. Aucun codage requis.
Que sont les onglets WordPress et pourquoi sont-ils utiles ?
Les onglets WordPress sont des panneaux de contenu cliquables qui organisent le contenu de la page en sections entre lesquelles les visiteurs peuvent basculer sans faire défiler.
Les onglets sont un type de système de navigation qui organise le contenu, facilitant ainsi la navigation des visiteurs sur votre site web. Vous pouvez ajouter des onglets aux articles et aux pages ou utiliser un widget d'onglets pour afficher du contenu tabulé dans la barre latérale et les zones de widgets de votre WordPress.
Pourquoi avez-vous besoin de contenu tabulé dans WordPress ?
En plus de trier le contenu, les onglets permettent de maintenir vos visiteurs actifs et engagés beaucoup plus facilement. Comme les onglets regroupent les sujets de contenu sur une seule page, les utilisateurs n'auront pas besoin de cliquer sur d'autres pages, ce qui est idéal pour les courtes durées d'attention.
Par exemple, WordPress.org utilise des onglets sur sa page de plugins pour afficher des informations telles que les détails, les avis, le support et le développement.
Façons populaires d'utiliser les onglets dans WordPress :
- Spécifications et avis sur les produits des pages WooCommerce
- Coordonnées réparties par département ou par lieu
- Filtres de blog (populaires, récents, catégories)
- Sections FAQ avec des catégories tabulées séparées
- Niveaux de prix ou forfaits de services
Les pages de produits WooCommerce sont l’un des endroits les plus courants pour utiliser des onglets. Un onglet dédié aux spécifications, un pour les avis et un pour l’expédition permet de garder les pages de produits propres sans masquer les détails dont les acheteurs ont besoin. Les plugins d’onglets WooCommerce dédiés peuvent vous donner encore plus de contrôle sur l’apparence et le comportement des onglets de la page produit.
Astuce de pro : Les onglets ne doivent pas être confondus avec les accordéons. Les utilisateurs cliquent sur les onglets pour changer d'information, tandis que les accordéons se déplient pour révéler l'information.
Comment créer des onglets avec SeedProd ?
Pour cette méthode, nous utiliserons SeedProd, le meilleur constructeur de sites Web WordPress, pour ajouter du contenu à onglets à votre site Web.
SeedProd est un constructeur de sites Web par glisser-déposer qui vous permet de créer des mises en page WordPress flexibles sans écrire de code. Avec ses kits de sites Web professionnels, ses modèles de pages de destination et son éditeur visuel en direct, vous pouvez personnaliser chaque partie de votre site et voir les modifications en temps réel.
SeedProd comprend également des blocs hautement personnalisables, y compris le bloc Onglets que nous utiliserons dans ce guide.
Suivez les étapes ci-dessous pour créer des onglets dans WordPress avec SeedProd.
Étape 1. Installer le constructeur de site SeedProd
Tout d’abord, rendez-vous sur la page des tarifs de SeedProd et choisissez un plan qui inclut le bloc Onglets. Le bloc Onglets est disponible sur les plans payants ; visitez la page des tarifs pour comparer les options et trouver celle qui convient à votre budget.
Une fois que vous avez téléchargé le plugin, vous devrez l'installer et l'activer sur votre site WordPress. Vous pouvez suivre ces instructions sur l'installation d'un plugin WordPress si vous ne l'avez jamais fait auparavant.
Après avoir activé le plugin, accédez à SeedProd » Paramètres et entrez votre clé de licence de plugin.
Vous pouvez trouver votre clé de licence SeedProd dans votre tableau de bord de compte sous la section Téléchargements.
N'oubliez pas de cliquer sur le bouton Vérifier la clé avant de passer à l'étape suivante.
Étape 2. Ouvrez votre page avec SeedProd
Après avoir installé SeedProd, vous pouvez ouvrir n’importe quelle page WordPress existante dans l’éditeur visuel. Accédez à Pages » Toutes les pages depuis votre administration WordPress et trouvez la page à laquelle vous souhaitez ajouter des onglets.
Cliquez sur le lien Modifier avec SeedProd pour ouvrir la page dans l’éditeur visuel.
Dans cet exemple, nous ajouterons des onglets à la page À propos pour afficher plus de détails tels que les offres d'emploi et les directives éditoriales. Vous pouvez choisir n'importe quelle page qui a du sens pour votre site.
Étape 3. Ajouter des onglets à vos pages WordPress
Une fois votre page ouverte dans l'éditeur visuel, vous pouvez cliquer sur n'importe quel élément pour modifier son contenu, ses couleurs, son style et sa visibilité.
Il est également facile d'ajouter d'autres éléments à votre page en les faisant glisser depuis le panneau des blocs et en les déposant à l'endroit souhaité.
Tout d'abord, ajoutez une nouvelle section à la page pour y placer votre contenu à onglets. Dans notre cas, nous allons dupliquer l'une des sections existantes et la faire glisser en bas de la page.
Après cela, remplacez l'image par quelque chose de plus pertinent et supprimez tout contenu dont vous n'avez plus besoin en cliquant sur l'icône de la corbeille.
Vous pouvez maintenant rechercher le bloc Onglets dans le panneau de gauche et le faire glisser dans la nouvelle section de votre page.
Cliquer sur le bloc affiche ses paramètres de contenu où vous pouvez :
- Ajouter plusieurs onglets
- Afficher ou masquer l'icône de l'onglet
- Changer la taille de la police
- Augmenter ou diminuer l'espace entre les onglets
- Ajuster l'alignement des onglets
L'expansion de chaque onglet vous permet d'ajouter un titre d'onglet et de rédiger votre contenu à l'aide d'un éditeur classique avec des paramètres « ce que vous voyez est ce que vous obtenez » (WYSIWYG).
Vous pouvez également activer une icône personnalisée pour ajouter plus d'intérêt à vos onglets et les faire ressortir. Réglez le bouton « Masquer l'icône de l'onglet » sur « Désactivé » et choisissez une icône personnalisée dans la bibliothèque Font Awesome.
Cliquer sur l'onglet Avancé vous permet de choisir plus d'options de personnalisation, y compris les couleurs d'arrière-plan personnalisées, les polices, les bordures, l'espacement, et plus encore.
Vous pouvez également afficher des onglets verticaux ou un ensemble d'onglets horizontaux en cliquant sur l'une ou l'autre option de mise en page.
N'oubliez pas de cliquer sur le bouton Enregistrer dans le coin supérieur droit de l'écran pour sauvegarder vos modifications.
Suivez les mêmes étapes pour ajouter des onglets à toute autre page de votre site WordPress, puis passez à l'étape suivante pour rendre vos modifications publiques.
Étape 4. Publier votre contenu sous forme d'onglets
Après avoir ajouté des onglets à vos différentes pages WordPress, vous êtes prêt à les publier pour que vos visiteurs puissent les voir.
Pour ce faire, accédez à la page SeedProd » Theme Builder et activez le bouton « Activer le thème SeedProd ».
Vous pouvez maintenant prévisualiser vos pages et voir votre contenu sous forme d'onglets en action.
Comment ajouter des onglets dans l’éditeur de blocs WordPress ?
Si vous utilisez un thème WordPress standard et que vous n'avez pas besoin d'un éditeur visuel complet, vous pouvez ajouter un bloc d'onglets WordPress directement dans l'éditeur de blocs à l'aide d'un plugin gratuit.
J'ai testé plusieurs plugins d'onglets pour l'éditeur de blocs, et Ultimate Blocks est une option gratuite fiable avec un bloc d'onglets dédié qui fonctionne avec n'importe quel thème.
Voici comment ajouter des onglets à une page WordPress à l'aide de l'éditeur de blocs :
- Accédez à Plugins » Ajouter, recherchez « Ultimate Blocks », puis cliquez sur Installer maintenant, puis sur Activer.
- Ouvrez n'importe quel article ou page dans l'éditeur de blocs WordPress.
- Cliquez sur l'icône + pour ouvrir l'outil d'insertion de blocs et recherchez « Onglets ».
- Sélectionnez le bloc Onglets de la section Ultimate Blocks et ajoutez-le à votre contenu.
- Cliquez sur chaque étiquette d'onglet pour la renommer, puis ajoutez votre contenu dans le panneau d'onglet ci-dessous.
- Utilisez la barre latérale des paramètres du bloc à droite pour ajuster les couleurs, le style des onglets et l'alignement.
- Cliquez sur Mettre à jour ou Publier lorsque vous êtes satisfait de vos onglets.
Cette méthode fonctionne sans modifier votre thème WordPress existant ni installer un constructeur de pages séparé.
Puis-je ajouter des onglets dans WordPress gratuitement ?
Oui, plusieurs plugins d'onglets WordPress gratuits peuvent ajouter du contenu à onglets sans constructeur de pages.
Tabs Responsive fonctionne avec n'importe quel thème via un shortcode et c'est ce que nous allons expliquer ci-dessous. Ultimate Blocks (couvert dans la méthode de l'éditeur de blocs ci-dessus) est mieux adapté si vous utilisez déjà Gutenberg. WP Tabs est une autre option solide avec une interface basée sur des blocs et plusieurs styles de mise en page.
La méthode suivante est une bonne alternative si vous ne souhaitez pas modifier votre thème WordPress ou créer une page de destination. Nous utiliserons le plugin gratuit Tabs Responsive WordPress pour ajouter des onglets réactifs à votre site WordPress.
Tout d'abord, vous devrez installer le plugin Tabs Responsive et l'activer depuis votre administration WordPress.
Ensuite, accédez à Tabs Responsive » Ajouter de nouveaux onglets et donnez un titre à votre ensemble d'onglets.
À partir de là, vous pouvez sélectionner le modèle par défaut, ou si vous utilisez la version Pro, vous pouvez choisir parmi plus de 18 styles de modèles.
L'étape suivante consiste à ajouter vos onglets. Vous pouvez créer autant d'onglets que vous le souhaitez et inclure :
- Titres des onglets
- Descriptions des onglets
- Icônes des onglets
Vous pouvez également modifier le style de chaque onglet dans la barre latérale droite en choisissant des styles d'onglets personnalisés, des couleurs d'arrière-plan, des couleurs de police, et plus encore.
Lorsque vous êtes satisfait de vos onglets, copiez le shortcode des onglets et collez-le n'importe où dans votre thème WordPress.
Par exemple, vous pouvez coller le shortcode dans un article ou une page WordPress comme ceci :
Voici à quoi cela ressemblera sur le front-end de votre site :
Vous pouvez également ajouter le shortcode des onglets à une zone prête pour les widgets, telle que la barre latérale de votre WordPress ou les widgets de pied de page, en collant le shortcode dans un bloc de paragraphe.
Ensuite, vous verrez votre contenu sous forme d'onglets en direct dans vos zones de barre latérale :
Comment créer des onglets dans WordPress FAQ
Comment créer des onglets dans WordPress sans plugin ?
Vous pouvez créer des onglets sans plugin en utilisant du code HTML, CSS et JavaScript personnalisé, mais cette approche nécessite des connaissances en développement. La plupart des débutants préféreront utiliser un plugin d'onglets WordPress gratuit comme Ultimate Blocks ou Tabs Responsive, qui s'occupent de tout le code pour vous. Si vous utilisez l'éditeur visuel de SeedProd, le bloc Onglets par glisser-déposer est l'option la plus simple sans code pour ajouter du contenu à onglets à une page WordPress.
Comment ajouter des onglets dans l'éditeur de blocs WordPress ?
Pour ajouter des onglets dans l'éditeur de blocs, installez un plugin qui ajoute un bloc Onglets à Gutenberg, tel que Ultimate Blocks (gratuit). Une fois activé, ouvrez n'importe quel article ou page, cliquez sur l'outil d'insertion de blocs +, recherchez « Onglets », et ajoutez le bloc d'onglets WordPress à votre contenu. Vous pourrez ensuite renommer chaque onglet, ajouter du contenu aux panneaux d'onglets et personnaliser les couleurs et l'alignement dans la barre latérale des paramètres du bloc.
Quelle est la différence entre les onglets et les accordéons dans WordPress ?
Les onglets WordPress affichent plusieurs panneaux de contenu côte à côte, et cliquer sur un onglet change le panneau visible. Les accordéons s'empilent verticalement et se développent pour révéler le contenu lorsqu'on clique dessus. Les onglets fonctionnent mieux lorsque vous souhaitez que toutes les options soient visibles en même temps et que le contenu est de longueur similaire ; les accordéons sont meilleurs pour le contenu plus long comme les FAQ où la plupart des visiteurs ne lisent qu'une seule section.
Si vous souhaitez un contrôle total sur la conception de votre contenu à onglets, SeedProd est l'option la plus rapide avec un aperçu visuel en direct. La méthode de l'éditeur de blocs convient si vous souhaitez conserver votre thème actuel et préférez une approche Gutenberg native. Le plugin Tabs Responsive fonctionne avec n'importe quelle configuration WordPress et ne nécessite rien de plus qu'un plugin de shortcode gratuit.
Vous pouvez ajouter du contenu à onglets à votre site WordPress en quelques clics, sans code. SeedProd rend le processus rapide et convivial pour les débutants si vous utilisez déjà SeedProd pour créer votre site.
Prêt à ajouter des onglets à votre site WordPress ?
Vous pourriez également aimer ces autres guides WordPress utiles pendant que vous êtes ici :
- Comment créer des animations de texte dans WordPress (étapes faciles)
- Comment créer des séparateurs de section fantaisie pour les sites Web WordPress
- Comment ajouter une boîte d'auteur dans WordPress (sans plugin)
- Comment ajouter une barre latérale différente pour différentes pages dans WordPress
Merci de votre lecture ! Nous serions ravis d'entendre vos réflexions, alors n'hésitez pas à rejoindre la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.
