Les onglets sont une fonctionnalité assez courante sur de nombreux sites Web, en particulier les magasins de commerce électronique. Les propriétaires de magasins de commerce électronique utilisent généralement des onglets dans la zone de description du produit, où ils divisent les avis, la description, les spécifications techniques, etc. en plusieurs onglets.

Pourtant, les onglets ont trouvé une utilisation dans de nombreux autres types de sites Web, pas seulement les sites Web de commerce électronique. Même le site officiel WordPress.org utilise des onglets sur les pages de description des plugins. Voir l'image ci-dessous pour voir les onglets en surbrillance sur WP.org.

De nombreux autres propriétaires de sites Web utilisent des onglets sur différents types de sites Web. Cependant, les onglets ne doivent pas être confondus avec accordéons, qui se développent pour révéler des informations. Ci-dessous, veuillez observer comment j'ai utilisé les accordéons sur mon site Web.

Mais à part les accordéons, nous sommes ici pour parler de onglets, alors ne perdons pas notre concentration ; J'avais juste besoin de faire clairement la distinction entre les tablatures et les accordéons. Maintenant, j'espère que nous sommes sur la même page 🙂

Essentiellement, les propriétaires de sites Web utilisent des onglets pour diviser les informations qui auraient autrement pris une page entière ou un message. Cela signifie que les onglets rendent les informations beaucoup plus faciles à digérer, sans nécessairement obliger les utilisateurs à appuyer sur la molette de défilement un million de fois.

En d'autres termes, les onglets améliorent la convivialité de votre site Web, en particulier dans un monde de durée d'attention plus courte. Donc, si vous souhaitez garder les utilisateurs sur votre site plus longtemps sans les ennuyer à mort avec de longues pages, vous devriez envisager d'utiliser des onglets.

Dans l'article d'aujourd'hui, nous vous montrons exactement comment ajouter des onglets à vos articles et pages WordPress. Avant la fin de cet article, vous aurez toutes les instructions dont vous avez besoin pour utiliser les onglets à votre avantage. Nous espérons que vous apprécierez jusqu'à la fin, et s'il vous plaît ne partez pas sans partager vos pensées dans la section des commentaires. Cela à l'écart, commençons.

Utiliser un constructeur de page

Si vous avez déjà installé un constructeur de pages, vous avez de la chance – vous avez probablement déjà un module d'onglets à portée de main. La plupart des principaux constructeurs de pages proposent des onglets dans le cadre de leur ensemble principal d'éléments de création de pages. Voici un bref aperçu de deux de nos favoris.

Générateur de pages gratuit Elementor

Le constructeur de pages Elementor populaire inclut des onglets dans le cadre de la version gratuite du plugin. Tout ce que vous avez à faire est d'insérer un élément d'onglet sur votre page, puis de modifier le titre, le contenu, le style, etc. C'est tout !

Générateur de pages Premium WPBakery

En utilisant un thème premium qui inclut le constructeur de pages WPBakery (comme le nôtre Thème total) ? Super! Les onglets sont intégrés et faciles à utiliser.

Le module d'onglets WPBakery est légèrement différent de l'exemple précédent car les onglets sont initialement vides lorsque vous les ajoutez. Vous devrez insérer des éléments de page supplémentaires (zone de texte, images, icônes, etc.) dans les onglets pour ajouter votre contenu. Mais cela vous donne une tonne de liberté pour créer des onglets comme vous le souhaitez (en plus des options de style intégrées). Nous avons déjà couvert ce constructeur de pages sur le blog, donc si vous souhaitez des instructions plus détaillées, consultez notre guide WPBakery (remarque – ce plugin s'appelait auparavant Visual Composer, donc désolé d'avance pour toute confusion).

Installez le plugin WordPress Tabs

Si vous n'utilisez pas de générateur de pages, il n'est pas nécessaire d'en utiliser un uniquement pour les onglets. Il existe de nombreuses alternatives intéressantes, comme le plugin WordPress gratuit connu simplement sous le nom d'onglets de WP Shop Mart. Tabs est un plugin WordPress astucieux qui vous aide à créer un nombre illimité de beaux onglets sans transpirer.

Commençons par installer le plugin WordPress Tabs. Comme il est disponible dans le dépôt officiel du plugin WordPress, vous pouvez installer le plugin directement depuis votre tableau de bord d'administration WordPress.

