ThemeLocal - Des conseils de blog qui fonctionnent comme par magie
  • Blogging

    Pourquoi la plupart des conseils de blogs échouent (et comment y remédier)

    7 questions essentielles que chaque blogueur doit se poser

    Comment rédiger du contenu qui donne envie à vos lecteurs d’en savoir plus

    Que faire lorsque votre blog est piraté

    Comment écrire plus vite : 10 astuces simples pour doubler votre sortie d’écriture

    Comment surveiller de manière productive les tendances et rédiger du contenu digne d’intérêt

    Comment planifier le contenu comme Walter Bishop

    Comment rédiger l’article de blog ultime : aide-mémoire d’un blogueur

    6 façons à toute épreuve de créer une communauté (et de transformer les adeptes occasionnels en fans délirants)

  • WordPress
    • Tout
    • Plugins
    • Themes

    9 meilleurs thèmes WordPress de génération de leads 2022

    Comment accepter les paiements ACH dans WordPress

    Comment ajouter une collaboration dans l’éditeur de blocs WordPress (style Google-Doc)

    Comment ajouter des plans de paiement « Achetez maintenant, payez plus tard » à WordPress

    Comment accepter Apple Pay dans WordPress (la manière FACILE)

    Comment précharger des liens dans WordPress pour des vitesses de chargement plus rapides

    Comment ajouter un formulaire de paiement PayPal dans WordPress (étape par étape)

    8 meilleurs thèmes WordPress pour la massothérapie 2022

    Comment désactiver les notifications de nouveaux utilisateurs dans WordPress

  • Email Marketing

    Comment développer votre liste de diffusion avec un quiz en ligne

    Comment utiliser les blogs invités pour créer votre liste de diffusion

    Les métriques de marketing par e-mail sur lesquelles chaque campagne devrait être basée

    E-mails HTML ou texte brut : quelle option est la meilleure pour votre liste de diffusion ?

    Comment envoyer gratuitement une newsletter par e-mail avec SendinBlue

    Comment utiliser un formulaire de contact pour créer votre liste de diffusion

  • SEO

    Comment corriger les erreurs de type de publication personnalisées 404 dans WordPress

    Augmentez le trafic vers votre site WordPress en 6 étapes faciles

    Comment ne pas suivre automatiquement les liens externes dans WordPress

    Comment se classer plus haut dans les moteurs de recherche

    Comment supprimer les liens brisés de votre site WordPress pour toujours

    Guide du débutant en référencement : introduction, préparation et jargon

    Recherche et utilisation de mots clés WordPress pour le référencement

    Améliorez le référencement avec des backlinks, la vitesse du site et plus encore

    10 fonctions les plus importantes de Yoast SEO pour WordPress

  • Réseaux sociaux

    Comment ajouter un rappel à une publication Instagram

    Comment devenir viral sur Instagram : le guide du débutant

    5 excellentes façons de diversifier vos mises à jour sur les réseaux sociaux pour générer plus de trafic et d’engagement

    5 façons de télécharger des vidéos Instagram

    Pouvez-vous utiliser Instagram pour développer votre entreprise ?

    6 façons efficaces de vous démarquer sur les réseaux sociaux

    Les 3 meilleurs outils de marketing Pinterest pour les blogueurs (utilisez-les pour générer des milliers de visiteurs par mois)

    6 astuces marketing intelligentes sur Instagram pour booster votre entreprise

    Comment convertir votre profil Instagram personnel en profil d’entreprise

  • More
    • Tutoriels
    • Shopify
    • Avis
    • Conseils
    • Sécurité
    • Logiciels et services
    • Génération de trafic
    • Guide du débutant
    • Showcase
