---
title: Description
url: "https://www.toujou.com/service/element-library/teaser-elements/description/"
date: 2019-06-13
modified: 2022-09-27
---

# Description

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/)
5. [Teaser element description](https://www.toujou.de/service/element-library/teaser-elements/description/)

   Teaser elements
===============

Text with media in 16:9 format and original format in the ratio 50:50 with full grid width.

Item-IDs: 02-001 | 02-002 | 02-003 | 02-004 |

[Sample view](#c1005902) [Step by step guide](#c1005904)[ ](http://template.toujou.de/62#c306)[Screen adaptation](#c1003050)

    ![](https://www.toujou.de/_assets/processed/CgTapkQpU2ZSZ8hkEfK2WCf8sPpuryrhoVJJNx6uyF8/q:85/w:433/h:54/fn:Y3NtXzAyX3RlYXNlcl9lbGVtZW50c184NzVlY2VmYzgy:t/cb:d00a9be37297bd51d225178fce83ab7758baaa08/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzAyX1RlYXNlcl9lbGVtZW50cy8wMl90ZWFzZXJfZWxlbWVudHMucG5n)  ---

  Sample views
--------------

   ![](https://www.toujou.de/_assets/processed/azpYDZqVPJJ_I3NFj3vD4FW58bIUa0DosEVGExbsMYc/q:85/c:1920:1185.1851851852:fp:0.5:0.5/rt:force/w:592/h:365/fn:Y3NtX2RlbW9fMDdfMzIwMTFiOTdmNw:t/cb:e82f8adb21395de668d29dba54362adc3a742d55/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9kZW1vXzA3LmpwZw)

#### Cinema Teaser with 16:9 image format

Lorem ipsum dolor sit amet, mollis vocibus at cum. Eos te iriure epicurei, in pri iisque eligendi. Et has recusabo sapientem, usu delectus recteque accusamus an. In doming luptatum vis, voluptua democritum mel at. Mei aeque vidisse intellegat et, vitae fabulas consulatu eum an.

[Beautiful Button](https://www.toujou.de/)

   ![](https://www.toujou.de/_assets/processed/6bplVG_GeRO4t_4wShhz1UGMFajXGiiQZ1ESY9j_6ds/q:85/w:593/h:445/fn:Y3NtX2RlbW9fMDdfZjVkNmVkYjQ4Mw:t/cb:e82f8adb21395de668d29dba54362adc3a742d55/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9kZW1vXzA3LmpwZw)

#### Media teaser with image in original format

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.

[I am the button](https://www.toujou.de/)

---

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

   ### Create teaser

- Click on the **+ Content** button to create any teaser element.
- In the *Teaser Elements* tab, select the element of your choice.[ ](https://www.toujou.de/fileadmin/toujou/element_library/01_Text_elements/02_Text-with-image/02_02_Text_einfuegen.png)

  ### Insert and format text

- Paste your text into the editor.
- If you copy the text from another file, pay attention to possibly copied formatting.
- The text can be formatted directly within the rich text editor, with the help of the menu above the editor.

  ### Insert media

- Click on the button **Add image**.
- Select an image file from your file list or upload a file to the appropriate folder (*Select & upload files*).
- To insert a video, click **Add media by URL** in the *General* tab.

  ### Format image

- Any image information and links can be entered directly in the *Image Metadata* workspace.
- The ratio and size of the image can be adjusted in the *Image manipulator* by clicking **Open Editor**.
- Keep in mind that the format of the *Cinema teaser* is already specified to the 16:9 format and can only be edited by the size of the image section.

  ---

  Screen adaptation
-------------------

 *Teaser elements* only reflect the content you inserted.

**Responsive behaviour**: If there is not enough space to display the text block and the media next to each other, any teaser media will be placed above the text block.

**Worth noting**: The teaser elements will always appear in full grid width.

---

 Linked topics
-------------

[toujou set-ups](https://www.toujou.de/service/toujou-set-up/) & [TYPO3 tutorials](https://www.toujou.de/service/tutorials/) related to this element description.

 [Text editing](https://www.toujou.de/service/tutorials/page-content/text-editing/) [Image editing](https://www.toujou.de/service/tutorials/page-content/image-editing/) [Filelist](https://www.toujou.de/service/tutorials/file-list-module/)