Le bloc GutenKit Accordéon est la solution parfaite pour donner à votre public un accès facile au contenu long. Il ajoute une section pliable à votre site Web WordPress et fournit des fonctionnalités pour adorer la section accordéon dans les étapes actives et inactives.

Dans cette documentation, nous allons montrer comment créer des sections en accordéon sur l'éditeur Gutenberg par défaut.

Comment ajouter des blocs d'accordéon sur le site Web de Gutenberg #

Pour démarrer le processus, vous devez installer le plugin GutenKit. Une fois que vous avez terminé, suivez simplement les étapes ci-dessous.

Étape 1 : Ajouter un bloc accordéon GutenKit #

Depuis votre tableau de bord WordPress, 

• Suivre Pages > Ajouter une nouvelle page ou commencez à modifier une page existante.
• Pour ajouter un nouveau bloc, cliquez sur le bouton "+" Icône en haut de l'écran de l'éditeur de blocs.
• Rechercher le Accordéon GutenKit.
• Une fois qu'il apparaît, cliquez sur l'icône ou faites-le glisser et déposez-le.

Étape 2 : Ajouter des éléments en accordéon #

Ouvrez les paramètres du bloc, où vous ajouterez votre titre, votre description et votre icône en accordéon.

Accordéon: #

Par défaut, le bloc accordéon se charge avec trois éléments. Cliquez sur n'importe quel élément pour modifier le titre et description texte. Il y a un "Gardez cette diapositive ouverte", l'activer gardera ce curseur ou cet élément toujours ouvert à vos visiteurs.

Ensuite, appuyez sur le bouton «Ajouter un nouveau" pour ajouter un nouvel élément en accordéon. Vous pouvez également copier un article déjà personnalisé en cliquant sur le bouton «Cloner un élémentIcône ". Et si vous ne souhaitez pas conserver un élément, appuyez simplement sur le bouton «X" bouton.

Sélectionnez le style: Sélectionnez la disposition d'accordéon souhaitée parmi 5 styles prédéfinis.

Icône: #

• Position de l'icône: Définissez le positionnement de votre icône entre gauche et droite. Vous pouvez également afficher des icônes des deux côtés.
• Afficher le nombre de boucles: Activez ce bouton bascule pour afficher le comptage des nombres avec les éléments en accordéon. Notez que la sélection de l'option "Both Sides" dans le paramètre précédent fera disparaître ce paramètre.
• Icône Droite/Gauche : ajoutez une icône d'indicateur permettant aux visiteurs d'ouvrir le curseur en accordéon.
• Icône droite/gauche active: Afficher une icône pour le curseur accordéon actif.

*En plus de sélectionner dans la bibliothèque d'icônes, vous pouvez également télécharger un fichier d'icône SVG depuis votre propre appareil.

Étape 3 : Styler le contenu du texte en accordéon #

Titre: #

• Typographie: Utilisez cette zone de paramétrage pour appliquer toutes les options de personnalisation de la typographie comme la famille de police, la taille, l'épaisseur, le style, la décoration, la hauteur de ligne, etc.

Ensuite, les options suivantes sont disponibles pour les deux Ouvrir et Fermé choix. Cela signifie que vous pouvez personnaliser le texte du titre séparément pour les étapes actives et inactives.

• Couleur: définissez une couleur pour le texte du titre.
• Type d'arrière-plan: Choisissez entre une couleur unie et un arrière-plan dégradé pour l'arrière-plan du titre.

• Frontière: contrôlez la largeur, définissez la couleur et le style de la bordure du titre.
• Rayon de frontière: Définit la rondeur de la bordure du titre.
• Boîte ombre: utilisez ces commandes pour définir l'ombre de la boîte autour de la bordure du titre.
• Rembourrage: Ajustez le remplissage du titre de l'élément en accordéon.
• Marge inférieure: utilisez le curseur ou ajoutez une valeur personnalisée pour définir l'écart entre les éléments en accordéon.

Description: #

• Couleur: Choisissez la couleur du texte de description de votre article en accordéon.
• Typographie: Vous trouverez ici des options pour modifier la famille de police du texte de description, la taille, l'épaisseur, le style, l'espacement, etc.
• Type d'arrière-plan: Choisissez un type d'arrière-plan entre couleur unie et dégradé.
• Rayon de frontière: Définit l'arrondi de la bordure de la zone de description.
• Rembourrage: Ajustez l'espace intérieur de la zone de description.

Étape 3 : Bordure et icône en accordéon personnalisées #

Frontière: #

Semblable à l'option de titre, vous pouvez également personnaliser la bordure séparément pour les deux Ouvrir et Fermé modes.

• Frontière: contrôlez la largeur, définissez la couleur et le style de la bordure de l'élément en accordéon.
• Rayon de frontière: Définit la rondeur de la bordure de l'élément en accordéon.
• Boîte ombre: utilisez ces commandes pour apporter des effets d'ombre autour de la bordure de l'élément en accordéon.
• Désactiver la bordure pour les derniers éléments: Activez ce bouton bascule pour désactiver la bordure du dernier élément en accordéon.

Icône: #

