Loop-Grids können Off-Canvas-Widgets integrieren. Zum Beispiel können Sie in einem Online-Shop ein Loop-Element erstellen, das ein Produkt und eine kurze Produktbeschreibung anzeigt. Sie können dann ein Off-Canvas-Widget verwenden, um eine Weitere Informationen-Schaltfläche zu erstellen, die beim Anklicken die vollständige Beschreibung und den Preis anzeigt.
Ein Off-Canvas-Widget zu einem Loop-Grid hinzufügen
- Erstellen Sie ein Loop-Grid und eine Vorlage. Einzelheiten finden Sie unter Ein Loop-Grid erstellen. NoteWenn Ihr Loop-Grid Produkte anzeigen soll, stellen Sie sicher, dass der Vorlagentyp auf Produkte eingestellt ist.
- Beitragsbild zur Vorlage hinzufügen.
- Produkttitel zur Vorlage hinzufügen.
- Off-Canvas-Widget zur Vorlage hinzufügen.
- Produktinhalt zum Off-Canvas-Widget hinzufügen.
- Produktpreis zum Off-Canvas-Widget hinzufügen.
- Klicken Sie auf den schattierten Bereich rechts, um auf die Off-Canvas-Widget-Optionen zuzugreifen.
- Geben Sie im Textfeld Off-Canvas-Name Erweiterte Anzeige ein.
Es gibt eine Reihe von Optionen, die Sie im Off-Canvas-Widget ändern können. Einzelheiten finden Sie unter Off-Canvas-Widget. Für dieses Beispiel verwenden wir die Standardoptionen.
- Schalten Sie im Bedienfeld den Bearbeitungsmodus auf Aus.
Dadurch kehren Sie zum normalen Bearbeitungsbildschirm zurück.
- Fügen Sie ein Schaltflächen-Widget zum Loop-Grid hinzu.
Diese Schaltfläche wird verwendet, um das Off-Canvas-Widget auszulösen. - Benennen Sie im Bedienfeld die Schaltfläche in Mehr erfahren um.
- Klicken Sie im Feld Link auf das dynamische Tag-Symbol.
- Wählen Sie Off Canvas aus dem Dropdown-Menü.
- Klicken Sie auf das Schraubenschlüssel-Symbol.
Dadurch wird das Optionsfeld geöffnet.
- Wählen Sie das Widget aus dem Dropdown-Menü. In diesem Beispiel lautet der Name des Widgets Off Canvas.
- Klicken Sie auf der Arbeitsfläche auf Speichern & Zurück.
Das Loop-Grid zeigt jetzt Beitragsbilder, Produktbilder und eine Schaltfläche „Mehr erfahren“ an, die beim Anklicken eine Produktbeschreibung und den Preis anzeigt.
