Comment ajouter un accordéon dans WordPress (Guide étape par étape)

Vous concevez une page d'atterrissage, une page produit ou une page de FAQ sur votre site web WordPress ? Dans ce cas, vous devriez utiliser des accordéons dans la conception de vos pages.

Les accordéons facilitent l'exploration des sites web et améliorent l'expérience des utilisateurs. Ils permettent également de réduire l'encombrement et de raccourcir les pages web trop longues.

Dans ce guide étape par étape, nous vous montrons comment créer une section accordéon sur votre site web sans avoir à écrire une seule ligne de code.

L'avantage d'utiliser WordPress est que vous pouvez ajouter des fonctionnalités étonnantes telles que les accordéons à votre site web en utilisant un simple plugin. Dans ce guide, nous utiliserons Heroic FAQs pour créer une section en accordéon en quelques clics.

Nous vous accompagnerons tout au long du processus, étape par étape. C'est parti !

Qu'est-ce qu'un accordéon ?

Les accordéons sont une stratégie de conception très utile utilisée dans la conception de sites web pour organiser plusieurs sections de contenu en un seul endroit. En termes simples, les accordéons vous permettent de créer une section avec des onglets repliables sur vos pages afin de regrouper un grand nombre de contenus dans une seule section.

Par exemple, si vous créez une section de questions fréquemment posées (FAQ), vous pouvez utiliser un accordéon pour organiser proprement les questions et les réponses. Vous pouvez ainsi n'afficher que les questions et masquer les réponses dans un accordéon repliable. Cela vous permettra d'économiser de l'espace sur la page et d'offrir aux utilisateurs un moyen plus facile d'explorer les réponses.

Regardez comment Tesco utilise les accordéons pour organiser sa page de FAQ.

Autrefois, les sites web utilisaient également des accordéons à onglets horizontaux. Mais aujourd'hui, ils sont rarement utilisés dans la conception des sites web.

Différence entre l'accordéon et la bascule

La plupart des gens confondent souvent les accordéons et les bascules. Bien qu'ils se ressemblent, ils ont un comportement différent.

Par exemple, lorsqu'un utilisateur clique sur un titre dans un accordéon, le contenu s'affiche dans l'onglet correspondant. Mais lorsqu'il clique sur un autre titre, l'onglet précédent se ferme pour laisser place au nouvel onglet.

Grâce à des boutons de réglage, vous pouvez modifier ce comportement pour que les onglets restent ouverts. Et permettre aux utilisateurs de fermer les onglets manuellement.

En bref, les accordéons ne gardent qu'un seul onglet ouvert à la fois. Les bascules peuvent être ajustées pour afficher plusieurs onglets ouverts à la fois.

Vous n'avez pas à vous soucier de ces deux options car le plugin que nous utilisons pour configurer les accordéons dans WordPress prend en charge ces deux options.

Pourquoi utiliser un accordéon ?

L'utilisation d'accordéons présente de nombreux avantages. Voici quelques raisons de les utiliser sur votre site web.

Gagner beaucoup d'espace

Avez-vous déjà visité une longue page web qui vous oblige à faire défiler les pages pour trouver le contenu que vous cherchez ? Heureusement, les accordéons permettent de résoudre ce problème.

Le principal avantage des accordéons est qu'ils permettent de gagner de l'espace sur votre site web. Au lieu de créer des pages très longues, vous pouvez cacher toutes les informations importantes derrière des onglets. Et laisser les utilisateurs trouver les questions et les réponses en parcourant les titres.

Une meilleure organisation du contenu

Les accordéons permettent également d'organiser le contenu dans une structure conviviale. Avec les accordéons, vous pouvez imbriquer des onglets pour organiser le contenu en catégories et en sujets. Vous pouvez voir cela en action sur la page FAQ de Tesco que nous vous avons montrée précédemment.

Intégrer n'importe où

Les accordéons peuvent être intégrés n'importe où sur votre site web. Par exemple, vous pouvez ajouter des sections FAQ en accordéon sur votre page de tarification ou sur une page d'atterrissage de produit. Vous pourrez ainsi répondre aux questions les plus courantes sur votre produit sans occuper trop d'espace.

