Comment créer des onglets WordPress intelligents et magnifiques

Comment créer des onglets WordPress intelligents et magnifiques

Fait amusant: avez-vous remarqué que même wordpress.org utilise des onglets WordPress pour regrouper des informations?

Vérifiez ceci:

Source: wordpress.org

Les onglets WordPress sont un type de navigation qui peut améliorer l’expérience client. Comment ça ? En n’encombrant pas beaucoup d’informations en paragraphes, mais en utilisant une meilleure méthode d’organisation.

La navigation par onglets est similaire à l’organisation des fichiers dans un bureau ou chez le médecin.

À ne pas confondre avec les menus. La plupart du temps, les éléments de menu ouvrent une page séparée avec sa propre URL. Ici, aucun changement d’URL ne se produira.

À ne pas confondre non plus avec les accordéons. Un accordéon empile les informations verticalement. Vous pouvez cliquer sur les en-têtes pour afficher ou masquer le contenu qui leur est associé.

Maintenant, pourquoi votre site WordPress aurait-il besoin d’onglets? Améliorer la navigation, la convivialité, et donc la satisfaction client et les taux de conversion.

Beaucoup de raisons, non?

La navigation par onglets est encore une pratique courante dans le commerce électronique pour présenter des produits. De nombreux visiteurs reconnaissent déjà les onglets ou attendent des onglets à certains endroits.

Disons que vous vendez de l’électronique. Vous devrez présenter de nombreuses informations sur le produit:

• Description du produit
• Photos du produit
• Spécifications techniques
• Avis
• Informations sur la garantie
• Détails d’expédition

Les onglets vous aideront à compresser du contenu volumineux dans des espaces limités.

Maintenant, dans cet article, nous allons commencer par vous fournir une inspiration de conception d’onglet. Ensuite, nous examinerons un peu les meilleures pratiques. Au final, je vous guiderai à travers les aspects techniques des onglets WordPress.

Allons-y!

Onglets: un peu d’inspiration

Maintenant, vérifions certains sites Web qui utilisent des onglets. Je suis définitivement pour la preuve. Les images peuvent mieux expliquer les choses que les mots, ne pensez-vous pas?

Voyons, eBay utilise des onglets pour la description du produit. Toutes les spécifications techniques vont sous « Description », et ils ont rassemblé « expédition et paiement » sous le même onglet. Je suis presque sûr qu’ils ont testé la mise en page car, pour un site avec un tel trafic, tout changement peut affecter fortement les taux de conversion.

Source: ebay.com

BobbyBrown cosmetics opte pour une approche minimaliste, les onglets n’ont pas d’approche en forme de bouton. Ils utilisent un soulignement pour informer l’utilisateur qu’il a sélectionné un onglet.

Source: bobbibrowncosmetics.com

Je me sens toujours perdu quand je vais à booking.com . Ils ont beaucoup d’informations dont vous avez besoin pour faire défiler vers le bas. Récemment, j’ai remarqué qu’ils ont apporté quelques modifications pour réduire le défilement, mais cela ne suffit pas (pour moi).

Trivago, en revanche, semble organiser un peu mieux les informations. Je sais que c’est difficile à faire quand vous devez fournir autant de détails.

Ils utilisent des onglets pour organiser les informations de l’hôtel telles que aperçu, informations, photos, avis, offres.

Source: trivago.les onglets com

sont une pratique courante sur les sites Web qui proposent des forfaits de voyage tels que des vols, des hébergements, des locations de voitures.

Expedia le fait bien lorsqu’il présente son offre pour 6 services. L’expérience est propre et peu intrusive.

Source : expedia.com

Honda utilise les onglets de manière plus créative. Il mélange des images et des vidéos à côté du texte pour vendre une excellente expérience Honda.

Source: automobiles.honda.com

Onglets WordPress: meilleures pratiques

