---
title: "Chapter in toujou: Use case, tutorial, pieces of advice"
url: "https://www.toujou.com/service/element-library/widgets/chapter/"
description: Description of the toujou element Chapter based on TYPO3 ❘ For storytelling on your website ❘ All information → toujou.com
date: 2021-05-17
modified: 2026-01-16
---

# Chapter in toujou: Use case, tutorial, pieces of advice

1. [Home](https://www.toujou.de/)
2. [Service](https://www.toujou.de/service/)
3. [Element library](https://www.toujou.de/service/element-library/)
4. [Widgets](https://www.toujou.de/service/element-library/widgets/)
5. [Chapter](https://www.toujou.de/service/element-library/widgets/chapter/)

   Chapter
=======

With the chapter element you can define individual areas on a page of your website, where individual designs can be deposited and individual chapters can be created.

[Step by step guide](#c1009859) [Screen adaption](#c1009862)

---

  Step by step guide
--------------------

     [ ![](https://www.toujou.de/_assets/processed/pZxtOAjF4j3y_vs6z7FgjKVHOdJL4acjTDXyRzBJtIA/q:85/c:1920:972.4835188356:fp:0.5:0.5/rt:force/w:432/h:219/fn:Y3NtX2NoYXB0ZXJfY2hvb3NlX2VsZW1lbnRfZW5fOGU3ZjhlNmE0NA:t/cb:31ffce72e9199e9fe9a174c29d59b707f2cc9e6e/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzAxX1RleHRfZWxlbWVudHMvMDRfQ2hhcHRlci9jaGFwdGVyX2Nob29zZV9lbGVtZW50X2VuLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/01_Text_elements/04_Chapter/chapter_choose_element_en.png) ### Choose the element

- To select a new element, first click +Content and select the *widgets* tab.
- Click on the **Chapter** icon.

    [ ![](https://www.toujou.de/_assets/processed/8CJU58RwC6JMQJoI9nB1spk9eQcOSi-FNf0DyMDITa0/q:85/c:863:485.43749999999:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX2NoYXB0ZXJfc2VsZWN0X2Nzc19jbGFzc2VzX2VuXzg0ZGRjMTM1ZTA:t/cb:dddd87f7df291c32737eb5f14277df82d51bc824/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzAxX1RleHRfZWxlbWVudHMvMDRfQ2hhcHRlci9jaGFwdGVyX3NlbGVjdF9jc3NfY2xhc3Nlc19lbi5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/01_Text_elements/04_Chapter/chapter_select_css_classes_en.png) ### Select custom CSS

- In the *Content* tab, the *Chapter custom CSS classes* section offers you the option to select the desired classes.
- To do this, click the **drop-down menu** on the right and select the appropriate class(es).

   **Please note**: Before using the Chapter element, the CSS classes selection must be defined and enabled. To get the CSS classes, please don't hesitate to contact our [support team](mailto:support@toujou.com).

---

 Screen adaption and pieces of advice
------------------------------------

**The chapter element can be described as a chapter of a book, where CSS classes can be stored. These customizations are then only valid for the corresponding area and allow for detailed individualization on a page. A chapter ends automatically with the start of a new chapter.**

**Worth noting:** Each chapter needs its own name on each page so make sure you're providing each chapter with its own name.

Chapters are essential for the use of the [automatic inpage navigation](https://www.toujou.de/service/element-library/navigation-elements/auto-inpage-navigation/#c1009846) because they provide reference points. For this reason, give the chapters the name that will correspond with what appears in the front end.

Chapter implemented in the [footer](https://www.toujou.de/service/tutorials/pages-navigation/toujou-footer/) of a website does not have any impact on the frontend. The desired behavior should always be defined using [HTML](https://www.toujou.de/service/element-library/html/) elements.

---

  [  ![Ein gemütlicher Raum mit einem Schreibtisch, wo eine Person arbeitet, während eine andere sich und eine Pflanze im Hintergrund steht.](https://www.toujou.de/_assets/processed/qNNVYqD3wEtkyO9w1svk-TgmrV4Kmz3-Dy2xHQwL_nI/q:85/c:1296:800:fp:0.5:0.5/rt:force/w:325/h:201/fn:Y3NtXzE5MjB4ODAwX2hlYWRlcl9zZXJ2aWNlX2QzODU1N2IwZTg:t/cb:5f1cd16c10c25895a1fef11cf127bb5c3546bb22/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvaGVhZGVyLzE5MjB4ODAwLzE5MjB4ODAwX2hlYWRlcl9zZXJ2aWNlLnBuZw) ###   All text elements

 ](https://www.toujou.de/service/element-library/text-elements/#c1002484) [  ![Eine digitale Benutzeroberfläche wird von zwei Figuren auf einer Hebebühne betrachtet, während sie an einem Projekt arbeiten.](https://www.toujou.de/_assets/processed/OAkhxiyS5WfUYWBNEV2NKLISaZymcxfUEiHSy_UrCbU/q:85/c:1296:800:fp:0.5:0.5/rt:force/w:325/h:201/fn:Y3NtXzE5MjB4ODAwX0hlYWRlcl9FbGVtZW50LWxpYnJhcnlfMDBkMmIxNzAyNQ:t/cb:1305e23ee83a60de5f6c36c46c61c8feffa50315/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvaGVhZGVyLzE5MjB4ODAwLzE5MjB4ODAwX0hlYWRlcl9FbGVtZW50LWxpYnJhcnkucG5n) ###   All elements at a glance

 ](https://www.toujou.de/service/element-library/#c1004331) [  ![Zwei kleine Figuren stehen vor einem großen Bildschirm, der eine Webseite mit Informationen über TYPO3 zeigt.](https://www.toujou.de/_assets/processed/BSyZWxd3x6AVFLt_GIe9kPFgKkVtCK_y7721UljzduE/q:85/c:1296:800:fp:0.5:0.5/rt:force/w:325/h:201/fn:Y3NtXzE5MjB4ODAwX0hlYWRlcl9UWVBPMy1UdXRvcmlhbHNfNjkxZTYwOTcyZQ:t/cb:8d218074806083852dab8bb96efbe9568d7ed93c/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvaGVhZGVyLzE5MjB4ODAwLzE5MjB4ODAwX0hlYWRlcl9UWVBPMy1UdXRvcmlhbHMucG5n) ###   All tutorials at a glance

 ](https://www.toujou.de/service/tutorials/#c1004326)