Comment ajouter un accordéon dans Gutenberg WordPress

how to add accordion in wordpress gutenberg

Les accordéons sont un excellent moyen d'organiser et de présenter des informations détaillées dans un style réduit et facile à lire, qu'il s'agisse de dresser une liste des questions les plus fréquemment posées, de partager des plans ou de donner des informations détaillées.

Après avoir installé WordPress, si vous voulez savoir Comment ajouter un accordéon dans Gutenberg WordPressvous êtes au bon endroit.

Ce guide vous montrera comment ajouter des accordéons à votre site WordPress en utilisant l'éditeur Gutenberg. Nous pouvons vous aider dans tous les domaines, du choix du bon plugin à la modification de l'apparence et du fonctionnement de vos accordéons. 

Avant de plonger dans le processus, nous devons connaître le bloc accordéon.

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

Un bloc accordéon est une fonction utile de conception web qui vous permet d'afficher des informations qui peuvent se réduire dans une disposition en accordéon. 

Comment cela fonctionne-t-il ?

Structure d'un accordéon : Un accordéon est constitué d'une liste de titres sur lesquels les utilisateurs peuvent cliquer ou appuyer pour obtenir davantage d'informations. Les titres sont généralement des questions ou des sujets.

Lorsque vous cliquez sur un titre, il s'agrandit pour afficher plus de contenu, et lorsque vous cliquez à nouveau, il se rétrécit pour masquer ce contenu.

Gutenberg a-t-il un accordéon ?

Gutenberg, l'éditeur de blocs par défaut de WordPress, n'inclut pas nativement de bloc accordéon. Cependant, vous pouvez facilement ajouter cette fonctionnalité en utilisant des plugins tiers ou des blocs Gutenberg personnalisés. 

Quand utiliser l'accordéon sur le site web ?

Les blocs accordéon sont un excellent moyen d'organiser le contenu d'un site web. Ils sont faciles à utiliser et ne prennent pas trop de place. Dans les situations suivantes, nous allons voir où un accordéon est utilisé :

FAQ

Les blocs accordéon sont souvent utilisés pour présenter des questions fréquemment posées (FAQ) sur les sites web. En développant chaque section, vous pouvez trouver les réponses à la question. Vous pouvez ainsi trouver rapidement les informations dont vous avez besoin.

Détails du produit ou du service

Un accordéon peut vous aider à présenter des informations détaillées sur un produit, un service ou une fonctionnalité de manière organisée. Les utilisateurs peuvent développer les questions qu'ils souhaitent voir sans que la page ne soit trop encombrée.

Instructions étape par étape 

Les blocs accordéon sont parfaits pour créer des instructions ou des guides étape par étape. Il est facile pour les gens de suivre, car chaque étape peut être une partie séparée qui peut s'effondrer.

Textes longs

Lorsque vous avez un long texte, comme des avertissements légaux, des conditions de service ou des politiques de confidentialité, un accordéon peut le cacher jusqu'à ce que les utilisateurs puissent interagir avec lui.

Pages réactives

Les accordéons fonctionnent bien sur différentes tailles d'écran. Les informations sur votre site restent organisées et faciles à trouver, que les visiteurs utilisent un ordinateur de bureau ou un appareil mobile.

Index SEO

En ce qui concerne le référencement, vous ne perdrez pas d'avantages car les moteurs de recherche peuvent toujours indexer les informations contenues dans les blocs en accordéon.

Comment ajouter et utiliser un accordéon dans l'éditeur Gutenberg pour WordPress

Vous pouvez ajouter un bloc accordéon en installant simplement un plugin de blocs Gutenberg.

Allez dans votre tableau de bord WordPress et naviguez jusqu'à l'onglet Plugins.

Sélectionnez Plugins -> Ajouter un nouveau plugin.

Tapez maintenant "Zoloblocks"dans la recherche de plugins.

Cliquez ensuite sur le bouton Installer maintenant bouton.

Après avoir installé les Zoloblocks, activer le plugin.

Lorsque le plugin est activé, vous verrez une page de bienvenue de Zoloblocks.

Allez maintenant dans le menu Blocs et vérifiez si le bloc accordéon est activé ou non.

Si elle est activée, ajoutons maintenant un bloc accordéon.

Vous pouvez ajouter un bloc accordéon à n'importe quelle page ou article.

Dans cet exemple, nous pouvons ajouter un accordéon à une page d'accueil existante.

Vous pouvez ajouter un bloc accordéon juste en dessous de la section Témoignages.

Pour ce faire, cliquez sur le bouton Modifier le site en haut de la page.

Vous serez alors redirigé vers le mode d'édition.

Il suffit de faire défiler la page vers le bas, de cliquer sur la page et de chercher la section des témoignages.

Cliquez ensuite sur la section Témoignages, puis sur le bouton + en haut de la page.

Vous verrez de nombreux blocs dans la liste. 

Sélectionnez maintenant le bloc accordéon dans Zoloblocks.

Super, vous venez d'ajouter un bloc en accordéon.

Il vous suffit maintenant de cliquer sur chacun des titres de l'accordéon et de commencer à les modifier à partir de l'option générale du panneau latéral droit.

Cliquez maintenant sur le signe + de la question pour développer et révéler la réponse. 

Inscrivez la réponse dans la barre de texte.

De la même manière, vous pouvez modifier d'autres titres d'accordéon et leurs réponses.

Vous pouvez ajouter d'autres accordéons en cliquant sur le bouton Ajouter un accordéon bouton.

Vous pouvez personnaliser l'ensemble des éléments d'un accordéon, son titre, son icône et son contenu.

Vous pouvez modifier la couleur, le rayon, l'espacement, la marge et l'ombre du titre et du contenu de votre accordéon.

Par exemple, la couleur de la police du titre d'un accordéon est modifiée en rouge et son arrière-plan devient gris.

Désormais, vous pouvez ajouter un accordéon et le personnaliser en quelques secondes.

Une fois l'édition terminée, vous verrez un bouton d'enregistrement en haut pour une ancienne page. Mais s'il s'agit d'une nouvelle page ou d'un nouvel article, vous verrez un bouton Publier. Cliquez sur le bouton Enregistrer ou Publier et votre nouveau bloc accordéon apparaîtra sur la page.

Pour plus d'inspiration, vous pouvez consulter les Zoloblocks démo pour concevoir différents styles d'accordéon.

Mais si vous avez encore besoin d'aide pour personnaliser l'accordéon, vous pouvez suivre les instructions suivantes la documentation ou vous pouvez obtenir une aide professionnelle auprès de ZoloBlocks soutien premium.

Dernières réflexions

Super, vous venez d'apprendre comment ajouter et utiliser un accordéon dans l'éditeur Gutenberg pour WordPress. 

ZoloBlocks permet d'ajouter facilement des accordéons et de modifier l'apparence de votre site. Nous pensons qu'il s'agit de la meilleure et de la plus simple façon d'ajouter des blocs pliables aux pages web.

Vous pouvez créer du contenu interactif en accordéon pour les FAQ, les caractéristiques des produits ou toute mise en page structurée dans l'éditeur Gutenberg. 

Profitez de la flexibilité et de la créativité qu'il apporte à vos projets web ! 

Partager l'article sur les médias sociaux :

S'abonner à bulletin d'information

Obtenez des conseils et des astuces, des mises à jour, des blogs récents et des offres.

Pas de spam. Seulement des informations de haute qualité que vous méritez.

Notre politique sociale Les médias

fr_FRFrançais