Der Layoutbereich ist das zentrale Element für den Aufbau und die Struktur jeder Seite. Mit ihm legen Sie fest, wie Inhalte angeordnet, gestaltet und dargestellt werden.
Innerhalb eines Layoutbereichs können Inhalte in Spalten organisiert und mit weiteren Modulen wie Texten, Bildern, Medien oder Buttons gefüllt werden. Zusätzlich stehen umfangreiche Einstellmöglichkeiten für Abstände, Farben, Hintergründe, Animationen, Responsive-Verhalten und Sichtrechte zur Verfügung.
Der Layoutbereich dient somit als flexibler Container, mit dem sich einfache Inhalte ebenso wie komplexe Seitenlayouts übersichtlich und strukturiert umsetzen lassen.
Der Layoutbereich
Allgemeines
Spalten, Layout und Abstände
Farbe und Hintergrund
Verlinkung
Animationen
Spezielle Einstellungen
Responsive
Der Layoutbereich als Grundlage jeder Seite
Alle Bearbeitungsschritte können Sie mit STRG + SHIFT + Z rückgängig machen.
So fügen Sie einen Layoutbereich ein
Per Drag & Drog aus der Toolbar
Direkte Zuweisung per drag&drop aus der Toolbar.
Über die rechte Maustaste im gewünschten Bereich
Zuweisung über rechte Maustaste im gewünschten Bereich
Kopierten Text einfügen
Sie können einen kopierten Text (oder Link) mit dem Shortcut STRG + V in einen Layoutbereich einfügen. Es öffent sich ein kleines Fenster, mit dem Sie den Text als Überschrift, oder Fließtext einfügen können.
Darstellung der Layoutbereiche
Rahmen
Aktivierte Rahmen zeigen blaue gestrichelte Linien zur besseren Orientierung im Layout. Sie sind nur im Bearbeitungsmodus sichtbar und erscheinen nicht auf der Website.
Aktivierte Rahmen zeigen blaue gestrichelte Linien zur besseren Orientierung im Layout. Sie sind nur im Bearbeitungsmodus sichtbar und erscheinen nicht auf der Website.
Maßeinheiten im Layoutbereich verstehen
Der Layoutbereich passt sich standardmäßig automatisch an den enthaltenen Inhalt an.
Alternativ können Sie Breiten oder Höhen gezielt definieren, zum Beispiel um gleich hohe Layoutbereiche oder klar strukturierte Abschnitte zu erzeugen.
Für Maßangaben stehen Ihnen verschiedene Einheiten zur Verfügung.
Alternativ können Sie Breiten oder Höhen gezielt definieren, zum Beispiel um gleich hohe Layoutbereiche oder klar strukturierte Abschnitte zu erzeugen.
Für Maßangaben stehen Ihnen verschiedene Einheiten zur Verfügung.
- Pixel (px)
Pixel sind feste, absolute Einheiten und ändern sich nicht mit der Bildschirmgröße.
Alle weiteren Einheiten sind relative Angaben und reagieren flexibel auf Bildschirm- oder Schriftgröße, was besonders für responsive Layouts sinnvoll ist.
- EM
Bezieht sich auf die Schriftgröße des übergeordneten Elements.
- REM
Bezieht sich auf die globale Schriftgröße der Website, z. B. aus den Seiteneinstellungen.
- VW (Viewport-Width) und VH (Viewport-Height)
Orientieren sich an der Breite bzw. Höhe des Browserfensters.
- VMIN und VMAX
Ermöglichen Größenangaben abhängig vom Seitenverhältnis des Bildschirms.
Layoutbereich als Popup verfügbar machen
1. Erstellen Sie einen Layoutbereich, mit Inhalt (Infotexte, Fotos,...) den Sie als Popup anzeigen wollen. Diesen Layoutbereich können Sie direkt auf der Seite des späteren Popup Buttons anlegen, oder eine extra-Unterseite dafür erstellen (und Sichtbarkeit abschalten).
2. Diesen Layoutbereich bearbeiten Sie und gehen auf den Reiter "Spezielle Einstellungen". Hier gebe Sie dem Layoutbereich eine eindeutige Überschrift (z. B. "Unsere Leitwerte"). Dann wechseln Sie direkt darunter von "Normales Verhalten" zu "Als Popup verfügbar machen". Anschließend speichern und schließen.
3. Gehen Sie auf die Seite wo das Popup erscheinen soll und platzieren Sie dort einen Button.
2. Diesen Layoutbereich bearbeiten Sie und gehen auf den Reiter "Spezielle Einstellungen". Hier gebe Sie dem Layoutbereich eine eindeutige Überschrift (z. B. "Unsere Leitwerte"). Dann wechseln Sie direkt darunter von "Normales Verhalten" zu "Als Popup verfügbar machen". Anschließend speichern und schließen.
3. Gehen Sie auf die Seite wo das Popup erscheinen soll und platzieren Sie dort einen Button.
4. Geben Sie dem Button einen Buttontext (z. B. "Leitwerte")
5. Wählen Sie bei Verwendung die Option "Popup öffnen" und wählen das gewünschte Popup, den zuvor erstellten Layoutbereich (im Beispiel "Unsere Leitwerte") aus.
5. Wählen Sie bei Verwendung die Option "Popup öffnen" und wählen das gewünschte Popup, den zuvor erstellten Layoutbereich (im Beispiel "Unsere Leitwerte") aus.
Den Layoutbereich bearbeiten
Nachdem Sie das Modul "Layoutbereich" an der gewünschten Stelle eingesetzt haben, können Sie weitere Einstellungen vornehmen.
Verlinkung
In diesem Bereich legen Sie fest, ob der Layoutbereich eine zusätzliche Funktion erhalten soll. Standardmäßig ist keine besondere Verwendung aktiv.
Verwendung
- Keine
Der Layoutbereich verhält sich ganz normal und hat keine zusätzliche Funktion.
- Link
Der gesamte Layoutbereich wird klickbar und führt zu einer internen oder externen Seite.
- JavaScript
Beim Anklicken des Layoutbereichs wird eine hinterlegte JavaScript-Funktion ausgeführt. (Nur für Entwickler relevant.)
- Popup öffnen
Der Layoutbereich öffnet beim Anklicken ein zuvor definiertes Popup, z. B. für Formulare oder Zusatzinformationen.
Spalten, Layout und Abstände
In diesem Bereich legen Sie die Grundstruktur des Layoutbereichs fest. Dazu gehören Spaltenaufteilung, Breite und Höhe des Bereichs sowie die Ausrichtung und Abstände der Inhalte.
Spaltenanzahl, Spaltenzwischenraum & Spaltendesign
Ein Layoutbereich kann aus bis zu 12 Spalten bestehen. Die Breite jeder einzelnen Spalte kann dabei individuell festgelegt werden.
Alternativ können Sie ein vordefiniertes Spaltendesign auswählen. Die Vorschauen zeigen verschiedene Spaltenaufteilungen (z. B. 50/50, 30/70 oder mehrspaltige Layouts).
Hinweis: Beim Auswählen eines Spaltendesigns wird das aktuell eingestellte Layout ersetzt.
Hinweis: Beim Auswählen eines Spaltendesigns wird das aktuell eingestellte Layout ersetzt.
Der Spaltenzwischenraum definiert den Abstand zwischen den Spalten und lässt sich pro Layoutbereich individuell einstellen, sodass Layouts je nach Inhalt kompakter oder luftiger wirken.
Breite des Layoutbereichsinhalts
Hier legen Sie fest, wie breit der Inhalt des Layoutbereichs dargestellt wird. Sie können wählen, ob der Inhalt über die gesamte Seitenbreite oder innerhalb der Layoutgrenze (Wrapper) angezeigt werden soll.
Optional lässt sich zusätzlich eine maximale Breite definieren. Dadurch verhindern Sie, dass Inhalte auf sehr großen Bildschirmen zu breit dargestellt werden. Die Breite kann in verschiedenen Einheiten angegeben werden.
Höhe des Layoutbereichs
Hier legen Sie fest, wie sich die Höhe des Layoutbereichs verhält.
Standardmäßig ist die Höhe auf Automatisch eingestellt. In diesem Fall passt sich der Layoutbereich flexibel an den enthaltenen Inhalt an.
Alternativ stehen weitere Optionen zur Verfügung:
Standardmäßig ist die Höhe auf Automatisch eingestellt. In diesem Fall passt sich der Layoutbereich flexibel an den enthaltenen Inhalt an.
Alternativ stehen weitere Optionen zur Verfügung:
- Anpassung an die Eltern-Spalte:
Die Höhe richtet sich nach der übergeordneten Spalte.
- Mindestens / Maximal:
Definiert eine minimale oder maximale Höhe.
- Genau:
Erzwingt eine feste Höhe.
- Festes Seitenverhältnis:
Legt ein konstantes Verhältnis von Breite zu Höhe fest, z. B. für Bild- oder Teaserbereiche.
Diese Einstellungen eignen sich besonders, um gleich hohe Layoutbereiche oder bildschirmfüllende Abschnitte zu erstellen.
Innenabstände des Layoutbereichs
Hier legen Sie den inneren Abstand zwischen dem Inhalt und dem Rand des Layoutbereichs fest.
Standardmäßig gilt der eingestellte Abstand für alle Seiten. Aktivieren Sie die Option „unterschiedliche Abstände verwenden“, können Sie die Abstände oben, unten, links und rechts separat definieren.
Die Abstände lassen sich in verschiedenen Maßeinheiten festlegen und helfen dabei, Inhalte optisch sauber vom Rand abzusetzen und besser lesbar zu machen.
Standardmäßig gilt der eingestellte Abstand für alle Seiten. Aktivieren Sie die Option „unterschiedliche Abstände verwenden“, können Sie die Abstände oben, unten, links und rechts separat definieren.
Die Abstände lassen sich in verschiedenen Maßeinheiten festlegen und helfen dabei, Inhalte optisch sauber vom Rand abzusetzen und besser lesbar zu machen.
Beispiel:
Innenabstand rundherum 0 vmin
Innenabstand rundherum 5 vmin
Ausrichtung der Spalteninhalte
In diesem Bereich legen Sie fest, wie Inhalte innerhalb einer Spalte ausgerichtet werden – horizontal und vertikal.
Die Ausrichtung kann für alle Spalten gemeinsam gesetzt werden.
Aktivieren Sie „unterschiedliche Ausrichtungen verwenden“, lassen sich die Einstellungen pro Spalte individuell festlegen (z. B. links in Spalte 1, zentriert in Spalte 2).
Die Ausrichtung kann für alle Spalten gemeinsam gesetzt werden.
Aktivieren Sie „unterschiedliche Ausrichtungen verwenden“, lassen sich die Einstellungen pro Spalte individuell festlegen (z. B. links in Spalte 1, zentriert in Spalte 2).
Horizontale Ausrichtung bestimmt, ob Inhalte links, zentriert oder rechts stehen.
Vertikale Ausrichtung legt fest, ob Inhalte oben, mittig, unten positioniert werden oder sich gleichmäßig verteilen (z. B. für gleich hohe Abstände in Teaser-Spalten).
So können Sie Layouts gezielt strukturieren und Inhalte optisch sauber ausrichten.
CSS-Klassen
Hier können Sie dem Layoutbereich eine CSS-Klasse zuweisen. Das ist vor allem für individuelle Gestaltungen per CSS gedacht und richtet sich in erster Linie an Entwickler. Für die normale Pflege ist keine Auswahl notwendig.
Abstand unterhalb des Layoutbereichs
Mit dieser Einstellung bestimmen Sie den vertikalen Abstand zum folgenden Layoutbereich. So lassen sich Bereiche optisch voneinander trennen oder bewusst enger zusammenziehen. Der Abstand kann – wie gewohnt – in verschiedenen Maßeinheiten (z. B. vmin, px) festgelegt werden.
Farbe und Hintergrund
In diesem Bereich gestalten Sie das optische Erscheinungsbild des Layoutbereichs. Sie legen hier Textfarben fest, können Spalten optisch mit Rahmen oder Schatten hervorheben und dem Layoutbereich einen Hintergrund in Form von Farbe, Bild, Bildslider oder Video zuweisen. So lassen sich Inhalte klar strukturieren und visuell voneinander abgrenzen.
Textfarbe
Hier legen Sie fest, welche Farbe der Text innerhalb des Layoutbereichs verwendet. Die verfügbaren Farben stammen aus dem zuvor definierten Branding Ihrer Website.
Spaltenrahmen
Optional können Sie den Layoutbereich mit einem farbigen Rahmen versehen. Die Rahmenfarbe wählen Sie bequem über das Dropdown-Menü. So lassen sich Bereiche optisch klar voneinander abgrenzen.
Schatten
Mit dieser Option können Sie dem Layoutbereich einen Schatteneffekt hinzufügen, um ihn visuell hervorzuheben.
Hintergrundgestaltung
Farbe
Definiert die Hintergrundfarbe des Layoutbereichs. Auch hier stehen ausschließlich die im Branding hinterlegten Farben zur Verfügung. Die gewählte Hintergrundfarbe wird grundsätzlich auch bei anderen Hintergrundarten verwendet.
Bild
Fügen Sie ein Bild aus dem Mediapool als Hintergrund ein und legen Sie fest, wie es dargestellt werden soll. Wirkt das Bild zu schmal oder verzerrt, prüfen Sie bitte die Höhe des Layoutbereichs.
Mit „Füllend (beschnitten)“ wird der gesamte Bereich ausgefüllt, das Bild kann dabei an den Rändern zugeschnitten werden. Alternativ können Sie das Bild mit festen Breiten- oder Höhenwerten (z. B. 100 %, 75 %, 50 %) anzeigen lassen.
Zusätzlich bestimmen Sie über die weiteren Dropdowns die horizontale und vertikale Ausrichtung des Bildes, z. B. zentriert.
Zusätzlich bestimmen Sie über die weiteren Dropdowns die horizontale und vertikale Ausrichtung des Bildes, z. B. zentriert.
Bildslider
Mit mehreren Bildern können Sie einen Hintergrund-Slider erstellen. Animationsart und -dauer lassen sich individuell einstellen.
Video
Hier können Sie ein Video aus dem Mediapool als Hintergrund verwenden. Zusätzlich legen Sie fest, ob das Video einmalig oder in einer Endlosschleife abgespielt wird.
Bitte beachten Sie dabei stets die geltenden Bild- und Videorechte inklusive korrekter Quellenangaben.
Bitte beachten Sie dabei stets die geltenden Bild- und Videorechte inklusive korrekter Quellenangaben.
Spezielle Einstellungen
In diesem Register legen Sie besondere Eigenschaften und Verhaltensweisen für den Layoutbereich fest. Die meisten Optionen sind optional und werden nur in speziellen Anwendungsfällen benötigt. Für Standard-Layouts reicht meist das normale Verhalten aus.
Anzeigeverhalten (Überschrift)
Hier können Sie optional eine Überschrift für den Layoutbereich vergeben. Diese kann, je nach Einstellung, auch für weitere Funktionen (z. B. aufklappbare Bereiche) verwendet werden.
Hier legen Sie fest, wie sich der Layoutbereich grundsätzlich verhält:
Normales Verhalten
Der Layoutbereich wird ganz normal im Seitenfluss angezeigt.
Als Popup verfügbar machen
Der Layoutbereich kann als Popup geöffnet werden (z. B. über einen Button oder Link).
Navigationsmodul-basiertes Einblenden
Der Bereich wird erst angezeigt, wenn er über ein Navigationsmodul angesprochen wird.
Als Footer verwenden
Der Layoutbereich wird als Footer (
Der Layoutbereich wird ganz normal im Seitenfluss angezeigt.
Als Popup verfügbar machen
Der Layoutbereich kann als Popup geöffnet werden (z. B. über einen Button oder Link).
Navigationsmodul-basiertes Einblenden
Der Bereich wird erst angezeigt, wenn er über ein Navigationsmodul angesprochen wird.
Als Footer verwenden
Der Layoutbereich wird als Footer (
Element-ID (für Fortgeschrittene)
Element-ID
Vergibt eine eindeutige Kennung für den Layoutbereich. Diese wird z. B. für Anker-Verlinkungen, CSS oder JavaScript benötigt (relevant für Entwickler).
Vergibt eine eindeutige Kennung für den Layoutbereich. Diese wird z. B. für Anker-Verlinkungen, CSS oder JavaScript benötigt (relevant für Entwickler).
Sticky Verhalten
Mit dieser Option bleibt der Layoutbereich beim Scrollen sichtbar.
Sticky Verhalten aktivieren
Der Bereich „klebt“ am oberen Rand des Browserfensters.
Top für Sticky
Legt den Abstand zum oberen Fensterrand fest (z. B. unterhalb einer festen Navigation).
Sticky Verhalten aktivieren
Der Bereich „klebt“ am oberen Rand des Browserfensters.
Top für Sticky
Legt den Abstand zum oberen Fensterrand fest (z. B. unterhalb einer festen Navigation).
Schrift-Skalierungsfaktor
Hier können Sie die Schriftgröße relativ für den gesamten Layoutbereich anpassen.
Weitere Einstellungen
Spiegelbarer Layoutbereich
Ermöglicht das Spiegeln des Layouts (z. B. für wechselnde Bild-Text-Anordnungen).
Layoutbereich ausblenden, wenn Kind-Layoutbereich keinen Inhalt hat
Verhindert leere Bereiche auf der Seite.
Als Slide verfügbar machen
Der Layoutbereich kann Teil eines Sliders werden.
Ermöglicht das Spiegeln des Layouts (z. B. für wechselnde Bild-Text-Anordnungen).
Layoutbereich ausblenden, wenn Kind-Layoutbereich keinen Inhalt hat
Verhindert leere Bereiche auf der Seite.
Als Slide verfügbar machen
Der Layoutbereich kann Teil eines Sliders werden.
Name des Containers
Vergibt eine eindeutige Kennung für den Layoutbereich. Diese wird z. B. für Anker-Verlinkungen, CSS oder JavaScript benötigt (relevant für Entwickler).
Responsive
Hier stellen Sie das Anzeigeverhalten einzelner Layoutbereiche auf verschiedenen Displaygrößen (Endgeräten) ein. Das CMS sorgt generell dafür, dass Ihre Seite responsiv reagiert, doch gibt es Fälle, an denen es Sinn ergibt, die Ausgabe auf dem Handy/Tablet zu optimieren. Je nach Auflösung können verschiedene Ausgaben eingestellt werden.
Breakpoints (Auflösungen)
Über das Dropdown wählen Sie den gewünschten Auflösungs-Breakpoint aus, z. B. Desktop, Laptop, Tablet oder Smartphone. Für jede dieser Größen lassen sich individuelle Einstellungen vornehmen.
Anzeigeverhalten
Pro Breakpoint bestimmen Sie, wie sich der Layoutbereich verhält.
Layoutbereich ist sichtbar
der Bereich wird normal angezeigt
Layoutbereich anpinnen
der Bereich bleibt beim Scrollen fixiert
Layoutbereich verbergen
der Bereich wird auf dieser Auflösung nicht angezeigt
der Bereich wird normal angezeigt
Layoutbereich anpinnen
der Bereich bleibt beim Scrollen fixiert
Layoutbereich verbergen
der Bereich wird auf dieser Auflösung nicht angezeigt
Spaltenbreite und Reihenfolge
Innerhalb eines Breakpoints können Sie die Breite einzelner Spalten in Prozent festlegen. Zusätzlich lassen sich Spalten per Drag & Drop neu anordnen, um die Reihenfolge für kleinere Bildschirme zu optimieren.
Weitere Breakpoints hinzufügen
Über „Ein weiteres Verhalten hinzufügen“ können Sie zusätzliche Auflösungen definieren und so das Layout schrittweise für verschiedene Endgeräte optimieren.
Hinweis:
Nicht jeder Layoutbereich benötigt responsive Sonderregeln. Nutzen Sie diese Einstellungen gezielt dort, wo Inhalte auf kleineren Bildschirmen anders dargestellt oder ausgeblendet werden sollen.
Hinweis:
Nicht jeder Layoutbereich benötigt responsive Sonderregeln. Nutzen Sie diese Einstellungen gezielt dort, wo Inhalte auf kleineren Bildschirmen anders dargestellt oder ausgeblendet werden sollen.
Sichtrechte
In diesem Bereich steuern Sie, wann, wo und für wen ein Layoutbereich sichtbar ist. So können Inhalte gezielt ein- oder ausgeblendet werden, abhängig von Nutzergruppen, Sprache, Endgerät, Seite oder Zeitraum.
Benutzergruppen
Hier können Sie festlegen, dass ein Layoutbereich nur für bestimmte Benutzergruppen sichtbar ist (z. B. interne Nutzer). Ohne Auswahl ist der Bereich für alle sichtbar.
Sprachen
Beschränken Sie die Anzeige auf bestimmte Sprachen. Der Layoutbereich wird dann nur angezeigt, wenn die jeweilige Sprachversion aktiv ist.
Sichtbar im Seitenpfad
Der Layoutbereich wird nur angezeigt, wenn sich die aktuelle Seite im Pfad einer ausgewählten Seite befindet. Diese Option ist besonders hilfreich für Footer, Templates oder gespiegelte Layoutbereiche. Optional kann die Anzeige auf Unterseiten beschränkt werden.
Sichtbarkeit nach URL-Parametern
Der Layoutbereich erscheint nur, wenn definierte Parameter in der URL vorhanden sind (z. B. für Kampagnen oder personalisierte Inhalte). Mehrere Parameter können kommasepariert angegeben werden.
Sichtbarkeit in der APP
Hier legen Sie fest, ob der Layoutbereich ohne Einschränkungen sichtbar ist, ausschließlich in der App angezeigt wird oder in der App ausgeblendet bleibt. So können Inhalte gezielt für die Web- oder App-Ansicht gesteuert werden.
Zeitbasierte Sichtbarkeit
Sie können Inhalte zeitlich steuern:
Kalenderzeitraum
Anzeige nur zwischen bestimmten Daten.
Tageszeitraum
Anzeige nur zu bestimmten Uhrzeiten.
Beide Optionen lassen sich kombinieren, um Inhalte sehr gezielt auszuspielen (z. B. Angebote, saisonale Grüße, Informationen, Aktionen oder Hinweise).
Hinweis:
Ohne Einschränkungen ist ein Layoutbereich immer sichtbar. Sichtrechte eignen sich besonders für zeitlich begrenzte Inhalte, personalisierte Ausgaben oder app-spezifische Elemente.
Kalenderzeitraum
Anzeige nur zwischen bestimmten Daten.
Tageszeitraum
Anzeige nur zu bestimmten Uhrzeiten.
Beide Optionen lassen sich kombinieren, um Inhalte sehr gezielt auszuspielen (z. B. Angebote, saisonale Grüße, Informationen, Aktionen oder Hinweise).
Hinweis:
Ohne Einschränkungen ist ein Layoutbereich immer sichtbar. Sichtrechte eignen sich besonders für zeitlich begrenzte Inhalte, personalisierte Ausgaben oder app-spezifische Elemente.
Animationen
Im Register Animationen steuern Sie, wie und wann ein Layoutbereich oder dessen Spalten beim Scrollen sichtbar werden. Animationen können Inhalte dezent hervorheben und für mehr Dynamik sorgen, sparsam eingesetzt wirken sie am besten.
Layoutbereich animieren
Hier wird die Animation für den gesamten Layoutbereich aktiviert. Alternativ können Animationen auch nur für einzelne Spalten gesetzt werden.
Animation für den Hauptcontainer/Spaltenanimation
Wählen Sie aus vordefinierten Effekten wie Einblenden (Fade), Vergrößern/Verkleinern (Zoom) oder Eindrehen (Flip). Die Richtung bestimmt, aus welcher Seite oder Position die Animation startet.
Verzögerung & Animationsdauer
Mit der Verzögerung legen Sie fest, wann die Animation beginnt (in ms). Die Animationsdauer bestimmt, wie lange der Effekt läuft.
Animationstyp (Easing)
Der Animationstyp steuert die Bewegungskurve, z. B. gleichmäßig (ease), weich ein- oder auslaufend (ease-in/ease-out). Das beeinflusst, wie „ruhig“ oder „dynamisch“ die Animation wirkt. Hier können Sie sich Beispiele ansehen.
Der Animationstyp bestimmt, wie sanft oder dynamisch eine Animation abläuft. Standardmäßig ist „ease“ ausgewählt, diese Einstellung sorgt für einen gleichmäßigen, natürlichen Start und Abschluss der Bewegung.
Weitere Varianten wie ease-in, ease-out oder ease-in-out steuern, ob die Animation eher langsam startet, langsam endet oder beides kombiniert. Erweiterte Typen wie quad, cubic, quart oder sine verändern die Bewegungscharakteristik und eignen sich für feinere oder stärkere Effekte.
Tipp: Für die meisten Layouts reicht „ease“ oder „ease-in-out“ völlig aus. Aufwändigere Animationstypen sollten sparsam eingesetzt werden, um die Seite ruhig und professionell wirken zu lassen.
Weitere Varianten wie ease-in, ease-out oder ease-in-out steuern, ob die Animation eher langsam startet, langsam endet oder beides kombiniert. Erweiterte Typen wie quad, cubic, quart oder sine verändern die Bewegungscharakteristik und eignen sich für feinere oder stärkere Effekte.
Tipp: Für die meisten Layouts reicht „ease“ oder „ease-in-out“ völlig aus. Aufwändigere Animationstypen sollten sparsam eingesetzt werden, um die Seite ruhig und professionell wirken zu lassen.
Offset
Bestimmt, wie weit der Layoutbereich bereits im Sichtbereich sein muss, bevor die Animation ausgelöst wird.
Ankerplatzierung
Mit der Ankerplatzierung legen Sie fest, wie und aus welcher Richtung eine Animation im Layoutbereich wirkt. Dabei wird definiert, wo die Animation beginnt und wo sie endet. Die Angaben top, center und bottom beziehen sich auf die vertikale Position innerhalb des Layoutbereichs. Die Animation bewegt sich von der ersten zur zweiten Position.
Beispiele:
top-bottom: Das Element erscheint von oben und bewegt sich nach unten.
center-center: Das Element bleibt zentriert, ideal für sanfte Einblendungen ohne Bewegung.
bottom-top: Das Element erscheint von unten und bewegt sich nach oben.
Beispiele:
top-bottom: Das Element erscheint von oben und bewegt sich nach unten.
center-center: Das Element bleibt zentriert, ideal für sanfte Einblendungen ohne Bewegung.
bottom-top: Das Element erscheint von unten und bewegt sich nach oben.
Tipp:
Für dezente Animationen empfehlen sich top-bottom oder center-center, da sie ruhig wirken und den Inhalt nicht ablenken.
Für dezente Animationen empfehlen sich top-bottom oder center-center, da sie ruhig wirken und den Inhalt nicht ablenken.
Animation wiederholen
Legt fest, ob die Animation nur einmal oder bei erneutem Scrollen wiederholt abgespielt wird.
Unterschiedliche Animationen verwenden
Ermöglicht es, einzelnen Spalten unterschiedliche Animationen zuzuweisen.
Hinweis: Dezente Animationen verbessern die Nutzerführung. Zu viele oder zu auffällige Effekte können schnell unruhig wirken.
Hinweis: Dezente Animationen verbessern die Nutzerführung. Zu viele oder zu auffällige Effekte können schnell unruhig wirken.