The Text-Media Component connects media (image, video, or web video) with text. It is one of the most versatile components in headful and enables a wide range of layout variations within a single structure.
As with other components, you can optionally:
display a headline
display a subheadline
You then define the arrangement and structure of the media and text elements.
Media Types & Positioning
Available media types:
Image
Video (from the media library)
Web video
Using the image position setting, you define where the media appears:
above the text
left of the text
right of the text
If the media is positioned above the text, it is displayed large and visually dominant.
When positioned left or right, you can additionally choose between two size options:
Default → the text takes approximately two-thirds of the page width
Larger → the text and media each take roughly half of the page width
Media and Text Structure
Within the Gallery section, one or multiple media elements (image, video, or web video) can be added.
If multiple media elements are assigned to a shared text block, the media will scale down proportionally. They do not automatically wrap to a new row. Therefore, ensure that all content remains clearly recognizable when using multiple media elements.
By default, the gallery is followed by:
a headline
a rich text editor for the copy text
The rich text editor allows formatting and linking of content.
At the end of the component, a color scheme can be applied.
Optionally, you can enable individual text per media item. In this case, each media element becomes its own item with a separate headline and copy text. The text fields appear directly within each media item and must be edited individually.
Layout Instructions for the Text-Media Component
Depending on the desired layout result, different settings can be combined.
Variation 1
Multiple images with individual text (aligned left or right)
Several image-text elements stacked vertically, each with its own text next to the image.
Steps:
Add the Text-Media Component.
Set the image position to left or right.
Activate “Individual text for each image.”
Add multiple images in the gallery.
For each item individually:
Select the image
Define the headline
Insert the copy text
Each image receives its own text section. The elements are displayed one below the other.
Variation 2
Alternating layout (image left / image right)
Top: Image left, text right
Below: Image right, text left
Important: This layout uses two separate Text-Media Components.
Steps:
Add the first Text-Media Component.
Set image position to left.
Define the text.
Add a second Text-Media Component below it.
Set image position to right.
Define the text.
This creates an alternating layout with clear visual dynamics.
Variation 3
Two-column layout with image above the text
Multiple columns side by side, each with an image on top and text below
Steps:
Add the Text-Media Component.
Set image position to above.
Add multiple images in the gallery.
Activate “Individual text for each image.”
Define a headline and copy text for each image.
This allows you to display two or more image-text blocks side by side with a clear column structure.
Variation 4
Two-column text layout (without visible image)
Multiple text columns side by side, without visible images.
Note: This is a special workaround and the image above still shows a small stripe of an image which can be exchanged with a white one.
Steps:
Set image position to above.
Activate “Individual text for each image.”
Add multiple items.
For each item, insert an image that:
is created in the background color of the selected color scheme
and is cropped into a very narrow strip
Insert the desired text into each item.
Important:
All inserted images must be cropped to exactly the same height. Otherwise, vertical misalignment will occur.
The spacing between image and text is system-defined and cannot be adjusted.
This method allows multiple text columns to appear side by side, even though technically image-text elements are still being used.
Tips & Tricks
Use the left-right arrangement for clearly structured information blocks.
Use individual text per media item when content should be clearly separated.
Ensure proper image cropping and focus when working with multiple media elements.
Plan larger image displays intentionally to create visual hierarchy.