--- title: Teaser elements of the toujou element library url: "https://www.toujou.com/service/element-library/teaser-elements/" description: "All teaser elements: Cinema or Image Teaser with text and the image of your choice. Previews, instructions an behavioral description." date: 2019-01-10 modified: 2022-09-27 --- # Teaser elements of the toujou element library 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Element library](https://www.toujou.de/service/element-library/) 4. [Teaser elements](https://www.toujou.de/service/element-library/teaser-elements/) **The toujou element library** ------------------------------ Teaser 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. **Cinema-Teaser:** [Cinema-Teaser 50% ](#c1002537) | [Cinema-Teaser, media 66%](#c1009422) | [Cinema-Teaser, media 33%](#c1009428) **Image-Teaser:** [Media-Teaser, left](#c1002544) | [Media-Teaser, right ](#c1002547) | [Image-Teaser Slider, right](#c1008140) ![Das Bild zeigt ein grafisches Layout mit einem Bildsymbol und mehreren horizontalen Linien, die Text darstellen.](https://www.toujou.de/_assets/processed/N3YSFMpGGAQi4uaYBuww0BM9zeLFtEoKWgyGH4FEp6g/q:85/w:400/h:160/fn:Y3NtX1RlYXNlcl8yMDAwXzgwMF90cmFuc3BhcmVudF80MjI3YzEwYmQ5:t/cb:37a928f0630eb8894e625e55aa36ec212a319da9/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvSWNvbnMvQmliLVRlYXNlcl8yMDAwXzgwMF90cmFuc3BhcmVudC9UZWFzZXJfMjAwMF84MDBfdHJhbnNwYXJlbnQucG5n) ### Manual On this page you will find all the teaser elements available in toujou. We’ve used dummy text 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/teaser-elements/) --- Overview ---------- ### Cinema-Teaser 50% width, left ![Ein stilisierter Pagodenbau mit mehreren Ebenen und goldener Spitze, umgeben von einem kleinen Garten und Zäunen.](https://www.toujou.de/_assets/processed/IzZ_RB3mrHpL2MzdtqG4gBLUJYfNCQVm082SkqfXvMo/q:85/c:626.94:387:fp:0.5:0.5/rt:force/w:592/h:365/fn:Y3NtXzY4OHgzODdfdGVtcGxlX2YyM2I4ZmM0MGY:t/cb:6ef820cebb5d446970b97472c73df58d52c19967/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X3RlbXBsZS5wbmc) This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. [Lorem Ipsum](https://www.toujou.de/service/element-library/teaser-elements/) [Description Cinema-Teaser 50% width, left ❯](https://www.toujou.de/service/element-library/teaser-elements/description/) --- ### Cinema-Teaser 50% width, right ![Eine stilisierte Pyramide mit mehreren Treppen und einem kleinen Tempel auf der Spitze, umgeben von Bäumen.](https://www.toujou.de/_assets/processed/ledY1TDOIwnrbFtbbAOtV3FTo_FdiOp6LDuu93AZlzA/q:85/c:626.94:387:fp:0.5:0.5/rt:force/w:592/h:365/fn:Y3NtXzY4OHgzODdfdGVtcGxlLWlua2FfZTM0ZjVjNDM5Yg:t/cb:3298c10ce12be039c349f332b54092ae35a4fd9f/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X3RlbXBsZS1pbmthLnBuZw) This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. [Lorem Ipsum](https://www.toujou.de/service/element-library/teaser-elements/) [Description Cinema-Teaser 50% width, right ❯](https://www.toujou.de/service/element-library/teaser-elements/description/) --- ### Cinema-Teaser 66% with medium left ![Ein stilisierter Pagodenbau mit mehreren Ebenen und goldener Spitze, umgeben von einem kleinen Garten und Zäunen.](https://www.toujou.de/_assets/processed/fGJ6VdPIp5-tiltWs_yFQUBWU-H-Uw81QUF6ilnS9YI/q:85/c:372.6:230:fp:0.5:0.49870801033592/rt:force/w:373/h:230/fn:Y3NtXzY4OHgzODdfdGVtcGxlXzUxNTg3NjNlMDQ:t/cb:6ef820cebb5d446970b97472c73df58d52c19967/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X3RlbXBsZS5wbmc) This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. [Lorem Ipsum](https://www.toujou.de/service/element-library/teaser-elements/) [Description Cinema-Teaser 66%, left ❯](https://www.toujou.de/service/element-library/teaser-elements/cinema-teaser-66-left/#c1009434) --- ### Cinema-Teaser 66% with medium right ![Eine stilisierte Pyramide mit mehreren Treppen und einem kleinen Tempel auf der Spitze, umgeben von Bäumen.](https://www.toujou.de/_assets/processed/v9cWy78spmxOxs3PPoYWp8VtEoHfOssMdXVPMUtpzX8/q:85/c:372.6:230:fp:0.5:0.49354005167959/rt:force/w:373/h:230/fn:Y3NtXzY4OHgzODdfdGVtcGxlLWlua2FfMzE5MGFlYzBhZQ:t/cb:3298c10ce12be039c349f332b54092ae35a4fd9f/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X3RlbXBsZS1pbmthLnBuZw) This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. [Lorem Ipsum](https://www.toujou.de/service/element-library/teaser-elements/) [Description Cinema-Teaser 66%, right ❯](https://www.toujou.de/service/element-library/teaser-elements/cinema-teaser-66-right/#c1009457) --- ### Cinema-Teaser 33% with medium left ![Ein stilisierter Pagodenbau mit mehreren Ebenen und goldener Spitze, umgeben von einem kleinen Garten und Zäunen.](https://www.toujou.de/_assets/processed/GoTAPskFJs_ascCeVW8yxz5a-0gLz5emS61MygJ9CTI/q:85/c:626.94:387:fp:0.5:0.5/rt:force/w:459/h:283/fn:Y3NtXzY4OHgzODdfdGVtcGxlXzQyOGI1ZDQ3NDA:t/cb:6ef820cebb5d446970b97472c73df58d52c19967/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X3RlbXBsZS5wbmc) This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. [Lorem Ipsum](https://www.toujou.de/service/element-library/teaser-elements/) [Description Cinema-Teaser 33%, left ❯](https://www.toujou.de/service/element-library/teaser-elements/cinema-teaser-33-left/#c1009446) --- ### Cinema-Teaser 33% with medium right ![Eine stilisierte Pyramide mit mehreren Treppen und einem kleinen Tempel auf der Spitze, umgeben von Bäumen.](https://www.toujou.de/_assets/processed/RWwYWdsCwjx0MHrEGUi6BPmlClkFZZIWUPw0sGIn6io/q:85/c:626.94:387:fp:0.5:0.5/rt:force/w:459/h:283/fn:Y3NtXzY4OHgzODdfdGVtcGxlLWlua2FfZjQ5ZTI3NDM1Ng:t/cb:3298c10ce12be039c349f332b54092ae35a4fd9f/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X3RlbXBsZS1pbmthLnBuZw) This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. [Lorem Ipsum](https://www.toujou.de/service/element-library/teaser-elements/) [Description Cinema-Teaser 33%, right ❯](https://www.toujou.de/service/element-library/teaser-elements/cinema-teaser-33-right/#c1009468) --- ### Media Teaser 50% width, left ![Ein fröhlicher Weihnachtsmann steht neben einem festlich geschmückten Weihnachtsbaum mit bunten Geschenken darunter.](https://www.toujou.de/_assets/processed/i98UeYYsyfbEfyXoXxEN-sUwHxpBMGNACZDYMEpWGYw/q:85/c:387:387:fp:0.48183139534884:0.5/rt:force/w:387/h:387/fn:Y3NtXzY4OHgzODdfdG91am91X1htYXNfYWIxZDVkYjgzNw:t/cb:b4f4ba376d6367f206d03d5be49df919cc56e622/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X3RvdWpvdV9YbWFzLnBuZw) This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. [Lorem Ipsum](https://www.toujou.de/service/element-library/teaser-elements/) [Description Media Teaser 50%, left ❯](https://www.toujou.de/service/element-library/teaser-elements/media-teaser-50-left/#c1009481) --- ### Media Teaser 50% width, right ![Das Hochhaus, das in sanften Rosa-Tönen gehalten ist, hebt sich durch seine klare Linienführung und den schlichten Hintergrund hervor.](https://www.toujou.de/_assets/processed/bP8AESJdYCuFLFIipRk2BGDiyaoLsqEhSvy6aYvdQ7k/q:85/c:387:387:fp:0.49781976744186:0.5/rt:force/w:387/h:387/fn:Y3NtXzY4OHgzODdfcGhvbmVib290aF9hY2Y1NDAxNTU4:t/cb:25f3fa35cad280a63de1a086ce0f2f634f131a81/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X3Bob25lYm9vdGgucG5n) This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. [Lorem Ipsum](https://www.toujou.de/service/element-library/teaser-elements/) [Description Media Teaser 50%, right ❯](https://www.toujou.de/service/element-library/teaser-elements/media-teaser-50-right/#c1009493) --- ### Image-Teaser Slider, right - This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. [Lorem Ipsum](https://www.toujou.de/service/elementbibliothek/teaser-elements/) - This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. [Lorem Ipsum](https://www.toujou.de/service/elementbibliothek/teaser-elements/) - This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. [Lorem Ipsum](https://www.toujou.de/service/elementbibliothek/teaser-elements/) of [Description Image-Teaser Slider, right ❯](https://www.toujou.de/service/element-library/teaser-elements/image-teaser-slider-right/#c1009505) ### Image-Teaser Slider, left - This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. [Lorem Ipsum](https://www.toujou.de/service/elementbibliothek/teaser-elements/) - This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. [Lorem Ipsum](https://www.toujou.de/service/elementbibliothek/teaser-elements/) - This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. This is a simple element containing a headline and this text. There are no restrictions for the amount of content. So feel free to add as much information as long as it helps your story or your customer. [Lorem Ipsum](https://www.toujou.de/service/elementbibliothek/teaser-elements/) of [Description Image-Teaser Slider, left ❯](https://www.toujou.de/service/element-library/teaser-elements/image-teaser-slider-left/) ##### 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/)