Hinweis: Am 1.9.2024 hat JTL neue Editionen eingeführt, die die meisten bisherigen Einzelleistungen zu verschiedenen Paketen bündeln. Um ein reibungsloses Weiterarbeiten zu gewährleisten, wurden Bestandskunden automatisch auf die Paketkonfiguration umgestellt, die ihrem bisherigen Vertrag am besten entspricht. Die einzelnen Pakete unterscheiden sich in den Limitierungen und/oder dem Funktionsumfang. Deshalb stehen möglicherweise einige der im JTL-Guide beschriebenen Funktionen seit dem 1.9.2024 in Ihrer Edition nicht zur Verfügung. Ihre Paketkonfiguration ändern Sie in Ihrem JTL-Kundenkonto. Informieren Sie sich hier über die neuen Editionen und Pakete. In unseren FAQ finden Sie häufig gestellte Fragen zu den Tarifeditionen.
Inhalte mit dem OnPage Composer zentrieren
Ihre Aufgabe/Ausgangslage
Sie möchten mithilfe des OnPage Composers Inhalte wie Bilder oder Texte zentriert auf einer Onlineshopseite platzieren. Die Außenabstände dieser Inhalte sollen sich automatisch an die Bildschirmgröße verschiedener Endgeräte anpassen.
Allgemeine Informationen zu Außenabständen in Portlets
Die Außenabstände von Portlets sind feste Größen, d. h. die Außenabstände passen sich nicht automatisch an die Bildschirmgröße des Endgeräts an, auf dem der Onlineshop geöffnet wird. Wenn Sie als Außenabstände sehr hohe Werte eintragen, kann das z. B. dazu führen, dass auf Mobilgeräten viel Leerraum angezeigt wird. Lesen Sie die folgende Anleitung, um zentrierte und responsive Inhalte zu erstellen.
Detail: Sie können die Außenabstände von Portlets bearbeiten, indem Sie das Portlet im OnePage Composer auswählen, auf das Stift-Symbol klicken und in die Registerkarte Layout wechseln. Lesen Sie mehr zum Thema hier: Detailbeschreibung: Registerkarte Layout.
Inhalte mit dem OnPage Composer responsiv zentrieren
Es gibt zwei Möglichkeiten, um mit dem OnPage Composer Inhalte responsiv zu zentrieren.
Inhalte mit dem Container-Portlet zentrieren
Detail: Container dienen zur Gruppierung von Portlets. Wenn Sie z. B. ein Bild mit einer dazugehörigen Überschrift gruppieren möchten, legen Sie einen Container an und fügen das Bild und die dazugehörige Überschrift dem Container hinzu. Sie können dann das Bild und die dazugehörige Überschrift bequem als gebündeltes Element verschieben. Lesen Sie mehr zum Thema: Container mit dem OnPage Composer einfügen.
- Melden Sie sich im Backend von JTL-Shop an und wechseln Sie in das Frontend von JTL-Shop.
- Öffnen Sie die Seite, die Sie bearbeiten möchten, und klicken Sie auf das OnPage Composer-Symbol oben links auf der Seite, um den OnPage Composer für die Seite zu öffnen.
- Klicken Sie in der Registerkarte Portlets im Bereich Layout auf die Kachel Container und fügen Sie den Container per Drag and Drop Ihrem Onlineshop hinzu.
- Klicken Sie auf das Stift-Symbol, um das Dialogfenster Container bearbeiten zu öffnen.
- Aktivieren Sie die Checkbox Boxed Container.
Detail: Wenn Sie die Einstellung Boxed Container aktivieren, wird der gesamte Container zentriert und auf eine feste Breite begrenzt. Links und rechts neben dem Container entsteht automatisch ein Leerraum. Die genaue Größe des Containers wird anhand des verfügbaren Platzes des Endgerätes bestimmt. Der Container passt sich also automatisch an unterschiedliche Bildschirmgrößen an.
- Klicken Sie auf die Schaltfläche Speichern.
- Fügen Sie in der Registerkarte Portlets im Bereich Content per Drag and Drop Inhalte zum Container hinzu, z. B. eine Überschrift und ein Bild.
Sie haben erfolgreich einen responsiven Container mit Inhalt angelegt. Sie können diesen Container beliebig verschieben.
Inhalte mit dem Grid-Layout zentrieren
Detail: Mit dem Portlet Grid-Layout fügen Sie Spalten zu Ihrem Onlineshop hinzu, die Sie dann mit Inhalten füllen. Diese Spalten verhalten sich responsiv, d. h. die Anzeige der Spalten passt sich automatisch an unterschiedliche Bildschirmgrößen an. Lesen Sie mehr zum Thema: Grid-Layout mit dem OnPage Composer einfügen.
- Melden Sie sich im Backend von JTL-Shop an und wechseln Sie in das Frontend von JTL-Shop.
- Öffnen Sie die Seite, die Sie bearbeiten möchten, und klicken Sie auf das OnPage Composer-Symbol oben links auf der Seite, um den OnPage Composer für die Seite zu öffnen.
- Klicken Sie in der Registerkarte Portlets im Bereich Layout auf die Kachel Grid-Layout und fügen Sie das Grid-Layout per Drag and Drop Ihrem Onlineshop hinzu.
- Klicken Sie auf das Stift-Symbol, um das Dialogfenster Grid-Layout bearbeiten zu öffnen.
- Um einen Inhalt zu zentrieren, stellen Sie in der Registerkarte Allgemein im Bereich Aufteilung eine Aufteilung mit 3 Spalten ein, z. B. 3+6+3.
- Klicken Sie auf die Schaltfläche Speichern.
- Fügen Sie den gewünschten Inhalt, z. B. ein Bild, in die mittlere Spalte des Grid-Layout Portlets ein.
Sie haben erfolgreich einen Inhalt mithilfe des Grid-Layout Portlets angelegt. Da Sie die linke und die rechte Spalte leer gelassen haben, wird der Inhalt in der mittleren Spalte zentriert. Zusätzlich passt sich das Spalten-Layout automatisch an unterschiedliche Bildschirmgrößen an.