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

Concevez-vous une page de destination, une page produit ou une page FAQ sur votre site WordPress ? Alors vous devriez utiliser des accordéons dans la conception de vos pages.

Les accordéons aident à rendre les sites Web plus faciles à explorer et améliorent l'expérience utilisateur. Ils aident également à réduire l'encombrement et à 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.

Un des grands avantages de l'utilisation de WordPress est que vous pouvez ajouter des fonctionnalités étonnantes telles que des accordéons à votre site Web à l'aide d'un simple plugin. Dans ce guide, nous utilisons Heroic FAQs pour créer une section accordéon en quelques clics.

Nous vous guiderons à travers le processus, étape par étape. Commençons !

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

Les accordéons sont une stratégie de conception très utile utilisée dans la conception 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 déroulants dans la conception de vos pages pour y intégrer beaucoup de contenu.

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. De cette façon, vous pouvez afficher uniquement les questions et masquer les réponses dans un accordéon déroulant. Cela vous permettra de gagner de l'espace dans la conception de la page et d'offrir un moyen plus facile aux utilisateurs d'explorer les réponses.

Voici comment fonctionnent les accordéons :

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

Différence entre accordéon et bascule

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

Par exemple, lorsqu'un utilisateur clique sur un titre d'accordéon, le contenu de son onglet s'affiche. Mais lorsqu'il clique sur un autre titre, l'onglet précédent se ferme pour afficher le nouvel onglet.

Avec les bascules, 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 indéfiniment pour trouver le contenu que vous recherchez ? Heureusement, les accordéons résolvent ce problème.

Le principal avantage de l'utilisation d'accordéons est la possibilité de gagner de l'espace sur votre site web. Au lieu de créer des pages très longues, vous pouvez masquer toutes les informations importantes derrière des onglets. Et permettre aux utilisateurs de trouver des questions et des réponses en parcourant les titres.

Meilleure organisation du contenu

Les accordéons vous permettent également d'organiser le contenu dans une structure conviviale. Avec les accordéons, vous pouvez imbriquer des onglets pour organiser le contenu par catégories et par sujets. Vous pouvez le voir 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 d'accordéons FAQ sur votre page de tarification ou une page de destination de produit. Cela vous permettra de répondre aux questions courantes sur votre produit sans prendre trop de place.

Réduire la taille des pages

La taille de vos pages web joue un rôle clé 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.

Lorsque vous utilisez des accordéons dans les sites web WordPress, vous pouvez améliorer considérablement la vitesse de chargement des pages de votre site web car ils peuvent être intégrés sous forme de widget.

Comment ajouter un accordéon dans WordPress

Pour ce tutoriel, nous utilisons le plugin WordPress Heroic FAQs. Pas seulement parce qu'il est développé par notre propre équipe de développeurs expérimentés. Principalement parce que c'est un plugin qui offre de nombreuses fonctionnalités. Et offre plus de valeur que d'autres plugins.

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

Maintenant, passons au tutoriel pratique.

Étape 1 : Télécharger et installer Heroic FAQs

Tout d'abord, vous devrez télécharger et installer le plugin Heroic FAQs sur votre site web WordPress. Une fois que vous aurez acheté le plugin, vous pourrez le télécharger depuis votre tableau de bord de compte Heroic.

Ensuite, connectez-vous à votre tableau de bord d'administration WordPress. Allez à la page Plugins >> Ajouter un nouveau et sélectionnez l'option Téléverser. 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 de FAQ

Le plugin Heroic FAQs vous guidera ensuite tout au long de votre processus de configuration initiale. Suivez simplement 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 réponses. Ou de détails sur les fonctionnalités du produit. Ou de 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 maintenant intégrer votre groupe de FAQ sur 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-en une existante. Ajoutez un Nouveau bloc et recherchez le bloc de contenu Heroic FAQ.

Depuis 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. Ainsi que modifier le style du design de l'accordéon.

Étape 4 : Basculer entre accordéon et bascule

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

Étape 5 : Prévisualiser l'accordéon

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

Comment ajouter un accordéon dans WordPress gratuitement

Pour ajouter un accordéon (ou au moins une bascule) dans WordPress, vous n'avez pas besoin d'installer de plugin.

WordPress dispose d'un bloc intégré appelé "Détails" qui vous permet de créer un contenu similaire à un accordéon (bascule). Concevez-le avec du CSS personnalisé et vous avez un bloc pour créer des FAQ.

Il existe également de nombreux plugins d'accordéon WordPress gratuits disponibles. Cependant, les fonctionnalités et la personnalisation seront limitées par rapport à Heroic FAQ, et la fonctionnalité d'accordéon peut se faire au détriment de pages gonflées et de faibles scores de vitesse de page.

Alors, choisissez la bonne solution !

En conclusion

Il existe de nombreuses façons différentes de tirer parti des accordéons pour stimuler l'engagement des utilisateurs et offrir plus de valeur aux clients. Utilisez notre guide comme tremplin pour trouver vos propres approches uniques pour utiliser les accordéons d'autres manières utiles.

En attendant, n'hésitez pas à parcourir notre blog pour plus de conseils. Vous trouverez notre comparaison des meilleurs logiciels de base de connaissances assez utile.