Portlet Wide Container

Stand vom 03. März 2025

Auf dieser Seite erfahren Sie alles über das Portlet "WideContainer" für den OnPage Composer im JTL-Shop.

Mit dem Portlet "WideContainer" können Sie einen flexiblen, breitflächigen Bereich auf Ihrer Seite erstellen, der als Container für andere Portlets dient. Dadurch lassen sich komplexe Layouts gestalten, indem verschiedene Inhalte wie Bilder, Texte, Slider oder Videos innerhalb des Containers angeordnet werden. Zusätzlich bietet das Portlet Hintergrundoptionen, Höhenanpassungen und Animationen, um das Design noch ansprechender zu gestalten. 

Dieses Portlet eignet sich besonders für strukturiertes Layout-Design, um Abschnitte hervorzuheben, Werbebanner zu gestalten oder visuell ansprechende Inhaltsbereiche mit mehreren Portlets zu kombinieren.

WideContainer erstellen

Schritt-für-Schritt-Anleitung:

1. Anmeldung im Backend

• Melden Sie sich im Backend Ihres JTL-Shops an und wechseln Sie anschließend ins Frontend.

2. Seite auswählen

• Öffnen Sie die Seite, die Sie bearbeiten möchten.
• Klicken Sie auf das OnPage Composer-Icon oben links auf der Seite, um den OnPage Composer zu starten.

3. Portlet hinzufügen

• Ziehen Sie das Portlet "WideContainer" an die gewünschte Stelle auf Ihrer Seite.
• Das Fenster "WideContainer bearbeiten" öffnet sich.

4. Allgemeine Einstellungen vornehmen

• Minimale Höhe (minHeightPX) festlegen

  • Geben Sie die gewünschte Mindesthöhe des Containers in Pixeln ein (z. B. 300 PX).
  • Dies bestimmt, wie viel Platz der Container auf der Seite einnimmt.

• Boxed-Container aktivieren oder deaktivieren

  • Wenn aktiviert, wird der Container auf eine feste Breite begrenzt und bleibt nicht über die gesamte Seitenbreite gestreckt.

• Hintergrundoptionen festlegen

  • Bild (image): Laden Sie ein Hintergrundbild hoch.
  • Parallax-Bild (imageParallax): Verwenden Sie einen Parallax-Effekt für den Hintergrund, der sich beim Scrollen bewegt.
  • Hintergrundvideo (backgroundVideo): Integrieren Sie ein Video als Hintergrund für den Container.
  • Kein Hintergrund (noBackground): Falls keine Hintergrundelemente gewünscht sind, aktivieren Sie diese Option.

5. Animationseinstellungen anpassen

Falls gewünscht, können Sie für den Container Animationseffekte aktivieren, um ihn dynamischer erscheinen zu lassen.

• Animationstyp auswählen

  • Wählen Sie aus verschiedenen Animationseffekten, z. B. Fade-in, Slide-in oder Zoom-Effekte.
  • Falls keine Animation gewünscht ist, bleibt die Einstellung auf none.

• Dauer der Animation einstellen

  • Definieren Sie, wie lange die Animation dauern soll (z. B. 1 Sekunde).

• Verzögerung einstellen

  • Falls die Animation erst nach einer bestimmten Wartezeit starten soll, kann hier eine Verzögerung (in Sekunden) definiert werden.

• Abstand (Pixel) für Start der Animation setzen

  • Die Animation startet erst, wenn sich der Container in einem bestimmten Abstand zur unteren Kante des Browserfensters befindet (z. B. 200 Pixel).

• Wiederholungen definieren

  • Legen Sie fest, wie oft die Animation wiederholt wird oder ob sie nur einmal abgespielt werden soll.

6. Speichern und veröffentlichen

• Sobald alle Einstellungen vorgenommen wurden, klicken Sie auf "Speichern", um die Änderungen zu übernehmen.
• Das Portlet wird nun auf der gewünschten Seite im OnPage Composer sichtbar.

Das "WideContainer" Portlet ist ein leistungsstarkes Layout-Element, das es ermöglicht, visuell beeindruckende Abschnitte in Ihrem JTL-Shop zu erstellen. Dank flexibler Einstellungen für Hintergründe, Höhenanpassungen und Animationen lässt sich das Portlet optimal für Header, Banner oder Inhaltsbereiche nutzen. 

Kontaktieren Sie uns jetzt: +49 (0)511 51518510
Oder schreiben Sie uns: info@deinconsultant.de

Oder Senden Sie uns ein Ticket: Ticket einreichen