Text and Media

  1. Showroom Home
  2. Components
  3. Text and Media

Purpose

With the Text & Media component text- and media elements (images and videos) can be displayed in one component. A previous upload of the media assets into the DAM is required. There are two possibilities to integrate videos into the Media component: either by referencing a video from the DAM or by integrating a Youtube ID. When integrating videos from the DAM additional functionalities can be selected, for example Autoplay or Autoloop.

The Text & Media component can either be integrated directly on a page, or within a Background component. Additionally, a Link component can be used within a Text & Media component.

Go directly to

Examples

The following examples show what the component can look like. Depending on the configuration, a component can be displayed in different ways.

Example Media Asset

Text & Media Example 1

Media Position: Left

Media Size: 30% Media, 70% Text

Link Component
Example Media Asset

Text & Media Example 2

Text & Media within a Background Component

Media Position: Right

Media Size: 50% Media, 50% Text

Link Component

Configuration

To create the component, follow the steps below. 

  • Step 1 
    Click into Text & Media component
  • Step 2
    Edit component
  • Step 3 
    Rich Text Editor appears
  • Step 4 
    Write text into the component
  • Step 5 
    Save changes
  • Step 6 
    Configure component
Tab Component Style
  • Step 7 
    Integrate the following in the tab Component Styles:
    • a. Media-Position (left, right)
    • b. Media-Size: 30% Media, 70% Text or 50% Media, 50% Text
    • c. Text Position Vertical (Top, Center)
    • d. Media Position (Top, Center, Bottom)
    • e. Text Position Horizontal (Left, Center) Please note: If any text position other than “Left” had already been defined in the Rich Text Editor of the component, the settings defined in the Media Settings do not have any impact.
Tab Media Properties
  • Step 8
    Integrate the following in the tab Media Properties:
    • a. Integrate Video via drag and drop from the side panel into the dedicated area
    • b. or insert Youtube Video ID
    • c. if needed check checkbox to Hide Video Controls (only applicable for DAM videos)
    • d. if needed check checkbox to Start Video Automatically (Autoplay) (only applicable for DAM videos)
    • e. if needed check checkbox to Restart Video constantly (Auto Loop) (only applicable for DAM videos)
    • f. Integrate Image asset via drag and drop from the side panel into the dedicated area (an image also needs to be integrated when inserting a video)
    • g. Integrate Title (optional)
    • h. Integrate ALT Text (If a video has been integrated the ALT Text must contain the video name to ensure the Analytics tracking of the video)
    • i. Integrate Media Caption (optional)
    • j. Integrate Author (This is a microdata setting, so whatever is integrated here is visible only in the source code. This is relevant for SEO)
    • k. Integrate Location (This is a microdata setting, so whatever is integrated here is visible only in the source code. This is relevant for SEO)
Tab Headline
  • Step 9
    Insert a Headline and an Anchor ID within the Headline Tab, if needed
Text & Media Link
  • Step 10
    Save changes
  • Step 11
    If needed a Link component can be inserted within the Text & Media component in the dedicated Drag component area
Erinnerung für
Fehler Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.

Sollen wir Sie benachrichtigen wenn der Artikel verfügbar ist?

hh

Tag der Erinnerung
Zwei Tage vorher
Einen Tag vorher
Am Angebotstag
Uhrzeit
00:00
01:00
02:00
03:00
04:00
05:00
06:00
07:00
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00
Hinweise
  • line 1
  • line 2
  • ...

Eine Erinnerung ist nicht mehr möglich

Die Erinnerungszeiten für diesem Artikel sind bereits abgelaufen.

Erinnerung aktiv!

hh

Sie erhalten Ihre Erinnerung am ${date} um ${time} Uhr.

hh

Wir senden Ihnen noch eine Nachricht per E-Mail, um ihre E-Mail Adresse zu bestätigen. Bitte klicken Sie auf den Link in der Nachricht.

regions.regionSwitchHeadline

regions.regionSwitchText
regions.regionSwitchTextExplicitSwitch