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 Step by step guide Screen adaptation

Sample views

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

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

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.

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 & TYPO3 tutorials related to this element description.

Text editing Image editing Filelist