Comment créer des onglets dans WordPress pour un superbe contenu à onglets

Vous voulez apprendre à créer des onglets dans WordPress ?

L'ajout d'onglets à votre site Web WordPress est un excellent moyen d'organiser différents types de contenu et d'économiser de l'espace sur les publications et les pages.

Dans cet article, nous allons vous montrer comment ajouter des onglets dans WordPress étape par étape.

Pourquoi avez-vous besoin de contenu WordPress à onglets ?

En plus de trier le contenu, les onglets facilitent beaucoup le maintien des visiteurs de votre site Web actifs et engagés. Étant donné que les onglets regroupent les sujets de contenu sur une seule page, les utilisateurs n'auront pas besoin de cliquer pour accéder à d'autres pages, ce qui est idéal pour les durées d'attention plus courtes.

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.

Voici d'autres façons d'utiliser les onglets :

• Dans les descriptions de produits pour montrer différentes spécifications de produits
• Dans la barre latérale de votre blog pour filtrer les catégories
• Sur les pages de contact pour trier les informations de contact

Conseil 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éveloppent pour révéler des informations.

Maintenant que vous en savez plus sur le fonctionnement des onglets et pourquoi vous en avez besoin, voyons comment ajouter des onglets à votre site WordPress.

Ci-dessous, nous partagerons 2 façons d'ajouter des onglets à WordPress. Nous allons d'abord utiliser un constructeur de page, puis vous montrer comment créer des onglets avec un plugin WordPress.

Commençons.

Méthode 1 : Comment créer des onglets dans WordPress avec un Page Builder

Pour la première méthode, nous utiliserons SeedProd, le meilleur constructeur de site Web WordPress, pour ajouter du contenu à onglets à votre site Web.

SeedProd est un puissant générateur de pages par glisser-déposer qui vous permet de créer des mises en page WordPress flexibles sans écrire de code. Avec ses kits de site Web professionnels, ses modèles de page de destination et son éditeur visuel en direct, vous pouvez personnaliser chaque partie de votre site et voir les changements en temps réel.

Vous pouvez également utiliser SeedProd pour :

• Créer des thèmes WordPress personnalisés
• Créer des sites Web WooCommerce
• Créez des pages de destination à fort taux de conversion
• Mettez votre site en mode maintenance
• Et beaucoup plus

Ce constructeur de pages comprend également des blocs hautement personnalisables pour améliorer votre conception WordPress. Par exemple, avec le bloc Onglets, que nous utiliserons dans ce guide, vous pouvez ajouter plusieurs onglets aux pages en quelques clics.

Suivez les étapes ci-dessous pour créer des onglets dans WordPress avec SeedProd.

Étape 1. Installer le créateur de site Web SeedProd

Tout d'abord, vous devrez vous rendre sur le site Web de SeedProd et télécharger le plugin. SeedProd a une version gratuite ; cependant, vous aurez besoin d'un plan premium pour déverrouiller les onglets et autres blocs.

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 pour installer 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 le tableau de bord de votre compte dans 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. Créer un thème WordPress ou une page de destination

Il existe 2 façons d'utiliser SeedProd pour ajouter des onglets à votre site Web :

1. Utilisez le générateur de thèmes pour créer un thème WordPress personnalisé et ajouter des onglets à n'importe quelle page WordPress.
2. Créez une page de destination autonome avec un contenu à onglets à l'aide du générateur de page par glisser-déposer.

Pour ce guide, nous utiliserons la première option car elle vous permet d'ajouter des onglets à n'importe quelle page que vous aimez, y compris votre page d'accueil, la barre latérale WordPress, l'en-tête, le pied de page et n'importe où ailleurs dans votre thème.

Vous pouvez suivre ce guide étape par étape pour créer un thème WordPress avec SeedProd, puis revenir ici pour obtenir des instructions sur l'ajout d'onglets à votre site.

Étape 3. Ajoutez des onglets à vos pages WordPress

Après avoir créé votre thème WordPress, vous devrez décider quelles pages doivent avoir un contenu à onglets. Par exemple, vous pouvez ajouter des onglets à votre page de contact pour afficher différents types d'informations de contact ou dans une barre latérale personnalisée pour différentes catégories de publication.

Dans cet exemple, nous ajouterons des onglets à la page À propos pour afficher plus de détails, comme les offres d'emploi, les directives éditoriales, etc.

Pour ce faire, accédez à Pages » Toutes les pages de votre administrateur WordPress et recherchez la page que vous souhaitez modifier.

Étant donné que vous utilisez un kit de site Web SeedProd, les pages de contenu telles que les pages à propos, de contact et de services sont créées automatiquement. Pour les ouvrir dans l'éditeur visuel, cliquez sur le lien Modifier avec SeedProd .

Une fois votre page ouverte dans le constructeur de page, vous pouvez utiliser les options de personnalisation de SeedProd pour apporter des modifications. 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 en place. Alors faisons cela avec le bloc d'onglets de SeedProd.

Tout d'abord, ajoutez une nouvelle section à la page pour "héberger" votre contenu à onglets. Dans notre cas, nous allons dupliquer l'une des sections existantes et la faire glisser vers le 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
• Modifier la taille de la police
• Augmenter ou diminuer l'espace entre les onglets
• Ajuster l'alignement des onglets

Le développement de chaque onglet vous permet d'ajouter un titre d'onglet et d'écrire votre contenu à l'aide d'un éditeur classique avec les 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. Tournez simplement le bouton "Masquer l'icône de l'onglet" sur la position "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, etc.

Vous pouvez également afficher des onglets verticaux ou un ensemble d'onglets horizontaux en cliquant sur l'une des options de mise en page.

N'oubliez pas de cliquer sur le bouton Enregistrer dans le coin supérieur droit de l'écran pour enregistrer vos modifications.

Suivez les mêmes étapes pour ajouter des onglets à n'importe quelle autre page de votre site Web WordPress, puis passez à l'étape suivante pour mettre vos modifications en ligne.

Étape 4. Publiez votre contenu à onglets

Après avoir ajouté des onglets à vos différentes pages WordPress, vous êtes prêt à les publier pour que les visiteurs de votre site Web puissent les voir.

Pour ce faire, rendez-vous sur la page SeedProd » Theme Builder et basculez le bouton « Activer le thème SeedProd » sur la position « Activé ».

Vous pouvez maintenant prévisualiser vos pages et voir votre contenu à onglets en action.

Méthode 2 : Comment ajouter des onglets avec un plugin WordPress

La méthode suivante est une bonne alternative si vous ne souhaitez pas modifier votre thème WordPress ou créer une landing page. Nous utiliserons le plugin WordPress gratuit Tabs Responsive pour ajouter des onglets réactifs à votre site WordPress.

Tout d'abord, vous devrez installer le plugin Tabs Responsive et l'activer depuis votre administrateur 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
• Description des onglets
• Icônes d'onglet

Vous pouvez également modifier le style de chaque onglet dans la barre latérale de droite en choisissant des styles d'onglet personnalisés, des couleurs d'arrière-plan, des couleurs de police, etc.

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, comme votre barre latérale WordPress ou vos widgets de pied de page, en collant le shortcode dans un bloc de paragraphe.

Ensuite, vous verrez votre contenu à onglets en direct dans les zones de votre barre latérale :

Voilà!

Dans ce didacticiel, vous avez appris à créer des onglets dans WordPress sans écrire de code. Prêt à créer des onglets personnalisables sur votre site Web ?

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)

Merci d'avoir lu. Veuillez nous suivre sur YouTube, Twitter et Facebook pour plus de contenu utile pour développer votre entreprise.