--- title: Chapter-Element in toujou – Anleitung, Tipps und Tricks url: "https://www.toujou.de/service/elementbibliothek/widgets/chapter/" description: "Das Chapter-Element in toujou: Welche Möglichkeiten Sie haben, wie Sie es erstellen und worauf zu achten ist: Das Tutorial für Ihre TYPO3-Website." date: 2021-05-14 modified: 2026-01-16 --- # Chapter-Element in toujou – Anleitung, Tipps und Tricks 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Elementbibliothek](https://www.toujou.de/service/elementbibliothek/) 4. [Widgets](https://www.toujou.de/service/elementbibliothek/widgets/) 5. [Chapter](https://www.toujou.de/service/elementbibliothek/widgets/chapter/) 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](#c1017924) [Anleitung](#c1009830) [Verhalten](#c1009831) --- 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 --------- [ ![](https://www.toujou.de/_assets/processed/MZBcDxJZcxRvQPYnhN7ERBSjELLJ88G9yjX0nKEf7sk/q:85/c:1918.08:1081:fp:0.4995:0.5/rt:force/w:432/h:243/fn:Y3NtX0NoYXB0ZXJfRWxlbWVudF93YWVobGVuXzNhZGIxYzE3NWI:t/cb:59c4397f529e5fb7a4651281268687a624950e12/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzAxX1RleHRfZWxlbWVudHMvMDRfQ2hhcHRlci9DaGFwdGVyX0VsZW1lbnRfd2FlaGxlbi5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/01_Text_elements/04_Chapter/Chapter_Element_waehlen.png) ### Element wählen - Um ein neues Element zu wählen, klicken Sie zunächst auf +Inhalt und wählen Sie den Reiter *Widgets* aus. - Klicken Sie anschließend auf das Element **Chapter**. [ ![](https://www.toujou.de/_assets/processed/PPFiL0zJpvQSCZd7WioJtVyHZsSXOXR1eWLPb6uCZJU/q:85/c:1686.53:948.67312499999:fp:0.5485:0.5/rt:force/w:432/h:243/fn:Y3NtX2NoYXB0ZXItYmVudXR6ZXJkZWZpbmllcnRlLWNzcy1rbGFzc2VuXzUzYjZmZThhNWE:t/cb:5c76fa3e78da664d1555195a9c65eedcc2428ae8/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzAxX1RleHRfZWxlbWVudHMvMDRfQ2hhcHRlci9jaGFwdGVyLWJlbnV0emVyZGVmaW5pZXJ0ZS1jc3Mta2xhc3Nlbi5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/01_Text_elements/04_Chapter/chapter-benutzerdefinierte-css-klassen.png) ### 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](mailto:support@toujou.de). [ ![](https://www.toujou.de/_assets/processed/Tm8uyJgozshTRfNTHUku89mc4XiScvvAu0ZNYGKeB4E/q:85/c:1908.09:950:fp:0.4995:0.5/rt:force/w:432/h:215/fn:Y3NtX2NoYXB0ZXItaGludGVyZ3J1bmRmYXJiZS11bmQtc2NocmlmdGZhcmJlXzY4OTBiMjQ2NGI:t/cb:58f152ac80ab876708afdafd6e7d0346e67161df/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzAxX1RleHRfZWxlbWVudHMvMDRfQ2hhcHRlci9jaGFwdGVyLWhpbnRlcmdydW5kZmFyYmUtdW5kLXNjaHJpZnRmYXJiZS5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/01_Text_elements/04_Chapter/chapter-hintergrundfarbe-und-schriftfarbe.png) ### 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](https://www.toujou.de/service/toujou-setup/farben-festlegen/) hinterlegten Farben. [ ![](https://www.toujou.de/_assets/processed/V6yv4Dj6rx7KDF7etPcToaTfZp-IV5eKWiBAPfgiBB8/q:85/w:432/h:215/fn:Y3NtX2NoYXB0ZXItbWluZGVzdGhvZWhlLXVuZC1wb3NpdGlvbl81OWVhM2EzY2I2:t/cb:f19b2f497917a99264b80afc6885e06375349bdd/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzAxX1RleHRfZWxlbWVudHMvMDRfQ2hhcHRlci9jaGFwdGVyLW1pbmRlc3Rob2VoZS11bmQtcG9zaXRpb24ucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/01_Text_elements/04_Chapter/chapter-mindesthoehe-und-position.png) ### 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. [ ![](https://www.toujou.de/_assets/processed/df3_rkVS-TOsezQBFPRE4WgbM-GolAR3WcilL-mHTpM/q:85/w:432/h:215/fn:Y3NtX2NoYXB0ZXItaGludGVyZ3J1bmRtZWRpdW0tcGFyYWxsYXhfMGU5ODJiOTMxMw:t/cb:97e2a816f832178db82632abc2a19c5be29fa297/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzAxX1RleHRfZWxlbWVudHMvMDRfQ2hhcHRlci9jaGFwdGVyLWhpbnRlcmdydW5kbWVkaXVtLXBhcmFsbGF4LnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/01_Text_elements/04_Chapter/chapter-hintergrundmedium-parallax.png) ### 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. [ ![](https://www.toujou.de/_assets/processed/6O-ZwNp2zAvr175lXG3mX1FiLmml61cYM6ot-PUCMrk/q:85/c:1910:949.09036144578:fp:0.5:0.49899598393574/rt:force/w:432/h:215/fn:Y3NtX2NoYXB0ZXItcGFkZGluZ180NzEyOTdkNjU4:t/cb:ee729481a75bd12d68ccbfff092f3c4c72f443be/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzAxX1RleHRfZWxlbWVudHMvMDRfQ2hhcHRlci9jaGFwdGVyLXBhZGRpbmcucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/01_Text_elements/04_Chapter/chapter-padding.png) ### 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. [ ![](https://www.toujou.de/_assets/processed/g_4T2wxLYCbxty472-CXjpJsglRKK8_rgpVboD9Zx50/q:85/c:1910:949.09036144578:fp:0.5:0.49899598393574/rt:force/w:432/h:215/fn:Y3NtX2NoYXB0ZXItbWFyZ2luXzEyMGVkYzhlZTc:t/cb:63f8b80737b44983591e55174ef5ff2bb658544a/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzAxX1RleHRfZWxlbWVudHMvMDRfQ2hhcHRlci9jaGFwdGVyLW1hcmdpbi5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/01_Text_elements/04_Chapter/chapter-margin.png) ### 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](https://www.toujou.de/service/elementbibliothek/navigation-elements/automatische-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](https://www.toujou.de/tutorials/seiten-anlegen/footer-in-toujou/) einer Website haben keine Auswirkung auf das Frontend. Hier sollte immer mit [HTML](https://www.toujou.de/service/elementbibliothek/html/)-Elementen das gewünschte Verhalten definiert werden. Verknüpfte Themen ----------------- [Tutorials](https://www.toujou.de/tutorials/), die mit diesem Element in Verbindung stehen. [Inpage Navigation](https://www.toujou.de/service/elementbibliothek/navigation-elements/) [Automatische Inpage Navigation](https://www.toujou.de/service/elementbibliothek/navigation-elements/automatische-inpage-navigation/) --- ##### toujou-Tutorials [Checkliste ❯](https://www.toujou.de/service/#c1001893) [Kontakt/Daten hinterlegen ❯ ](https://www.toujou.de/tutorials/kontakte-anlegen/) [Dateiliste / Fileadmin ❯ ](https://www.toujou.de/tutorials/dateiliste/) [Navigation bearbeiten ❯ ](https://www.toujou.de/tutorials/seiten-anlegen/) [Seiteninhalte ❯](https://www.toujou.de/tutorials/seiteninhalte/) [Seiteneigenschaften ❯](https://www.toujou.de/tutorials/seiteneigenschaften/) [Responsive-Check ❯](https://www.toujou.de/tutorials/responsive-mobile-first/) [Yoast SEO ❯](https://www.toujou.de/tutorials/yoast-seo/) [Redirects ❯](https://www.toujou.de/tutorials/redirects/) / [Blog ❯](https://www.toujou.de/tutorials/blog-administration/) [Seiten übersetzen ❯](https://www.toujou.de/tutorials/seiten-uebersetzen/) [Linkvalidator ❯](https://www.toujou.de/tutorials/linkvalidator/) ##### toujou-Setup [Theme ❯ ](https://www.toujou.de/service/toujou-setup/theme-bearbeiten/) [Logo ❯ ](https://www.toujou.de/service/toujou-setup/logo-hochladen/) [Font ❯ ](https://www.toujou.de/service/toujou-setup/font-bestimmen/) [Color ❯ ](https://www.toujou.de/service/toujou-setup/farben-festlegen/) [Social Media ❯ ](https://www.toujou.de/service/toujou-setup/social-media/) [Analytics ❯](https://www.toujou.de/service/toujou-setup/analytics/) [Data Protection ❯](https://www.toujou.de/service/toujou-setup/datenschutz/) [Website Overlay ❯](https://www.toujou.de/service/toujou-setup/website-overlay/) ##### toujou-Elementbibliothek [Texte ❯ ](https://www.toujou.de/service/elementbibliothek/text-elements/) [Medien ❯ ](https://www.toujou.de/service/elementbibliothek/media-elements/) [Combinations❯ ](https://www.toujou.de/service/elementbibliothek/combined-elements/) [Teaser ❯ ](https://www.toujou.de/service/elementbibliothek/teaser-elements/) [Cards ❯](https://www.toujou.de/service/elementbibliothek/card-elements/) [Blockquotes ❯ ](https://www.toujou.de/service/elementbibliothek/blockquote-elements/) [Collections ❯](https://www.toujou.de/service/elementbibliothek/collections/) [Maps ❯ / ](https://www.toujou.de/service/elementbibliothek/map-elements/)[Blog ❯ ](https://www.toujou.de/service/elementbibliothek/blog-elements/) [Events ❯ ](https://www.toujou.de/service/elementbibliothek/events/)/ [Widgets ❯ ](https://www.toujou.de/service/elementbibliothek/widgets/) [Navigation ❯](https://www.toujou.de/service/elementbibliothek/navigation-elements/) [HTML ❯ ](https://www.toujou.de/service/elementbibliothek/html/)/ [Forms ❯ ](https://www.toujou.de/service/elementbibliothek/forms/) ##### toujou TOURISM [tourism-Modul ❯](https://www.toujou.de/tutorials/tourism-modul/) [Expertise & Konzept ❯](https://www.toujou.de/websites/websites-fuer-reiseveranstalter/) [Alle Features ❯](https://www.toujou.de/loesungen/etourism/) [toujou-Reiseportale ❯](https://www.toujou.de/warum-toujou/unsere-kunden/#c1002004) [Reiseseiten anlegen ❯](https://www.toujou.de/tutorials/reiseseiten/reisen-anlegen/) [Reiseseiteneigenschaften ❯](https://www.toujou.de/tutorials/reiseseiten/reiseseiteneigenschaften/) [Reisekategorien ❯](https://www.toujou.de/tutorials/reiseseiten/reisekategorien-anlegen/) [Termine & Preise ❯](https://www.toujou.de/tutorials/reiseseiten/termine-preise/) [Reisesuchseiten anlegen ❯](https://www.toujou.de/tutorials/reiseseiten/reisesuchseite/) [Trip Elements ❯ ](https://www.toujou.de/service/elementbibliothek/trip-elements/) [Search Elements ❯](https://www.toujou.de/service/elementbibliothek/trip-elements/search-elements/)