​

Allgemeine Beschreibung

Der “Container Plus” ist ein vielseitiges Werkzeug zur Gestaltung von Webseitenabschnitten. Mit Version 3 wurde der Container komplett überarbeitet und bietet jetzt präzisere Einstellungen für Breite, Abstand, Höhe und Hintergrund. Innerhalb des Containers können zusätzliche Inhalte platziert und die Darstellung je nach Bedarf angepasst werden.

​

Einsatzmöglichkeiten (Inspiration)

• Hero-Sektionen: Verwende das “Container Plus” Portlet, um eindrucksvolle Hero-Sektionen mit großen Bildern oder Videos und auffälligen Botschaften zu erstellen
• Abschnittsübergänge: Nutze es, um Abschnittsübergänge auf deiner Webseite zu gestalten, die visuell ansprechend und informativ sind
• Produktpräsentation: Präsentiere Produkte oder Dienstleistungen in einem auffälligen Container mit Hintergrundvideo und beschreibendem Text

---

​

Featureübersicht:

• Präzise Dimensionen: Steuere Breite, Randabstand und Höhenverhalten des Containers unabhängig voneinander.
• Anpassbare Hintergründe: Statisches Bild, JTL- oder DZM-Parallax-Bild, Hintergrundvideo, Farbverlauf oder ganz ohne Hintergrund.
• Scroll-Animationen: Animiere den Container beim Einscrollen mit einstellbarem Typ, Dauer, Verzögerung und Wiederholung.
• Swiper Parallax: Zusätzliche Parallax-Effekte, wenn der Container in einem Swipe Content Slider eingesetzt wird.
• Responsives Design: Der Container und seine Inhalte passen sich automatisch verschiedenen Bildschirmgrößen und Gerätetypen an.

---

​

Tutorial

---

​

Settings:

​

Allgemein

Container-Breite: Legt fest, wie breit sich der Container darstellt.

• Boxed klein (Standard Container): Hat auf den meisten Bildschirmgrößen mehr Platz zum Rand und bietet so ein dokumentenähnliches Layout, was auf den meisten kleinen Bildschirmen gut funktioniert und etwas Luft zum Rand lässt.
• Boxed groß (Container Fluid XL): Richtet je nach Template seine Breite auf 1650px aus und lässt nur auf großen Bildschirmen Luft zum Rand. Der ideale Container für moderne Layouts, die auf allen Bildschirmen funktionieren.
• Fluid - volle Bildschirmbreite: Geht immer bis zum Rand und eignet sich vereinzelt als Stilmittel für randlose Slider, Heroimages oder Ähnliches. Achte hier aber auf ein Layout, welches auch auf großen Bildschirmen funktionieren muss.
• Inline Block Modus (Abstand per Layout Tab einstellen)
• Block Modus (Abstand per Layout Tab einstellen)

Abstand zum Rand Desktop (>991px): normaler Abstand oder kein Abstand. Abstand zum Rand Mobil (<=991px): normaler Abstand oder kein Abstand. Container hat relative Position: Wenn du Inhalte im Container nutzen möchtest, die sich relativ zu diesem Container positionieren sollen, gibst du dem Container mit diesem Häkchen die Eigenschaft als relativer Bezugspunkt für innenliegende Elemente zu gelten. Spielt das keine Rolle, ist die Einstellung irrelevant. Höhe (Modus): Wie soll sich die Höhe des Containers verhalten?

• Automatische Höhe
• Am Inhalt orientieren
• am übergeordneten Container orientieren
• fixe Höhe
• fixes Seitenverhältnis
• Mindesthöhe nicht unterschreiten, aber am Content orientieren
• Maximalhöhe nicht überschreiten, sonst aber am Content orientieren

Content Overflow X Achse und Content Overflow Y Achse: Legt fest, wie mit Inhalt umgegangen wird, der über die Grenzen des Containers hinausragt.

• Sichtbar
• Automatisch scrollbar
• Unsichtbar
• Scrollbereich immer sichtbar

---

​

Hintergrund

Wähle zwischen sechs Hintergrundarten. Je nach Auswahl stehen dir unterschiedliche Optionen zur Verfügung.

---

​

Animation

Animationstyp: Wähle den gewünschten Animationstyp aus (Standard: none). Dauer: Dauer der Animation (z. B. 2s). Verzögerung: Wartezeit, bis die Animation beginnt. Abstand (Pixel): Die Animation beginnt erst, wenn zwischen der Oberkante des entsprechenden Elements und der Unterkante des aktuellen Browserfensters der angegebene Scroll-Abstand in Pixeln erreicht ist. Somit lässt sich z. B. verhindern, dass eine Animation schon startet, obwohl das Element noch nicht ganz sichtbar ist. Wiederholung: Anzahl Wiederholungen.

---

​

Swiper Parallax

Swiper Parallax Effekte verwenden: Aktiviert die nachfolgenden Einstellungen. X Achsen Verschiebung und Y Achsen Verschiebung: ohne Einheit in px, alternativ als % angebbar. Skalierung: 1 = keine Veränderung, 0-1 = verkleinern, > 1 = vergrößern. Transparenz: 0-1 zulässig, 1 = keine Transparenz. Effektdauer: in ms.