Nous utilisons la version gratuite, mais une version premium est disponible si vous souhaitez mettre à niveau ultérieurement des fonctionnalités supplémentaires.

Installation du plugin WordPress pour les onglets

Connectez-vous à votre tableau de bord d'administration WordPress et accédez à Plugins> Ajouter un nouveau et entrez “tabs wpshopmart” dans le champ de recherche par mot-clé. Une fois que vous avez trouvé le bon plugin, appuyez sur le Installer maintenant bouton comme indiqué ci-dessous.

Après cela, cliquez sur le Activer bouton. Et voilà, votre plugin Tabs Responsive WordPress est prêt à l'emploi. Maintenant, créons quelques onglets pour découvrir ce que ce plugin a à offrir.

Configurer le plugin WordPress responsive Tabs

L'activation du plugin ajoutera un nouvel élément à votre menu d'administration WordPress. Pour créer de nouveaux onglets, accédez à Onglets réactifs > Ajouter de nouveaux onglets comme nous le détaillons dans la capture d'écran ci-dessous.

Cela vous mènera au Tabs Responsive Builder qui regorge de toutes les fonctionnalités dont vous avez besoin pour créer de beaux onglets comme un patron. Voir l'image ci-dessous pour un aperçu de ce à quoi s'attendre.

Tout un rouleau n'est-ce pas? Eh bien, vous pouvez trouver la plupart des fonctionnalités dans la barre latérale droite. Notez également que les onglets individuels ont leurs paramètres. Vous pouvez même utiliser les éditeurs WYSIWYG sur les onglets, ce qui signifie que vous avez beaucoup de contrôle sur vos onglets.

Maintenant, créons quelques exemples d'onglets et affichons-les sur une page ou un article.

Ajouter un titre

Commencez par donner à vos onglets un titre descriptif (comme pour vos menus de navigation) comme indiqué dans l'image ci-dessus. De cette façon, vous pouvez facilement identifier vos onglets dans le tableau de bord d'administration de WordPress ultérieurement au cas où vous auriez besoin de modifier quoi que ce soit. Pour les besoins de ce tutoriel, j'ai baptisé mes onglets “Test Home Tabs”.

Choisissez le modèle de conception des onglets

Comme le montre la capture d'écran ci-dessus, votre prochaine étape consiste à choisir un modèle de conception que vous souhaitez utiliser pour vos onglets. La version gratuite du plugin Tabs WordPress ne vous propose qu'un seul modèle de conception, mais vous pouvez toujours passer à la version premium pour 19 de plus. Parlez de liberté de conception.

Ajouter des onglets

Ensuite, ajoutez autant d'onglets que vous le souhaitez, comme indiqué ci-dessous.

Nous avons créé une liste numérotée détaillant ce que vous pouvez faire sur le Ajouter des onglets partie illustrée ci-dessus. Les numéros correspondent à chaque zone.

Titre de l'onglet – Ajoutez le titre de votre onglet dans ce champ, par exemple Description, Spécifications, Détails, etc.
Description de l'onglet – Ajoutez la description de votre onglet ici. Ce champ vous permet d'ajouter le contenu de votre onglet. La meilleure partie est que vous pouvez utiliser l'éditeur WYSIWYG (illustré au numéro 3 ci-dessous) pour ajouter du contenu riche à vos onglets, y compris des images, de la musique et des vidéos.
Utiliser WYSIWYG – Si vous souhaitez utiliser le familier Ochapeau-Ouiou-See-jes-Ochapeau-Ouiou-get editor pour créer le contenu de votre onglet, n'hésitez pas à appuyer sur ce bouton pour lancer la fenêtre pop-up
Icône d'onglet – Ce champ vous aide à choisir une icône à utiliser sur votre onglet. Le plugin Tabs WordPress vous offre un accès à des tonnes d'icônes Font Awesome pour égayer vos onglets comme un pro
Afficher l'icône ci-dessus – Si vous souhaitez afficher le titre de l'onglet à côté de l'icône, vous allez adorer cette fonctionnalité. De plus, il vous permet de désactiver l'icône sans toucher le titre de l'onglet
Supprimer – Appuyez sur ce bouton pour supprimer un onglet spécifique
Ajouter de nouveaux onglets – Cliquez sur ce bouton pour ajouter plus d'onglets
Supprimer tout – Fatigué de tous les onglets ? Appuyez simplement sur le Supprimer tout bouton pour tout réinitialiser

