> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dreizack-medien.de/llms.txt
> Use this file to discover all available pages before exploring further.
# Container Plus v3
# 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.
Die Vorgängerversion des Containers gilt als veraltet. Eine Dokumentation dazu findest du unter [Container Plus (DEPRECATED)](/OPC-Plus/Conatiner-Plus-DEPRECATED).
# 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.
**Hintergrundbild:** Wähle das Bild, das den Hintergrund des Containers füllen soll.
**Bild lazy laden:** Deaktiviere diese Option, wenn das Bild initial above-the-fold angezeigt wird. Wenn aktiv, wird ein Flag für lazyLoad gesetzt. Die Funktion ist abhängig von Browser und Template.
**Bild bevorzugt laden:** Aktiviere diese Option, wenn das Bild initial above-the-fold angezeigt wird. Wenn aktiv, wird versucht die Ladepriorität zu erhöhen. Die Funktion ist abhängig von Browser und Template.
**Background Sizemode:**
* Container Ausfüllen
* Einpassen in Container
* Wiederholend
**Background Ausrichtung:**
* Zentriert
* Top
* Bottom
* Left
* Right
**Hintergrundbild:** Wähle das Bild, das sich beim Scrollen leicht mitbewegen soll.
Platziere einen Container mit einem mitlaufenden Hintergrund nicht unterhalb von anderen Portlets, die ihre Höhe ändern können (z. B. Akkordeons und Registerkarten). Parallax-Hintergründe können nur bei feststehenden Seitenlayouts fehlerfrei positioniert werden.
**Bild lazy laden:** Deaktiviere diese Option, wenn das Bild initial above-the-fold angezeigt wird. Wenn aktiv, wird ein Flag für lazyLoad gesetzt. Die Funktion ist abhängig von Browser und Template.
**Bild bevorzugt laden:** Aktiviere diese Option, wenn das Bild initial above-the-fold angezeigt wird. Wenn aktiv, wird versucht die Ladepriorität zu erhöhen. Die Funktion ist abhängig von Browser und Template.
**Hintergrundbild:** Wähle das Bild, das sich beim Scrollen leicht mitbewegen soll.
Platziere einen Container mit einem mitlaufenden Hintergrund nicht unterhalb von anderen Portlets, die ihre Höhe ändern können (z. B. Akkordeons und Registerkarten). Parallax-Hintergründe können nur bei feststehenden Seitenlayouts fehlerfrei positioniert werden.
**Bild lazy laden:** Deaktiviere diese Option, wenn das Bild initial above-the-fold angezeigt wird. Wenn aktiv, wird ein Flag für lazyLoad gesetzt. Die Funktion ist abhängig von Browser und Template.
**Bild bevorzugt laden:** Aktiviere diese Option, wenn das Bild initial above-the-fold angezeigt wird. Wenn aktiv, wird versucht die Ladepriorität zu erhöhen. Die Funktion ist abhängig von Browser und Template.
**Video:** Wähle das Video, das den Hintergrund des Containers füllen soll.
**Platzhalterbild:** Wird angezeigt, solange das Video noch lädt.
**Video Ausrichtung:** z. B. Zentriert.
**Video füllt Container aus:** Streckt das Video auf die volle Containergröße.
**Transparenz:** Wert zwischen 0 und 1 mit Punkt als Dezimaltrennzeichen.
**Gradient-Typ:** z. B. Linear (gerader Verlauf).
**Winkel in Grad:** 0 = oben, 90 = rechts, 180 = unten, 270 = links.
**Farbe 1** und **Farbe 2** sind verpflichtend, **Farbe 3-5** optional (leer = aus). Zu jeder Farbe kannst du optional eine **Position** angeben (z. B. 0% bei Farbe 1, 100% bei Farbe 2).
Der Container wird ohne Hintergrund ausgespielt.
***
## 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
Diese Einstellungen sind nur wirksam mit dem Swipe Content Slider, wenn du den Parallax Effekt aktiviert hast.
**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.
Für weitere Einstellungen findest du im Portlet selbst noch die Tabs **Layout** und **Dokumentation & Hilfe**.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.