Réduire la taille des pages

La taille de vos pages web joue un rôle essentiel dans la vitesse de chargement des pages d'un site web. Comme vous le savez, la vitesse de chargement des pages est l'un des principaux facteurs de classement utilisés par Google.

L'utilisation d'accordéons dans les sites web WordPress permet d'améliorer considérablement la vitesse de chargement des pages de votre site web, car ils peuvent être intégrés en tant que widget.

Comment ajouter un accordéon avec Heroic FAQs

Pour ce tutoriel, nous utilisons Heroic FAQs le plugin WordPress. Non seulement parce qu'il a été conçu par notre propre équipe de développeurs expérimentés, mais aussi parce qu'il s'agit d'un plugin qui offre de nombreuses fonctionnalités. Principalement parce que c'est un plugin qui vient avec beaucoup de fonctionnalités. Et qu'il apporte beaucoup de valeur ajoutée par rapport aux autres plugins.

En utilisant le plugin Heroic FAQs , vous pouvez également créer des FAQ et des sections de connaissances uniques pour votre site Web.

Passons maintenant au tutoriel pratique.

Étape 1 : Téléchargement et installation Heroic FAQs

Tout d'abord, vous devez télécharger et installer le plugin Heroic FAQs sur votre site web WordPress. Une fois que vous avez acheté le plugin, vous pourrez le télécharger à partir du tableau de bord de votre compte Heroic.

Ensuite, connectez-vous à votre tableau de bord d'administration WordPress. Allez sur la page Plugins >> Add New et sélectionnez l'option Upload. Parcourez votre ordinateur pour trouver le fichier ZIP téléchargé contenant le plugin Heroic FAQs et installez-le.

Après avoir terminé l'installation, assurez-vous d'activer votre plugin en utilisant votre clé de licence.

Étape 2 : Créer un groupe FAQ

Heroic FAQs Le plugin vous guidera ensuite tout au long de la procédure d'installation initiale. Il vous suffit de suivre ses instructions.

Commencez par créer un groupe de FAQ. C'est là que toutes vos FAQ seront regroupées et organisées.

Vous pouvez ensuite commencer à ajouter des FAQ à ce groupe. Il peut s'agir de questions et de réponses. Ou de détails sur les caractéristiques d'un produit. Ou tout ce que vous voulez.

N'oubliez pas que vous pouvez ajouter autant de FAQ que vous le souhaitez.

Étape 3 : Intégrer l'accordéon

Vous pouvez désormais intégrer votre groupe de FAQ à une page ou à un article. Avec le nouvel éditeur de blocs Gutenberg, il est beaucoup plus facile d'ajouter des accordéons avec Heroic FAQs.

Créez une nouvelle page ou modifiez une page existante. Ajouter un nouveau bloc et rechercher le bloc de contenu FAQ héroïque.

Dans le panneau du bloc Heroic FAQ sur le côté gauche, vous pouvez sélectionner le groupe de FAQ que vous souhaitez afficher sur la page. Vous pouvez également modifier le style de l'accordéon.

Étape 4 : Passer de l'accordéon à la bascule

Avec Heroic FAQs, vous pouvez choisir entre les options d'accordéon et de bascule en un seul clic.

Étape 5 : Prévisualisation de l'accordéon

Prévisualisez la page pour voir à quoi ressemble l'accordéon. Vous pouvez ensuite cliquer sur Publier pour enregistrer les modifications.

En conclusion

Il existe de nombreuses façons d'exploiter les accordéons pour stimuler l'engagement des utilisateurs et offrir une plus grande valeur ajoutée aux clients. Utilisez notre guide comme un tremplin pour trouver vos propres approches d'utilisation des accordéons dans d'autres domaines utiles.

Entre-temps, n'hésitez pas à consulter notre blog pour obtenir d'autres conseils. Notre comparatif des meilleurs logiciels de base de connaissances vous sera très utile.