Content element "Text/image with disturber"

Instructions with exercise

About the content element

The "Text/image with distractor" element can be used for promotions or advertising content. It contains an image, headline, text and button and can be displayed across the entire width of the screen.

Use:

  • Attractive presentation of marketing-relevant material in particular
  • It is particularly visually appealing if the headline is short and the text meets the requirements of a teaser text.
  • Captions can be slightly distracting here
  • Best presentation on 100% or 80% page width
  • In grid elements of 66% or smaller, headline length and text length should be greatly reduced
  • Not suitable for columns in grid elements of 33% or 25%
  • Can be used as a header image for the home page of an institution without linking if the title is short enough to be displayed in one line. It is more advisable to use the header image in the "Resources" of the start page.

This is what it looks like

Live view of the content item

A young woman is working on her laptop at a table next to a large window.

Working from home

Work from the comfort of your home office without any restrictions. We have compiled all the information for you.

Get started now!


Step by step

Illustrated instructions

In progress

We ask for your patience


TYPO3 self-study

Exercise

  1. Create a CE "Image/text with disturber" on 100% page width.
  2. Assign headline and text in different lengths and view the result in different display sizes.
  3. Also select the full screen width once.
  4. Notice how prominent and inviting the element becomes on the page. It almost invites you to interact with it. Use it like an advertisement.
  5. Place normal page content in front of or behind it. Find out what distance these need to be from the CE "Image/text with distractor" so that it continues to work well.
  6. Try out different settings for the height/aspect ratio for the image. This allows you to determine the area that the "Text/image with distractor" element takes up on the page.