Pas de résultat
Voir tous les résultats
  • Blogging

    Pourquoi la plupart des conseils de blogs échouent (et comment y remédier)

    7 questions essentielles que chaque blogueur doit se poser

    Comment rédiger du contenu qui donne envie à vos lecteurs d’en savoir plus

    Que faire lorsque votre blog est piraté

    Comment écrire plus vite : 10 astuces simples pour doubler votre sortie d’écriture

    Comment surveiller de manière productive les tendances et rédiger du contenu digne d’intérêt

    Comment planifier le contenu comme Walter Bishop

    Comment rédiger l’article de blog ultime : aide-mémoire d’un blogueur

    6 façons à toute épreuve de créer une communauté (et de transformer les adeptes occasionnels en fans délirants)

  • WordPress
    • Tout
    • Plugins
    • Themes

    9 meilleurs thèmes WordPress de génération de leads 2022

    Comment accepter les paiements ACH dans WordPress

    Comment ajouter une collaboration dans l’éditeur de blocs WordPress (style Google-Doc)

    Comment ajouter des plans de paiement « Achetez maintenant, payez plus tard » à WordPress

    Comment accepter Apple Pay dans WordPress (la manière FACILE)

    Comment précharger des liens dans WordPress pour des vitesses de chargement plus rapides

    Comment ajouter un formulaire de paiement PayPal dans WordPress (étape par étape)

    8 meilleurs thèmes WordPress pour la massothérapie 2022

    Comment désactiver les notifications de nouveaux utilisateurs dans WordPress

  • Email Marketing

    Comment développer votre liste de diffusion avec un quiz en ligne

    Comment utiliser les blogs invités pour créer votre liste de diffusion

    Les métriques de marketing par e-mail sur lesquelles chaque campagne devrait être basée

    E-mails HTML ou texte brut : quelle option est la meilleure pour votre liste de diffusion ?

    Comment envoyer gratuitement une newsletter par e-mail avec SendinBlue

    Comment utiliser un formulaire de contact pour créer votre liste de diffusion

  • SEO

    Comment corriger les erreurs de type de publication personnalisées 404 dans WordPress

    Augmentez le trafic vers votre site WordPress en 6 étapes faciles

    Comment ne pas suivre automatiquement les liens externes dans WordPress

    Comment se classer plus haut dans les moteurs de recherche

    Comment supprimer les liens brisés de votre site WordPress pour toujours

    Guide du débutant en référencement : introduction, préparation et jargon

    Recherche et utilisation de mots clés WordPress pour le référencement

    Améliorez le référencement avec des backlinks, la vitesse du site et plus encore

    10 fonctions les plus importantes de Yoast SEO pour WordPress

  • Réseaux sociaux

    Comment ajouter un rappel à une publication Instagram

    Comment devenir viral sur Instagram : le guide du débutant

    5 excellentes façons de diversifier vos mises à jour sur les réseaux sociaux pour générer plus de trafic et d’engagement

    5 façons de télécharger des vidéos Instagram

    Pouvez-vous utiliser Instagram pour développer votre entreprise ?

    6 façons efficaces de vous démarquer sur les réseaux sociaux

    Les 3 meilleurs outils de marketing Pinterest pour les blogueurs (utilisez-les pour générer des milliers de visiteurs par mois)

    6 astuces marketing intelligentes sur Instagram pour booster votre entreprise

    Comment convertir votre profil Instagram personnel en profil d’entreprise

  • More
    • Tutoriels
    • Shopify
    • Avis
    • Conseils
    • Sécurité
    • Logiciels et services
    • Génération de trafic
    • Guide du débutant
    • Showcase
Pas de résultat
Voir tous les résultats
ThemeLocal - Des conseils de blog qui fonctionnent comme par magie
Pas de résultat
Voir tous les résultats
  • Blogging
  • WordPress
  • Shopify
  • Email Marketing
  • Monétisation
  • SEO
  • Réseaux sociaux
  • Tutoriels
  • Avis
  • Conseils
  • Sécurité
  • Logiciels et services
  • Génération de trafic
  • Guide du débutant
  • Showcase
Accueil Tutoriels

Comment ajouter des onglets aux articles et pages WordPress

Depuis 6 mois
dans Tutoriels
Temps de lecture:10 minutes de lecture
A A
0
Partager sur FacebookPartager sur Twitter

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 critiques, la description, les spécifications techniques, etc. en plusieurs onglets.

exemple d'onglets en action sur un site e-commerce

Pourtant, les onglets ont été utilisés dans de nombreux autres types de sites Web, pas seulement dans les sites de commerce électronique. Même le site Web officiel de WordPress.org utilise des onglets sur les pages de description des plugins. Voir l’image ci-dessous pour voir les onglets mis en évidence sur WP.org.

onglets sur la page de description du plugin wordpress.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.

accordéons sur vistamedia.xyz

Mais à part les accordéons, nous sommes ici pour parler de onglets, alors ne perdons pas notre attention ; J’avais juste besoin de faire 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 des informations qui auraient autrement pris une page ou un message complet. Cela signifie que les onglets rendent les informations beaucoup plus faciles à digérer, sans nécessairement forcer 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 réflexions dans la section des commentaires. Cela mis à part, commençons.

Utiliser un générateur de page

Si vous avez déjà installé un générateur de page, 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 de base 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

Onglets du générateur de pages Elementor

Informations et téléchargementVoir la démo

Le célèbre constructeur de pages Elementor 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 de tabulation sur votre page, puis de modifier le titre, le contenu, le style, etc. C’est tout !

Générateur de pages Premium WPBakery

Onglets du générateur de pages WPBakery

Informations et téléchargementVoir la démo

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

Le module d’onglet 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 générateur de page 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).

Installer le plugin WordPress Tabs

Onglets Plugin WordPress gratuit

Informations et téléchargementVoir la démo

Si vous n’utilisez pas de générateur de page, 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 de Tabs par 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 référentiel officiel du plugin WordPress, vous pouvez installer le plugin directement depuis l’intérieur de votre tableau de bord d’administration WordPress.

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

Installation du plugin WordPress pour onglets

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

installer le plugin wordpress tabs

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

Configurer le plugin WordPress réactif aux onglets

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.

ajout de nouveaux onglets à l'aide du plugin wordpress réactif aux onglets

