Pour créer une section de contenu réductible afin de révéler plus d'informations sur l'interaction de l'utilisateur, le bloc Unfold GutenKit peut vous aider. Il est idéal pour les descriptions de produits détaillées, l'ajout d'images ou le masquage de contenu volumineux.

Découvrez comment fonctionne le bloc.

Bloc de dépliage GutenKit #

Accédez à GutenKit depuis votre tableau de bord -> Aller aux blocs -> Trouver Unfold -> Allume-le

Rechercher le bloc  #

Depuis votre tableau de bord WordPress, ouvrez la page/publication où vous souhaitez utiliser le bloc Déplier.

Recherchez ensuite et cliquez/glissez-déposez simplement le bloc GutenKit Unfold.

Le bloc ressemble à ceci. Vous pouvez également utiliser un modèle de dépliage GutenKit de la bibliothèque.

Personnalisation de la partie Contenu #

Voyons les options de personnalisations :

Contenu #

• Titre:Écrivez le texte du titre dans la case de la section à déplier.
• Texte du bouton Développer : Insérer du texte pour le bouton de développement.
• Texte du bouton Réduire:Ajoutez du texte au bouton de réduction.

Options de contenu #

• Position du bouton:Afficher le bouton en dessous ou au dessus du contenu.
• Réduire la hauteur du contenu : Utilisez le curseur pour définir la hauteur de la zone de contenu réduite.
• Durée de la transition:Définissez la vitesse de déploiement du contenu.

Style d'édition #

• Emballage : Les options de style de l'enveloppe sont l'alignement du texte, la largeur, la couleur du texte, le type d'arrière-plan, la bordure, l'arc de bordure, le remplissage, la marge, la typographie et l'ombre de la boîte.
• Recouvrir: Personnalisez la couleur de superposition, la couleur et la hauteur de superposition de la superposition.
• Titre: Ajustez la marge, l'alignement, la typographie et la couleur du texte du titre.
• Bouton: Ici, vous aurez des options pour modifier le remplissage, l'alignement, la typographie, l'ombre du texte, la couleur du texte, le type d'arrière-plan, la bordure, le rayon de la bordure et l'ombre de la boîte.

Résultat final #

Voici un exemple –