Chapter

Mit dem Chapter können Sie auf einer Seite Ihrer Website einzelne Bereiche definieren, in denen individuelle Designs hinterlegt werden können und so einzelne Kapitel erstellt werden können. Zur Auswahl stehen Hintergrund- und Schriftfarbe, Parallax-Effekt und jede hinterlegte CSS-Klasse.

Beispielansicht Anleitung Verhalten

Beispielansicht

Chapter mit veränderter Hintergrundfarbe und Schriftfarbe

Dieses Beispiel zeigt, dass die Hintergrundfarbe des einzelnen Chapters in der Primärfarbe definiert ist und nicht – wie sonst für die Website von toujou üblich – in weiß.

Als Schriftfarbe für den Text ist die Hintergrundfarbe gewählt, die mit weiß für die Website definiert ist. So ergibt sich für diesen Text eine weiße Schriftfarbe auf blauem Hintergrund. Die Headline bleibt davon unberührt.

Natürlich lassen sich noch viele weitere Optionen nutzen. Wie sich dies ganz leicht und ohne Programmierkenntnisse umsetzen lässt, lesen Sie in den einzelnen Schritten der Anleitung.

Chapter mit Parallax

Anleitung

Element wählen

Um ein neues Element zu wählen, klicken Sie zunächst auf +Inhalt und wählen Sie den Reiter Text aus.
Klicken Sie auf das Icon Start of a Chapter.

Individuelle Styles wählen

Im Reiter Content definieren Sie im Bereich Benutzerdefinierte Chapter CSS-Klassen die CSS-Klassen (samt Erscheinungsbild der Elemente), die für diesen Seiten-Abschnitt greifen sollen.
Klicken Sie hierfür auf das Dropdown-Menü rechts und wählen Sie die hinterlegte(n) Klasse(n) aus.
Hinweis: Vor dem Gebrauch müssen die CSS-Klassen definiert und aktiviert werden. Bitte kontaktieren Sie hierfür das Support-Team.

Farben definieren

Im Bereich Chapter Hintergrundfarbe finden Sie verschiedene Optionen für die Hintergrundfarbe des gesamten Chapters. Klicken Sie zur Auswahl auf das Dropdown-Menü.
In Chapter Schriftfarbe wählen Sie eine für das Chapter gewünschte Schriftfarbe. Auch hier klicken Sie zur Auswahl auf das Dropdown-Menü.
Die angezeigte Auswahl in beiden Dropdown-Menüs referenziert auf die in den Color Settings hinterlegten Farben.

Höhe und Position festlegen

Im Bereich Chapter Mindesthöhe definieren Sie über das Dropdown-Menü die gewünschte Größe des Chapters. Die Bezeichnungen orientieren sich an der Bildschirmgröße.
Unter Chapter Vertikal Position legen Sie im Dropdown-Menü fest, wo der Inhalt des Chapters dargestellt wird. Default / Standard ist eine mittige Ausrichtung. Für die Darstellung im Frontend darf hierbei unter Mindesthöhe als Option nicht auto ausgewählt sein.
Beachten Sie, dass für beide Anwendungsfälle im Bereich Hintergrundfarbe nicht default als Option ausgewählt sein darf.

Parallax-Effekt erstellen

Laden Sie im Bereich Chapter Hintergrundmedium ein Medium hoch via Klick auf Mediendatei hinzufügen, Dateien auswählen und hochladen oder Medien nach URL hinzufügen.
Im Dropdown-Menü zum Scrollverhalten wählen Sie fix für das Parallax-Verhalten aus. Ist das Scrollverhalten auf scroll eingestellt, läuft das Hintergrundmedium des Chapter beim Scrollen mit ohne Parallax-Effekt.
Hinweis: Ist im Chapter nur ein Hintergrundmedium und keine weiteren Elemente angelegt, darf zur Anzeige des Parallax-Effekt die Mindesthöhe für das Chapter nicht mit auto definiert sein.

Padding festlegen

Passen Sie den Abstand zwischen dem oberen Rand des Chapters und dem Inhalt des Chapters individuell an.
Wählen Sie hierfür bei Padding oben und Padding unten jeweils im Dropdown-Menü die gewünschte Option aus. Zur Auswahl stehen: default, kein padding, XS, S, Base, M, L, XL.
Voreingestellt ist mit default der Wert, bei dem kein Padding hinterlegt ist.

Margin festlegen

Passen Sie den Abstand vor dem oberen Rand des Chapters individuell an.
Wählen Sie hierfür bei Margin oben und Margin unten jeweils im Dropdown-Menü die gewünschte Option aus. Zur Auswahl stehen: default, kein margin, XS, S, Base, M, L, XL.
Voreingestellt ist mit default der Wert, bei dem kein Margin hinterlegt ist.

Verhalten, Tipps und Tricks

Das Chapter Element kann als Kapitel einer Seite bezeichnet werden, in dem eigene CSS-Klassen hinterlegt werden können. Diese Anpassungen sind dann für den entsprechenden Bereich gültig und ermöglichen dort eine detaillierte Individualisierung auf einer Seite. Ein Chapter endet automatisch mit dem Start eines neuen Chapters im Backend.

Besonderheiten: Bei den verschiedenen Individualisierungsmöglichkeiten sind folgende Kausalitäten zu beachten: Einstellungen im Bereich Chapter Vertikal Position greifen nur dann im Frontend, wenn bei Chapter Mindesthöhe als Option nicht der Standardwert auto ausgewählt ist. Die Einstellungen unter Chapter Vertikal Position und Chapter Mindesthöhe greifen nur, wenn unter Chapter Hintergrundfarbe als Option nicht default ausgewählt wurde. Die Einstellungen unter Padding und Margin sollten nur für Profis genutzt werden.

Je Seite sollte jedes Chapter ein eigenen Namen besitzen. Versehen Sie daher jedes Chapter mit einem eigenen Namen.

Für die Nutzung der automatischen Inpage Navigation sind Chapter unerlässlich, da diese als Referenz dienen. Geben Sie hierfür den Chaptern auch den jeweiligen Namen, der in der Inpage Navigation und damit im Frontend erscheinen soll.

Chapter im Footer einer Website haben keine Auswirkung auf das Frontend. Hier sollte immer mit HTML-Elementen das gewünschte Verhalten definiert werden.