Quelques conseils bonus pour vous aider. Tout d'abord, vous pouvez faire glisser et déposer les onglets pour les réorganiser et les organiser comme vous le souhaitez.

Deuxièmement – n'oubliez pas d'appuyer sur le Enregistrer le brouillon une ou deux fois lorsque vous créez vos onglets pour vous assurer de ne perdre aucune modification au cas où vous quitteriez le générateur d'onglets par accident.

Enfin – si vous avez besoin d'aide, il y a un grand bleu Obtenir de l'aide bouton juste en dessous du Ajouter des onglets section (et sur la plupart des pages du plugin) qui vous mène au forum officiel de support des onglets sur WordPress.org. N'hésitez pas à appuyer sur le bouton d'assistance si vous avez besoin d'aide à tout moment.

Code abrégé des onglets

Ensuite, vous trouvez le shortcode Tabs que vous utilisez pour ajouter et afficher vos onglets sur n'importe quelle page ou publication que vous désirez. Par exemple, notre shortcode est [TABS_R id=443]. Pour afficher les onglets sur une page, je copierais simplement le shortcode ci-dessus dans cette page particulière.

Widget Onglets

Vous cherchez à ajouter vos onglets dans une zone de widgets sur votre site Web ? Si c'est un oui retentissant, vous adorerez la prise en charge des widgets fournie avec le plugin Tabs WordPress.

Frapper le Cliquez ici Le lien dans l'image ci-dessus vous amène à l'écran des widgets WordPress, où vous êtes libre d'ajouter vos onglets partout où vous avez une zone de widgets dans votre thème.

CSS personnalisé

Alors que le plugin Tabs WordPress est livré avec de nombreuses options de personnalisation des onglets (il suffit de jeter un coup d'œil à la barre latérale de droite ; il regorge d'options de style !), vous pouvez ajouter vos propres styles CSS personnalisés, comme indiqué ci-dessous.

De plus, vous pouvez définir vos paramètres personnalisés comme paramètres par défaut pour tous les nouveaux onglets simplement en cliquant sur le Mettre à jour les paramètres par défaut bouton comme indiqué dans l'image ci-dessus.

La barre latérale droite

La barre latérale droite que nous mettons en évidence dans l'image ci-dessus porte le jour pour vous vraiment. Il contient toutes les options dont vous avez besoin pour styliser vos onglets à votre guise. Les options notables incluent :

Couleur de fond de l'onglet
Couleur de la police des onglets
Famille de police et style
Options d'affichage pour le titre et l'icône de l'onglet
Alignement de la position de l'icône d'onglet, c'est-à-dire avant ou après le titre de l'onglet
Bordures des onglets
Animations de description d'onglets multiples
Et bien plus

Ajoutez vos onglets à une page ou un article WordPress

Une fois que vous avez ajouté le contenu de votre onglet et les options de style, faites défiler vers le haut et cliquez sur le Publier bouton comme indiqué ci-dessous.

À ce stade, vos onglets sont prêts. Il vous suffit d'ajouter les onglets à une page ou à un article WordPress. Copiez simplement le shortcode des onglets que nous avons vu plus tôt. Le nôtre est [TABS_R id=443].

Lancez votre éditeur de publication (même si vous utilisez Gutenberg) et collez le shortcode dans votre message/page. Après cela, appuyez sur le Publier bouton comme indiqué ci-dessous.

Après environ 5 minutes de configuration; J'utilise le thème Twenty Seventeen et beaucoup de Lorem Ipsum, j'ai obtenu le résultat suivant.

Notez que je n'ai pas personnalisé les couleurs ou quoi que ce soit. Dis-moi ce que tu penses; n'était-ce pas facile ?

L'ajout d'onglets à vos pages et publications WordPress est l'affaire des élèves de quatrième année. Je ne m'attends pas à ce que vous rencontriez des problèmes, surtout si vous utilisez un plugin tel que Tabs de WP Shop Mart.

Comment ajoutez-vous des onglets à vos pages et publications WordPress ? Quel est votre plugin WordPress d'onglets préféré ? S'il vous plaît partagez vos pensées dans les commentaires. Bonne création !