Een off canvas widget toevoegen aan een loop grid

Loop Grids kunnen Off Canvas widgets bevatten. In een online winkel kun je bijvoorbeeld een loop item maken dat een product en een korte productbeschrijving toont. Je kunt dan een Off Canvas widget gebruiken om een Meer info knop te maken die, wanneer erop geklikt wordt, de volledige beschrijving en prijs toont.

Een off canvas widget toevoegen aan een loop grid

1. Maak een loop grid en template. Voor details, zie Een loop grid bouwen.
   
   Note

   Als je loop grid producten gaat weergeven, zorg er dan voor dat het template type is ingesteld op Products.
   
   
   
2. Voeg Featured Image toe aan de template.
3. Voeg Product Title toe aan de template.
   
4. Voeg de Off Canvas widget toe aan de template.
   
5. Voeg Product Content toe aan de Off Canvas widget.
6. Voeg Product Price toe aan de Off Canvas widget.
   
7. Klik op het gekleurde gebied aan de rechterkant om toegang te krijgen tot de Off Canvas widget opties.
   
8. Voer in het tekstvak Off Canvas Name Expanded Display in.
   Er zijn verschillende opties die je kunt wijzigen in de Off Canvas widget. Voor details, zie Off Canvas widget. Voor dit voorbeeld gebruiken we de standaardopties.
   
9. Schakel in het paneel Editing mode naar Off.
   Dit brengt je terug naar het gewone bewerkingsscherm.
   
10. Voeg een Button widget toe aan de Loop Grid.
    Deze knop wordt gebruikt om de off canvas widget te activeren.
11. Hernoem de knop in het paneel naar Learn More.
    
12. Klik in het veld Link op het dynamic tag icoon.
    
13. Selecteer Off Canvas uit het dropdown menu.
    
14. Klik op het moersleutel icoon.
    Dit opent het opties venster.
    
15. Kies de widget uit het dropdown menu. In dit voorbeeld is de naam van de widget Off Canvas.
16. Klik op het canvas op Save & Back.

De Loop Grid toont nu Featured Images, Product Images en een Learn More knop die, wanneer erop geklikt wordt, een productbeschrijving en prijs toont.