En termes simples, les onglets sont un ensemble de boutons généralement définis horizontalement. C’est pourquoi leur conception devrait être très proche d’une conception de bouton.

Maintenant, examinons un peu les meilleures pratiques d’utilisation des onglets dans votre site Web WordPress:

• N’optez pas pour plusieurs lignes, il sera difficile pour l’utilisateur de se souvenir de l’onglet qu’il a visité. Si vous réalisez que vous avez besoin de plus de lignes, cela signifie que vous devrez trouver une meilleure façon d’organiser les informations
• Gardez les titres des onglets courts et doux
• Utilisez les onglets uniquement lorsque les utilisateurs n’ont pas besoin de voir le contenu de plusieurs onglets en même temps
• Indiquez clairement quel onglet est actif
• Les onglets non sélectionnés doivent rester visibles et ne pas être perdus en arrière-plan
• Assurez-vous que votre onglet apparaît comme des boutons séparés avec lesquels vous pouvez interagir
• Ajoutez des effets de survol sur les onglets comme vous le feriez sur les boutons
• Utilisez des onglets lorsque vous en avez entre deux et neuf différents catégories de contenu
• Les catégories sont de nature similaire, un utilisateur s’attendrait à les y voir (par exemple: description du produit, avis sur le produit)
• N’utilisez pas la navigation par onglets lorsque vous avez l’intention d’insérer un lien « plus »
• Vous pouvez utiliser des dégradés pour ajouter de la profondeur et de la dimension aux onglets.

Comment créer des onglets WordPress à l’aide de constructeurs de pages

J’utilise le constructeur de pages Colibri aux fins de cet exercice.Les onglets

peuvent être trouvés en tant que composant.

Vous pouvez trouver des composants lorsque vous cliquez sur « + » en haut à gauche.

Accédez à Composants et faites glisser le composant « Onglet » vers l’aperçu de votre site Web à droite.

Ensuite, vous pouvez jouer avec les options de personnalisation sur la gauche.

Lorsque votre onglet ressemble à ce que vous voulez, appuyez simplement sur « Publier » et vous êtes en direct.

Onglets: un plugin pour vous aider à configurer les onglets WordPress

Si vous exécutez une boutique en ligne intégrée à WooCommerce, dans WordPress, il existe deux plugins très populaires pour les onglets WordPress.

Source: wordpress.org

Mais, je veux vous présenter un de mes favoris: les onglets.

Source: wordpress.org

Tabs propose de nombreuses options de personnalisation que vous aimerez bientôt. Pourquoi je sens que vous l’aimerez aussi:

• Vous concevrez des onglets WordPress adaptés aux mobiles
• Vous pouvez travailler avec des shortcodes
• Tabs fonctionne par glisser-déposer
• Il dispose de plus de 20 modèles de conception pour que vous n’ayez pas à vous soucier de l’inspiration
• 500+ Google Fonts
• Tabs fonctionne avec la plupart des les thèmes là-bas.

Onglets WordPress: les onglets conclusions

sont là pour rendre l’information plus facile à digérer dans un monde où la durée d’attention est plus courte. En termes d’outils, il y en a beaucoup qui peuvent vous aider à configurer des onglets WordPress. C’est la chose la plus facile à faire.

Le plus important est de déterminer quel type d’information peut tenir dans vos onglets. Si vous n’êtes pas sûr qu’un onglet vous aidera à organiser certaines informations, vous pouvez toujours effectuer des recherches sur les utilisateurs ou un test A/ B. Nos propres hypothèses ne suffisent pas. De vraies données comportementales vous mèneront à la bonne réponse.

À la fin de la journée, vous devez vous soucier de la convivialité, du découpage et de la vitesse du site Web.

Maintenant, si vous avez aimé cet article, et que vous souhaitez en savoir plus sur la conception d’un site Web WordPress, assurez-vous de vous abonner à notre chaîne Youtube et suivez-nous sur Twitter et Facebook!