Vidéo pas à pas
Introduction
Ce tutoriel présente le widget Unfold du plugin JetTricks inclus sur le site de Crocoblock. 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 la place et à mieux organiser l’apparence de la page en masquant du contenu supplémentaire. Contrairement au widget Lire la suite, il ne peut pas masquer une ou plusieurs sections. Cependant, le widget Unfold peut être ouvert puis refermé. De plus, il inclut de nombreuses options de personnalisation qui peuvent vous aider à en tirer le meilleur parti. Par exemple, vous pouvez le concevoir différemment en mode replié et en mode déplié. D’ailleurs, si vous souhaitez plus d’informations sur le widget Lire la suite, je l’ajouterai prochainement à Elementor Academy.
Une autre caractéristique de ce widget est qu’il peut non seulement être utilisé pour afficher/masquer du texte, mais vous pouvez également utiliser un modèle que vous avez créé au préalable.
Voyons comment fonctionne le widget Unfold.
1. Ajoutez le widget Unfold
Ouvrez, dans le constructeur Elementor, la page ou la publication à laquelle vous devez ajouter un widget Unfold. Recherchez le widget Unfold dans le panneau Éléments et faites-le glisser vers la section où vous souhaitez le placer.
2. Définissez les réglages
Dans la barre latérale gauche, vous verrez le bloc Settings. Vous pouvez y définir les réglages de repli et de dépliage.
- Fold (Replier) : si vous n’activez pas cette option, le bloc de contenu s’affichera ouvert par défaut. Sinon, il s’affichera fermé.
- Scroll to Top After Hiding Content (revenir en haut après avoir masqué le contenu) : si vous activez cette option, l’écran remontera lorsque vous masquez le contenu d’un bloc ; cela peut être très utile lorsque le contenu est long, afin que l’utilisateur ne perde pas son point de repère.
- Closed Height (Hauteur fermée) : cette option vous 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 simplement en saisissant la valeur nécessaire dans la barre ;
- Separator height (Hauteur du séparateur) : définit la hauteur de la bande séparatrice colorée qui part du bas du bloc déplié et remonte vers le haut. Vous pouvez éclaircir la couleur avec de la transparence dans l’onglet Style. Il est même possible de la transformer en dégradé.
- Duration (Durée) : ici, vous pouvez choisir la vitesse à laquelle le bloc de contenu se repliera et se dépliera. Plus la valeur est élevée, plus le mouvement sera lent.
- Easing (Assouplissement) : il existe ici 9 types d’animation de repli et de dépliage parmi lesquels vous pouvez choisir.
3. Choisissez le contenu
Dans le bloc Content, vous pouvez ajouter du contenu statique (comme du texte, des images, des vidéos ou d’autres médias) ou l’extraire dynamiquement depuis le champ méta. En plus de cela, vous pouvez ajouter l’un des modèles disponibles dans le bloc de contenu masqué.
Pour ajouter le modèle prêt à l’emploi au bloc masqué, vous devez appuyer sur le bouton Template (Modèle) dans la ligne Content Type (Type de contenu), qui est le bouton avec l’icône en forme de feuille. Choisissez le modèle dans le menu déroulant et il sera automatiquement ajouté au bloc de contenu masqué.
4. Personnalisez le bouton
Vous pouvez personnaliser le bouton qui replie et déplie le bloc de contenu masqué dans la section Button (bouton).
- Alignment (Alignement) : vous permet de choisir où le bouton sera placé.
- Fold Icon (Icône de repli) : vous pouvez choisir l’icône des boutons de repli et de dépliage dans la bibliothèque d’icônes ou téléverser votre propre fichier SVG.
- Fold Text (Texte de repli) : saisissez ici les libellés des boutons de repli et de dépliage.
5. Personnalisez à votre goût
Il existe de nombreux réglages de design pour chaque élément dans l’onglet Style. Voici quelques exemples de ce que vous pourriez créer à l’aide du widget Unfold :
Ainsi, ces étapes simples sont tout ce que vous devez faire pour obtenir un bloc de dépliage impressionnant sur une page de votre site web.