Cela vous mènera à 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.

onglets responsive plugin wordpress constructeur d'onglets

Tout un parchemin 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 des éditeurs WYSIWYG sur les onglets, ce qui signifie que vous avez beaucoup de contrôle sur vos onglets.

Créons maintenant quelques exemples d’onglets et affichons-les sur une page ou un article.

Ajouter un titre

ajouter le titre des onglets

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 WordPress plus tard au cas où vous auriez besoin de modifier quoi que ce soit. Pour les besoins de ce didacticiel, j’ai baptisé mes onglets « Test Home Tabs ».

Choisissez le modèle de conception d’onglets

choisir le modèle de conception d'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 WordPress Tabs vous propose 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.

ajout de nouveaux onglets

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

  1. Titre de l’onglet – Ajoutez votre titre d’onglet dans ce champ par exemple Description, Spécifications, Détails, etc.
  2. Onglet Description – 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 un contenu riche à vos onglets, y compris des images, de la musique et des vidéos
  3. Utiliser WYSIWYG – Si vous souhaitez utiliser le familier Wchapeau-Ouiou-See-jem-Wchapeau-Ouiou-get éditeur pour créer le contenu de votre onglet, n’hésitez pas à appuyer sur ce bouton pour lancer la fenêtre pop-up
  4. 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
  5. Afficher au-dessus de l’icône – 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
  6. Effacer – Appuyez sur ce bouton pour supprimer un onglet spécifique
  7. Ajouter de nouveaux onglets – Cliquez sur ce bouton pour ajouter plus d’onglets
  8. Tout supprimer – Fatigué de tous les onglets ? Appuyez simplement sur le Tout supprimer 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 à votre guise.

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

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 (et sur la plupart des pages du plugin) qui vous mène au forum de support officiel Tabs sur WordPress.org. N’hésitez pas à appuyer sur le bouton d’assistance si vous avez besoin d’aide à tout moment.

Shortcode des onglets

shortcode 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-collerais simplement le shortcode ci-dessus dans cette page particulière.

Onglets Widget

prise en charge des widgets d'onglets

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

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 widget dans votre thème.

widget d'onglets

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 à cette barre latérale droite ; elle regorge d’options de style !), Vous pouvez ajouter vos propres styles CSS personnalisés comme indiqué ci-dessous.

onglets wordpress plugin css personnalisé

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

La barre latérale droite

onglets options de style du plugin wordpress

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

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

Ajoutez vos onglets à une page ou à une publication 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 bouton 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 article/page. Après cela, appuyez sur le Publier bouton comme indiqué ci-dessous.

Après environ 5 minutes de mise en place des choses ; 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 ajouter des onglets à vos pages et publications WordPress ? Quel est votre plugin WordPress pour onglets préféré ? S’il vous plaît partager vos pensées dans les commentaires. Bonne création !

Partager26Tweeter16Envoyer
Article précédent

Comment empêcher le spam et protéger votre blog WordPress

Article suivant

Security Ninja peut-il protéger votre site ?

Similaire Postes

Comment

Comment nettoyer un iPhone et lui donner un désencombrement numérique

Depuis 15 heures
Comment

Comment supprimer un compte Yahoo

Depuis 19 heures
Comment

Tout ce que vous devez savoir sur le retour des produits Apple (2022)

Depuis 1 jour
Charger plus
Article suivant

Security Ninja peut-il protéger votre site ?

Laisser un commentaire Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

RECOMMANDÉ

Comment activer le mode sombre sur Facebook

Depuis 3 semaines

Audio Pro présente les « tueurs de barres de son » A28 et A38

Depuis 1 mois

Test du Brother MFC-J1010DW

Depuis 3 mois

Samsung Galaxy Z Flip 4 semble prêt pour une augmentation de puissance saine

Depuis 3 jours

Pourquoi Snapchat ne se télécharge-t-il pas sur iPhone ?

Depuis 4 semaines
ThemeLocal – Des conseils de blog qui fonctionnent comme par magie

Nous aidons les entrepreneurs intelligents à transformer leurs blogs en entreprises rentables. Nous sommes un blog primé qui aide les blogueurs et les entrepreneurs depuis 2020.

Suivez-nous

Nouvelles récentes

Apple Watch 8 pourrait enfin apporter une refonte à plat

mai 28, 2022

Examen du bot SwitchBot

mai 28, 2022
  • Conditions d’utilisation
  • Politique de confidentialité
  • Politique de cookies
  • Contactez nous

© 2022 ThemeLocal. Tous droits réservés.

Pas de résultat
Voir tous les résultats
  • Blogging
  • WordPress
    • Plugins
    • Themes
  • Shopify
  • Email Marketing
  • Monétisation
  • SEO
  • Réseaux sociaux
  • Tutoriels
  • Avis
  • Conseils
  • Sécurité
  • Logiciels et services
  • Génération de trafic
  • Guide du débutant
  • Showcase

© 2022 ThemeLocal. Tous droits réservés.