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. In unserem Beispiel beim Parallax ist ein Drittel ausgewählt.
- Unter Chapter Vertikal Position legen Sie im Dropdown-Menü fest, wo der Inhalt des Chapters dargestellt wird. Default / Standard ist eine mittige Ausrichtung.
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.
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: 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.