Les grilles de boucle peuvent incorporer des widgets Off Canvas. Par exemple, dans une boutique en ligne, vous pouvez créer un élément de boucle qui affiche un produit et une courte description du produit. Vous pouvez ensuite utiliser un widget Off Canvas pour créer un bouton Plus d’infos qui, lorsqu’il est cliqué, affichera la description complète et le prix.
Ajouter un widget off canvas à une grille de boucle
- Créez une grille de boucle et un modèle. Pour plus de détails, voir Construire une grille de boucle. NoteSi votre grille de boucle affiche des produits, assurez-vous que le type de modèle est défini sur Produits.
- Ajoutez Image mise en avant au modèle.
- Ajoutez Titre du produit au modèle.
- Ajoutez le widget Off Canvas au modèle.
- Ajoutez Contenu du produit au widget Off Canvas.
- Ajoutez Prix du produit au widget Off Canvas.
- Cliquez sur la zone ombrée à droite pour accéder aux options du widget Off Canvas.
- Dans la zone de texte Nom Off Canvas, saisissez Affichage étendu.
Il y a plusieurs options que vous pouvez modifier dans le widget Off Canvas. Pour plus de détails, voir Widget Off Canvas. Pour cet exemple, nous utiliserons les options par défaut.
- Dans le panneau, basculez le Mode d’édition sur Désactivé.
Cela vous ramène à l’écran d’édition habituel.
- Ajoutez un Widget bouton à la grille de boucle.
Ce bouton est utilisé pour déclencher le widget off canvas. - Dans le panneau, renommez le bouton En savoir plus.
- Dans le champ Lien, cliquez sur l’icône d’étiquette dynamique.
- Sélectionnez Off Canvas dans le menu déroulant.
- Cliquez sur l’icône clé à molette.
Cela ouvre la boîte d’options.
- Choisissez le widget dans le menu déroulant. Dans cet exemple, le nom du widget est Off Canvas.
- Sur le canevas, cliquez sur Enregistrer et retour.
La grille de boucle affiche maintenant les images mises en avant, les images de produits et un bouton En savoir plus qui, lorsqu’il est cliqué, révèle une description du produit et un prix.
