--- title: Header url: "https://www.toujou.com/service/element-library/header/" date: 2026-01-14 modified: 2026-01-20 --- # Header 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Element library](https://www.toujou.de/service/element-library/) 4. [Header](https://www.toujou.de/service/element-library/header/) **The toujou element library** ------------------------------ Header elements =============== With toujou you will find preconfigured elements that give you the freedom to illustrate content according to your needs. The appearance is controlled centrally and offers responsive behaviour. Buttons, links, alignment, and text styles are all controlled by the editor. The Header elements are only available in the header area of a page. **Header elements:** [Headercontent Element](#c1019434) | [Header Media 3:1](#c1019437) | [Headercontent Slider](#c1019440) | [Headercontent Slider 3:1](#c1019443) ### Guide On this page you will find all navigation elements in toujou. We've used dummies in the library to prevent confusion. For detailed instructions, click on the buttons located below every sample element to get to the element description. [I am the button](https://www.toujou.de/service/element-library/navigation-elements/#c1009574) --- All Header elements at a glance --------------------------------- ### Headercontent Element [ ![](https://www.toujou.de/_assets/processed/9Or_-OFdCeZZPKNoPDUXwM7lbkCBc2zRbgw5PgyFGt0/q:85/w:432/h:281/fn:Y3NtX0hlYWRlcl8xMDBfMDFfd2lkZXNjcmVlbl8xMDI4Nzg2OGUw:t/cb:4e51770aa30ed837de6e0b1cc4ca84c69bbd5b13/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDFfSGVhZGVyY29udGVudC9oZWFkZXItZWxlbWVudF9iZXNjaHJlaWJ1bmcvYW5zaWNodF9lbmRnZXJhZXRlL29obmVfaGVhZGxpbmUvSGVhZGVyXzEwMF8wMV93aWRlc2NyZWVuLnBuZw) Ansicht für Endgeräte mit mehr als 1440 px Breite ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/01_Headercontent/header-element_beschreibung/ansicht_endgeraete/ohne_headline/Header_100_01_widescreen.png) #### **Widescreen** [ ![](https://www.toujou.de/_assets/processed/Qt50UuoypCxgYP1InkQUVuXUdxOhYtWCepGvAzU0UcM/q:85/w:432/h:281/fn:Y3NtX0hlYWRlcl8xMDBfMDJfZGVza3RvcF8yZGEyZTA2YzY4:t/cb:9151149686bc4ebeedf12c6027a6b58be2ef92ef/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDFfSGVhZGVyY29udGVudC9oZWFkZXItZWxlbWVudF9iZXNjaHJlaWJ1bmcvYW5zaWNodF9lbmRnZXJhZXRlL29obmVfaGVhZGxpbmUvSGVhZGVyXzEwMF8wMl9kZXNrdG9wLnBuZw) Ansicht für Endgeräte mit mehr als 1024 px Breite ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/01_Headercontent/header-element_beschreibung/ansicht_endgeraete/ohne_headline/Header_100_02_desktop.png) #### **Desktop** [ ![](https://www.toujou.de/_assets/processed/Ci8XeSfY9Mz5rGHwacjC8B68bGd9tuyJ3OeaHepmuFs/q:85/w:432/h:281/fn:Y3NtX0hlYWRlcl8xMDBfMDNfdGFibGV0Xzk5MGUxZThhNmM:t/cb:9cb66c501b7a032d18828af6e142dc23ada05f56/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDFfSGVhZGVyY29udGVudC9oZWFkZXItZWxlbWVudF9iZXNjaHJlaWJ1bmcvYW5zaWNodF9lbmRnZXJhZXRlL29obmVfaGVhZGxpbmUvSGVhZGVyXzEwMF8wM190YWJsZXQucG5n) Ansicht für Endgeräte mit mehr als 600 px Breite ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/01_Headercontent/header-element_beschreibung/ansicht_endgeraete/ohne_headline/Header_100_03_tablet.png) #### **Tablet** [ ![](https://www.toujou.de/_assets/processed/NDWLWw6wKTO97iQUPB58qX1n2Gy9Yzy0fTcTIc4CnIQ/q:85/w:432/h:281/fn:Y3NtX0hlYWRlcl8xMDBfbW9iaWxlXzk2Y2MwYmRkMjk:t/cb:71fd73f34d2528b6e68671b15ca0d0d1e5029dae/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDFfSGVhZGVyY29udGVudC9oZWFkZXItZWxlbWVudF9iZXNjaHJlaWJ1bmcvYW5zaWNodF9lbmRnZXJhZXRlL29obmVfaGVhZGxpbmUvSGVhZGVyXzEwMF9tb2JpbGUucG5n) Ansicht exemplarisch mit 375 px Breite ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/01_Headercontent/header-element_beschreibung/ansicht_endgeraete/ohne_headline/Header_100_mobile.png) #### **Mobile** [Headercontent Element >](https://www.toujou.de/service/element-library/header/headercontent-element/) ### Header Media 3:1 [ ![](https://www.toujou.de/_assets/processed/rqEz28et-eeO2MS4B2TOLdoI_s2qGsVNlLJjnzb9bVU/q:85/w:432/h:281/fn:Y3NtX0hlYWRlcl8zLTFfMDFfd2lkZXNjcmVlbl8wMV84YzVjNGE1NjY0:t/cb:7a8ccdcf7550ffa13506278b0d6dca3a882432f5/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDFfSGVhZGVyY29udGVudC9oZWFkZXItZWxlbWVudF9iZXNjaHJlaWJ1bmcvYW5zaWNodF9lbmRnZXJhZXRlL29obmVfaGVhZGxpbmUvSGVhZGVyXzMtMV8wMV93aWRlc2NyZWVuXzAxLnBuZw) Ansicht für Endgeräte mit mehr als 1440 px Breite ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/01_Headercontent/header-element_beschreibung/ansicht_endgeraete/ohne_headline/Header_3-1_01_widescreen_01.png) #### **Widescreen** [ ![](https://www.toujou.de/_assets/processed/sToyNoAYfFZzOXMl2kbbdq4_OfsMwblQU_8N-AHIWRQ/q:85/w:432/h:281/fn:Y3NtX0hlYWRlcl8zLTFfMDJfZGVza3RvcF8wMV9kOGY3YTRmNTcw:t/cb:cf11e2c1dd6903a060e0677edb2f44d6ab858062/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDFfSGVhZGVyY29udGVudC9oZWFkZXItZWxlbWVudF9iZXNjaHJlaWJ1bmcvYW5zaWNodF9lbmRnZXJhZXRlL29obmVfaGVhZGxpbmUvSGVhZGVyXzMtMV8wMl9kZXNrdG9wXzAxLnBuZw) Ansicht für Endgeräte mit mehr als 1024 px Breite ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/01_Headercontent/header-element_beschreibung/ansicht_endgeraete/ohne_headline/Header_3-1_02_desktop_01.png) #### **Desktop** [ ![](https://www.toujou.de/_assets/processed/93m82QIdiCPe-48YB8nXAF4YOmis5KK2hs4yqk49VC8/q:85/w:432/h:281/fn:Y3NtX0hlYWRlcl8zLTFfMDNfdGFibGV0XzcyN2JhZmQ1Y2Y:t/cb:0abb494744a57e8053ca0b0d285da55526be4c61/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDFfSGVhZGVyY29udGVudC9oZWFkZXItZWxlbWVudF9iZXNjaHJlaWJ1bmcvYW5zaWNodF9lbmRnZXJhZXRlL29obmVfaGVhZGxpbmUvSGVhZGVyXzMtMV8wM190YWJsZXQucG5n) Ansicht für Endgeräte mit mehr als 600 px Breite ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/01_Headercontent/header-element_beschreibung/ansicht_endgeraete/ohne_headline/Header_3-1_03_tablet.png) #### **Tablet** [ ![](https://www.toujou.de/_assets/processed/dCbtxzEAYDr6_CDO689A7oG_tBeITkh0gsTS5ou8ZhU/q:85/w:432/h:281/fn:Y3NtX0hlYWRlcl8zLTFfMDRfbW9iaWxlX2EwNWQ1MjlhYmE:t/cb:50d754f02d462b2f9b0c54986c930b65b39332e2/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDFfSGVhZGVyY29udGVudC9oZWFkZXItZWxlbWVudF9iZXNjaHJlaWJ1bmcvYW5zaWNodF9lbmRnZXJhZXRlL29obmVfaGVhZGxpbmUvSGVhZGVyXzMtMV8wNF9tb2JpbGUucG5n) Ansicht exemplarisch mit 375 px Breite ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/01_Headercontent/header-element_beschreibung/ansicht_endgeraete/ohne_headline/Header_3-1_04_mobile.png) #### **Mobile** [Header Media 3:1 >](https://www.toujou.de/service/element-library/header/header-media-31-ratio/) ### Headercontent Slider - ![Eine stilisierte Szene zeigt einen Mann, der ein Smartphone hält, umgeben von Symbolen für Musik, Bilder und Karten.](https://www.toujou.de/_assets/processed/bDQhAo83U2Bqw9oijmMhrnqg2TXZyLn5_Ia0FkY2cxI/q:85/w:700/h:292/fn:Y3NtXzAxX2NvbXBvc2UtY29udGVudF9jOTQyY2MwNTI4:t/cb:ff3034d2a0288e401cb7c6e761cfccc79db22230/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvaGVhZGVyLzE5MjB4ODAwLzAxX2NvbXBvc2UtY29udGVudC5wbmc) ### Headercontent Slider You can style and position the content according to your needs. [Beautiful button](https://www.toujou.de/service/element-library/header/) - ![Eine Gruppe von Menschen steht in einem modernen Büro, umgeben von Pflanzen und Computern, während sie miteinander sprechen.](https://www.toujou.de/_assets/processed/gvleCCmte9-ReBwmsuDR4K1F6JW9deKx5ogUTLdQNJk/q:85/w:700/h:292/fn:Y3NtXzE5MjB4ODAwX1dlYi1oZWFkZXJfb2ZmaWNlLXBlb3BsZV9iYjMzMzA0ODY5:t/cb:5554be7332ef37eab8411ee2c8fd1013f2499f23/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvaGVhZGVyLzE5MjB4ODAwLzE5MjB4ODAwX1dlYi1oZWFkZXJfb2ZmaWNlLXBlb3BsZS5wbmc) ### Second Headline You can style and position the content according to your needs. [Beautiful button](https://www.toujou.de/service/element-library/header/) - ![Eine Gruppe von Menschen sitzt in einem Raum, während ein Referent eine Präsentation an einer Wand zeigt.](https://www.toujou.de/_assets/processed/p5mqjcCR9qZJUsl7vbi7bYQyIsFKxtHtNbjEGl6SXIY/q:85/w:700/h:292/fn:Y3NtXzE5MjB4ODAwX1dvcmtzaG9wX2JsdWVfZTM3ZGM5MmUwMA:t/cb:d5e517da43c43f956570a9b4763d0d83636badbb/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvaGVhZGVyLzE5MjB4ODAwLzE5MjB4ODAwX1dvcmtzaG9wX2JsdWUucG5n) ### Third Headline You can style and position the content according to your needs. [Beautiful button](https://www.toujou.de/service/element-library/header/) of [Headercontent Slider >](https://www.toujou.de/service/element-library/header/headercontent-slider/) ### Headercontent Slider 3:1 - ![Eine stilisierte Szene zeigt einen Mann, der ein Smartphone hält, umgeben von Symbolen für Musik, Bilder und Karten.](https://www.toujou.de/_assets/processed/bDQhAo83U2Bqw9oijmMhrnqg2TXZyLn5_Ia0FkY2cxI/q:85/w:700/h:292/fn:Y3NtXzAxX2NvbXBvc2UtY29udGVudF9jOTQyY2MwNTI4:t/cb:ff3034d2a0288e401cb7c6e761cfccc79db22230/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvaGVhZGVyLzE5MjB4ODAwLzAxX2NvbXBvc2UtY29udGVudC5wbmc) ### Headercontent Slider (3:1 ratio) You can style and position the content according to your needs. [Beautiful button](https://www.toujou.de/service/element-library/header/) - ![Eine Gruppe von Menschen steht in einem modernen Büro, umgeben von Pflanzen und Computern, während sie miteinander sprechen.](https://www.toujou.de/_assets/processed/gvleCCmte9-ReBwmsuDR4K1F6JW9deKx5ogUTLdQNJk/q:85/w:700/h:292/fn:Y3NtXzE5MjB4ODAwX1dlYi1oZWFkZXJfb2ZmaWNlLXBlb3BsZV9iYjMzMzA0ODY5:t/cb:5554be7332ef37eab8411ee2c8fd1013f2499f23/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvaGVhZGVyLzE5MjB4ODAwLzE5MjB4ODAwX1dlYi1oZWFkZXJfb2ZmaWNlLXBlb3BsZS5wbmc) ### Second Headline You can style and position the content according to your needs. [Beautiful button](https://www.toujou.de/service/element-library/header/) - ![Eine Gruppe von Menschen sitzt in einem Raum, während ein Referent eine Präsentation an einer Wand zeigt.](https://www.toujou.de/_assets/processed/p5mqjcCR9qZJUsl7vbi7bYQyIsFKxtHtNbjEGl6SXIY/q:85/w:700/h:292/fn:Y3NtXzE5MjB4ODAwX1dvcmtzaG9wX2JsdWVfZTM3ZGM5MmUwMA:t/cb:d5e517da43c43f956570a9b4763d0d83636badbb/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvaGVhZGVyLzE5MjB4ODAwLzE5MjB4ODAwX1dvcmtzaG9wX2JsdWUucG5n) ### Third Headline You can style and position the content according to your needs. [Beautiful button](https://www.toujou.de/service/element-library/header/) of [Headercontent Slider 3:1 >](https://www.toujou.de/service/element-library/header/headercontent-slider-31-ratio/) ##### Tutorials [Checklist ❯](https://www.toujou.de/service/#c1004820) [Contact data ❯ ](https://www.toujou.de/service/tutorials/contact-data/) [File list ❯ ](https://www.toujou.de/service/tutorials/file-list-module/) [Edit navigation ❯ ](https://www.toujou.de/service/tutorials/pages-navigation/) [Edit page content ❯ ](https://www.toujou.de/service/tutorials/page-content/) [Edit page properties ❯](https://www.toujou.de/service/tutorials/page-properties/) [Responsive & mobile first ❯](https://www.toujou.de/service/tutorials/responsive-mobile-first/) [Yoast SEO ❯ ](https://www.toujou.de/service/tutorials/yoast-seo/) [Redirects ❯ ](https://www.toujou.de/service/tutorials/redirects/) [Blog administration ❯](https://www.toujou.de/service/tutorials/blog-administration/) [Linkvalidator ❯](https://www.toujou.de/service/tutorials/blog-administration/) ##### toujou set-up [Theme ❯ ](https://www.toujou.de/service/toujou-set-up/theme-settings/) [Logo ❯ ](https://www.toujou.de/service/toujou-set-up/logo-settings/) [Font ❯ ](https://www.toujou.de/service/toujou-set-up/font-settings/) [Color ❯ ](https://www.toujou.de/service/toujou-set-up/color-settings/) [Social media ❯ ](https://www.toujou.de/service/toujou-set-up/social-media-settings/) [Analytics ❯](https://www.toujou.de/service/toujou-set-up/analytics-settings/) [Data protection ❯](https://www.toujou.de/service/toujou-set-up/data-protection-settings/) [Website overlay ❯](https://www.toujou.de/service/toujou-set-up/website-overlay/) ##### toujou element library [Text elements ❯ ](https://www.toujou.de/service/element-library/text-elements/) [Teaser elements ❯ ](https://www.toujou.de/service/element-library/teaser-elements/) [Blockquotes ❯ ](https://www.toujou.de/service/element-library/blockquote-elements/) [Teaser cards ❯ ](https://www.toujou.de/service/element-library/card-elements/) [Media elements ❯ ](https://www.toujou.de/service/element-library/media-elements/) [Map elements ❯ ](https://www.toujou.de/service/element-library/map-elements/) [Blog elements ❯](https://www.toujou.de/service/element-library/blog-elements/) #### [Navigation elements ❯ ](https://www.toujou.de/service/element-library/navigation-elements/) [Widgets ❯ ](https://www.toujou.de/service/element-library/widgets/) [Headline element ❯ ](https://www.toujou.de/service/element-library/text-elements/headline-element/) [Combined elements ❯](https://www.toujou.de/service/element-library/combined-elements/)