Schnellsuche:ebay ameise worker paypal
Inhaltsverzeichnis

    Grid-Layout mit dem OnPage Composer einfügen

    Hinweis: Diese Seite bezieht sich auf JTL-Shop 5. Falls Sie noch JTL-Shop 4 verwenden, finden Sie die Dokumentation unter JTL-Shop 4.

    Ihre Aufgabe/Ausgangslage

    Sie möchten einen Teil Ihrer Seite gerne in Spalten einteilen, die sich responsiv verhalten. Dazu können Sie ein sogenanntes Grid-Layout festlegen.

    Grid-Layout einfügen

    1. Melden Sie sich im Backend von JTL-Shop an und wechseln Sie in das Frontend von JTL-Shop.
    2. Öffnen Sie die Seite, die Sie bearbeiten möchten, und klicken Sie auf das OnPage Composer-Icon oben links auf der Seite, um den OnPage Composer für die Seite zu öffnen.
    3. Ziehen Sie das Portlet Grid-Layout im OnPage Composer an eine beliebige Stelle.
    1. Klicken Sie auf das Stift-Symbol, um das Fenster Grid-Layout bearbeiten zu öffnen.
    2. Wählen Sie unter Aufteilung, wie Ihre Seite in Spalten eingeteilt sein soll. Sie haben die Möglichkeit, verschiedene vorgefertigte Layouts auszuwählen. Alternativ wählen Sie Benutzerdefiniert und geben eine eigene Aufteilung ein.
    Layout im Detail: Jede Reihe besteht aus 12 Spalteneinheiten. Geben Sie z. B. 12 ein, gibt es nur eine Spalte, 6 + 6 ergibt 2 gleich große Spalten. 9 + 3 eine Aufteilung in 3/4 und 1/4 der Seite. Auf diese Weise können Sie Ihre Seite in bis zu 12 Spalten einteilen. Hierbei ist wichtig zu beachten, dass je nach Device unterschiedliche Layouts hinterlegt werden können, insgesamt aber jedes Device die gleiche Anzahl an Spalten haben muss. Wenn Sie also z. B. möchten, dass auf einem Desktop ein Layout mit 2 gleich großen Spalten (6 + 6) verwendet wird, die Spalten aber in der mobilen Ansicht untereinander angezeigt werden, wählen Sie dort als Layout 12 + 12 (jeweils eine volle Reihe von 12 Spalteneinheiten). Sie sehen jeweils live in der Vorschau, wie Ihre aktuelle Auswahl dargestellt wird.
    1. Speichern Sie Ihre Einstellungen. Sie sehen nun auf Ihrer Seite die Spalten des neu eingefügten Grid-Layouts.
    2. Fügen Sie anschließend weitere Portlets in die jeweiligen Spalten ein, um die Inhalte der Spalten zu gestalten. Beachten Sie hierbei bitte, dass alle Inhalte der 1. Spalte in der mobilen Ansicht vor der 2. Spalte angezeigt werden. Ggf. bietet es sich also an, mehrere Grid-Layouts nacheinander einzufügen, um die Inhalte auch in der mobilen Ansicht korrekt zu strukturieren.
    3. Folgen Sie den weiteren Schritten zur Vorschau und Veröffentlichung einer bearbeiteten Seite unter Seite mit dem OnPage Composer bearbeiten.

    Registerkarte Layout

    Hintergrundfarbe: Hier können Sie eine Farbe einstellen, die im Hintergrund des Grids angezeigt wird.

    Schriftfarbe: Hier stellen Sie die Farbe der Schrift für das Grid ein. Diese Einstellung hat keine Auswirkung bei Grid-Layouts.

    Schriftgröße: Hier stellen Sie die Größe der Schrift ein. Geben Sie hier einen CSS-Wert ein, z. B. 5px, 0.5em, usw. Diese Einstellung hat keine Auswirkung bei Grid-Layouts.

    Rahmenstil/Rahmenfarbe: Hier können Sie festlegen, ob das Grid einen Rahmen haben soll und welche Farbe der Rahmen haben soll.

    Rahmenabrundung: Hier können Sie festlegen, ob der Rahmen abgerundet sein soll. Sie geben jeweils an, mit welchem Abstand zur Ecke die Abrundung starten soll. Voraussetzung ist, dass Sie einen Rahmenstil ausgewählt haben. Geben Sie hier einen CSS-Wert ein, z. B. 5px, 0.5em, usw.

    Benutzerdefinierte Klasse(n): Geben Sie hier die Klassennamen ein, die dem class-Attribut des Portlets angefügt werden sollen. Die Namen, die Sie hier vergeben, können z. B. CSS-Klassen sein, die im Theme des Templates definiert sind. Nähere Informationen finden Sie in der Entwicklerdokumentation.

    Portlet verstecken: Wählen Sie hier, ob das Portlet bei bestimmten Endgeräten ausgeblendet werden soll. Dabei steht XS für Mobiltelefone, SM für Tablets, MD für Desktop-PCs und LG für große Desktop-PCs.

    Außenabstand: Hier können Sie für jede Seite in Pixeln einstellen, wie viel Abstand das Element zum (gedachten) Rand haben soll. Das Element wird entsprechend verkleinert/verschoben.

    Rahmen: Hier können Sie für jede Seite die Größe des Rahmens in Pixeln einstellen.

    Innenabstand: Hier können Sie für jede Seite einstellen, wie viel Pixel Abstand das Element zum (gedachten) Rahmen haben soll.

    Registerkarte Animation

    Animationstyp: Hier können Sie festlegen, in welcher Art Ihr Grid animiert werden soll.

    Dauer: Hier können Sie festlegen, wie lang die gesamte Animation des Grids dauern soll.

    Verzögerung: Hier können Sie festlegen, wie viel Zeit vor der ersten und zwischen den Animationen vergehen soll.

    Abstand (Pixel): Hier legen Sie fest, wie viel Abstand zwischen der Oberkante des entsprechenden Elements und der Unterkante des Browserfensters mindestens sein muss, damit die Animation startet.

    Wiederholung: Hier legen Sie fest, wie oft die Animation insgesamt wiederholt werden soll.

    Verwandte Themen