Ce tutoriel présente le widget Unfold du plugin JetTricks inclus dans le site Crocoblock JetPlugins. Vous aurez la possibilité de masquer une partie d’un texte ou d’un modèle et d’afficher le reste lorsque l’utilisateur clique sur un bouton.

Ce widget peut vous aider à gagner de l’espace et à mieux organiser l’apparence de la page en masquant le contenu supplémentaire. Contrairement au widget Lire plus, vous ne pouvez pas masquer une ou plusieurs sections. Cependant, le widget Unfold peut être ouvert et refermé. Il comprend également de nombreuses options de personnalisation qui peuvent vous aider à en tirer le meilleur parti. Par exemple, vous pouvez le concevoir différemment en mode de pliage et de dépliage. D’ailleurs, si vous voulez plus d’informations sur le widget Lire plus, je l’ajouterai bientôt à l’Elementor Academy.

Une autre caractéristique de ce widget est qu’il peut être utilisé non seulement pour afficher/masquer du texte, mais aussi pour utiliser un modèle que vous avez préalablement créé.

Voyons comment fonctionne le widget Unfold.

• 1. ajouter le widget Deploy
• 2. Définir la configuration
• 3. Choisir le contenu
• 4. Personnaliser le bouton
• 5. Préparer à sa guise

1. ajouter le widget Deploy

Ouvrez la page ou l’article auquel vous souhaitez ajouter un widget Unfold dans le constructeur Elementor. Recherchez le widget Déplier dans le panneau Éléments et faites-le glisser vers la section où vous souhaitez le placer.

2. Définir la configuration

Dans la barre latérale gauche, vous verrez le bloc Paramètres. Vous pouvez ici définir les paramètres de pliage et de dépliage.

• Pli: Si vous n’activez pas cette option, le bloc de contenu sera affiché ouvert par défaut. Dans le cas contraire, il sera affiché fermé.
• Défilement vers le haut après masquage du contenu (retour au début après avoir masqué le contenu) : si vous activez cette option, l’écran défilera vers le haut lorsque vous masquerez le contenu d’un bloc, ce qui peut s’avérer très utile lorsque le contenu est long afin que l’utilisateur ne perde pas le point de référence.
• Hauteur fermée: cette option permet de définir la hauteur du bloc de contenu lorsqu’il est fermé. Vous pouvez le faire en déplaçant le curseur ou en tapant simplement la valeur requise dans la barre ;
• Hauteur du séparateur: définit la hauteur de la bande de séparation colorée en partant du bas du bloc déplié et en allant vers le haut. Vous pouvez éclaircir la couleur par transparence dans l’onglet Style. Il est même possible de le convertir en dégradé.
• Durée: vous pouvez ici choisir la vitesse à laquelle le bloc de contenu sera plié et déplié. Plus la valeur est élevée, plus le mouvement est lent.
• Facilitation: vous avez le choix entre 9 types d’animations de pliage et de dépliage.

3. Choisir le contenu

Dans le bloc Contenu, vous pouvez ajouter un contenu statique (texte, images, vidéo ou autres médias) ou l’extraire dynamiquement du champ méta. En outre, vous pouvez ajouter n’importe quel modèle disponible dans le bloc de contenu caché.

Pour ajouter le modèle prêt à l’emploi au bloc caché, vous devez appuyer sur le bouton ” Modèle” dans la ligne ” Type de contenu “, qui est le bouton avec l’icône de feuille. Choisissez le modèle dans le menu déroulant et il sera automatiquement ajouté au bloc de contenu caché.

4. Personnaliser le bouton

Vous pouvez personnaliser le bouton qui permet de plier et de déplier le bloc de contenu caché dans la section Bouton.

• Alignement: permet de choisir l’emplacement du bouton.
• Icône de pli age : vous pouvez choisir l’icône des boutons de pliage et de dépliage dans la bibliothèque d’icônes ou télécharger votre propre fichier SVG.
• Texte du pli: tapez ici les titres des boutons de pliage et de dépliage.

5. Préparer à sa guise

L’onglet Style propose de nombreux paramètres de mise en page pour chaque élément. Voici quelques exemples de ce que vous pourriez créer à l’aide du widget Unfold :

Ces quelques étapes simples suffisent donc pour obtenir un bloc d’affichage impressionnant sur la page de votre site web.