Les paramètres de style d'icône ci-dessous sont applicables pour les deux Icône Fermé et Icône Ouvrir. 

• Taille de l'icône: Définit la taille des icônes.
• Couleur: utilisez le sélecteur de couleurs pour ajouter de la couleur à l'icône.
• Type d'arrière-plan: Sélectionnez un type d'arrière-plan entre couleur unie et dégradé.

• Frontière: utilisez cette zone de paramètres pour appliquer la couleur, le style et la largeur de la bordure autour de l'icône.
• Rayon de frontière: Ce paramètre définira la rondeur de la bordure de l'icône.
• Rembourrage: Ajustez le remplissage de l'icône.
• Marge: Ajustez la marge autour de l'icône.

Étape 4 : Paramètres avancés #

Dans l'onglet Paramètres avancés, vous pouvez configurer la disposition du bloc Accordéon, l'arrière-plan, les styles de bordure et contrôler sa visibilité.

Mise en page: #

• Marge: Définissez l'espace autour de la disposition des blocs. Cela aide à définir l’écart entre un autre bloc.
• Rembourrage: saisissez une valeur pour définir l'espace autour du bloc dans sa disposition.
• Largeur: En plus de conserver la largeur de mise en page par défaut.
  • Pleine largeur: En sélectionnant cette option, la mise en page s'étendra sur toute la largeur de l'écran.
  • En ligne (auto): Son application aura la même largeur que l'élément de bloc.
  • Coutume: Choisir cette option fera apparaître un curseur pour définir l'espace horizontal de la disposition des blocs.
• Indice Z: utilisez le curseur pour spécifier l'ordre de pile du bloc avec d'autres blocs.

Position: #

Sous la liste déroulante, vous verrez trois options : Défaut, Absolu, et Fixé. 

• Absolu: La sélection de cette option vous donnera une position absolue du bloc, ce qui signifie que les éléments rentreront dans leur conteneur.
• Fixé: L'option Position fixe permettra à l'élément de s'adapter à la totalité de la fenêtre ou de l'écran.

Les options Absolue et Fixe ont des paramètres similaires comme ci-dessous :

• Orientation horizontale: Choisissez la direction de positionnement entre gauche et droite.
• Compenser: Utilisez le curseur ou mettez une valeur manuellement pour ajuster le positionnement horizontal du bloc.
• Orientation verticale: Sélectionnez la direction de positionnement entre le haut et le bas.
• Compenser: Utilisez le curseur ou mettez une valeur manuellement pour ajuster le positionnement vertical du bloc. 

Arrière-plan: #

• Arrière-plan: Choisissez une option d’arrière-plan entre couleur unie, dégradé ou image.

Sous l'option Survol :

• Image: Si vous choisissez l'option image, les options suivantes s'ouvriront :
  • Image: Choisissez une image dans la médiathèque ou téléchargez la vôtre.
  • Taille de l'imagee : Sélectionnez la taille de l'image entre Vignette, Moyenne, Grande ou Complète.

• Position: Sélectionnez la position des 10 options différentes.
• Pièce jointe: Spécifiez la relation de l'image d'arrière-plan fixe ou défilante avec le reste de l'écran du navigateur.
• Répéter: sélectionnez une option pour définir la manière dont les images d'arrière-plan sont répétées.
• Taille d'affichage: Sélectionnez une taille d’affichage parmi quatre options différentes.

• Durée de la transition: Utilisez le curseur pour ajuster la transition d'arrière-plan de l'état Normal à l'état de survol.

Frontière: #

• Frontière: Sous cette option de configuration, vous obtiendrez des options de configuration des bordures telles que la largeur, le style et la couleur.
• Rayon de frontière: Définissez la rondeur de la bordure en saisissant une valeur.
• Boîte ombre: obtenez tous les paramètres tels que la couleur, l'horizontal/vertical, le flou, la répartition, etc. pour donner des effets d'ombre à la bordure. 

Sous l'option de survol :

• Durée de la transition: Vous pouvez ajouter une valeur manuellement ou utiliser le curseur pour définir l'heure de modification du motif de la bordure en survol.

Visibilité: #

Le module de visibilité vous permet de contrôler l'affichage des conceptions de blocs en fonction du type d'appareil. Il y aura trois options d'appareil (ordinateur de bureau, tablette, mobile) avec un bouton bascule. Activez le bouton bascule pour masquer la conception de bloc de cet appareil.

Cependant, vous pouvez toujours le voir dans la vue de l'éditeur.

Avancé: #

• Nom du bloc: donnez un nom pour identifier ce bloc de manière unique lors de la création de liens ou de scripts pour styliser le bloc.
• Ancre HTML: Ajoutez une URL pour lier une page de site Web.

• Classes CSS supplémentaires: Attribuez des classes CSS supplémentaires au bloc qui vous permettront de styliser le bloc comme vous le souhaitez avec du CSS personnalisé. 

N.-B.: Vous pouvez ajouter plusieurs classes séparément avec des espaces.

C'est ça. Nous espérons que ce guide vous a aidé à apprendre comment ajouter un design en accordéon à un site Web WordPress.