Dokumentation Journey Optimizer B2B Dokumentation zu Journey Optimizer B2B Edition

Inhaltskomponenten content-components

Last update: Sun Jan 11 2026 00:00:00 GMT+0000 (Coordinated Universal Time)

Themen:

Erstellt für:

Benutzende

Verwenden Sie beim Entwerfen von Inhalten für E-Mails, Landingpages, Vorlagen und visuelle Fragmente die Inhaltskomponenten, um visuelle Design-Elemente hinzuzufügen. Sie können beliebig viele Inhaltskomponenten zu einer oder mehreren Strukturkomponenten hinzufügen, die das Layout definieren.

Inhaltsbibliothek

Im Inhalt unten in der Komponentenbibliothek werden die verfügbaren Inhaltskomponenten angezeigt:

Symbol

Komponente

Beschreibung

Container

Fügen Sie diese Komponente zu Ihrem Design hinzu, um einen rechteckigen Container einzuschließen, mit dem Sie Komponenten gruppieren oder Hintergrund- oder Rahmenstile auf einen Bereich anwenden können.

button

Fügen Sie diese Komponente zu Ihrem Design hinzu, um ein anklickbares Schaltflächenelement einzuschließen.

Text

Fügen Sie diese Komponente zu Ihrem Design hinzu, um einen Textkörper einzuschließen.

Teiler

Fügen Sie diese Komponente zu Ihrem Design hinzu, um separate Inhaltsbereiche mit einer horizontalen Linie zu versehen.

HTML

Fügen Sie diese Komponente zu Ihrem Design hinzu, um die verschiedenen Teile Ihrer bestehenden HTML zu kopieren und einzufügen. Verwenden Sie diese Komponente, um einen kostenlosen modularen HTML-Block zur Wiederverwendung von externem Inhalt zu erstellen.

Bild

Fügen Sie diese Komponente zu Ihrem Design hinzu, um eine Bilddatei einzufügen.

Social

Fügen Sie diese Komponente zu Ihrem Design hinzu, um Links zu Social-Media-Seiten einzufügen.

Formular

Nur für Landingpages verfügbar. Fügen Sie diese Komponente zu Ihrem Design hinzu, um ein erstelltes Formular einzufügen.

Inhaltskomponenten-Symbolleisten

Jeder Inhaltskomponententyp zeigt eine Symbolleiste an, wenn Sie ihn auf der Arbeitsfläche auswählen. Die verfügbaren Tools, die je nach Komponententyp variieren, bieten eine einfache Möglichkeit, mit der Komponente direkt im gerenderten Inhalt zu arbeiten. Es enthält Formatierungs- und Funktionsfunktionen, die für den Komponententyp gelten.

Inhaltskomponenten-Symbolleiste {width="450"}

Formatierungswerkzeuge

Textstil ändern

table 0-row-3 1-row-3 html-authored
Tool	Nutzung	Komponenten
{width="120px"}	Anwenden von fett, kursiv, unterstrichen oder Durchgestrichen, hochgestellt oder tiefgestellt auf die ausgewählte Textzeichenfolge.	Schaltfläche Text

Horizontale Ausrichtung

table 0-row-3 1-row-3 html-authored
Tool	Nutzung	Komponenten
{width="120px"}	Wenden Sie einen horizontalen Ausrichtungstyp auf den Komponenteninhalt an. Wählen Sie links, zentriert, rechts oder Blocksatz.	Schaltfläche Text

Liste erstellen

table 0-row-3 1-row-3 html-authored
Tool	Nutzung	Komponenten
{width="120px"}	Anwenden einer geordneten oder ungeordneten Listenformatierung auf den Komponententext.	Text

Überschrift festlegen

table 0-row-3 1-row-3 html-authored
Tool	Nutzung	Komponenten
{width="60px"}	Anwenden der Formatierung auf Überschriftenebene auf den Absatz für die Cursorposition.	Schaltfläche Text

Schriftgröße

table 0-row-3 1-row-3 html-authored
Tool	Nutzung	Komponenten
{width="60px"}	Anwenden der Schriftgröße auf einen ausgewählten Text Klicken Sie auf das Tool, und wählen Sie die Größe aus, oder geben Sie den px-Wert ein.	Schaltfläche Text

Schriftfarbe

table 0-row-3 1-row-3 html-authored
Tool	Nutzung	Komponenten
{width="160px"}	Anwenden der Schriftfarbe auf den ausgewählten Text. Wählen Sie eine Farbe aus der Auswahl und verwenden Sie den Farbregler und das Farbfeld, um die Farbe auszuwählen. Sie können auch einen bekannten RGB-, HSL-, HSB- oder Hexadezimalwert eingeben.	Schaltfläche Text

Link einfügen

table 0-row-3 1-row-3 html-authored
Tool	Nutzung	Komponenten
{width="120px"}	Erstellen Sie einen anklickbaren Link (externe URL oder Landingpage) für den ausgewählten Text oder das ausgewählte Element.	Schaltfläche Text Bild

Link entfernen

table 0-row-3 1-row-3 html-authored
Tool	Nutzung	Komponenten
{width="80px"}	Entfernen Sie den anklickbaren Link (externe URL oder Landingpage) für den ausgewählten Text oder das ausgewählte Element.	Schaltfläche Text Bild

Funktionale Tools

Tool

Name

Nutzung

{width="40"}

Hinzufügen von Personalisierung

Verwenden Sie den Personalisierungseditor, um Personalisierungs-Token in den Komponenteninhalt einzufügen. Weitere Informationen

{width="40"}

Quellcode anzeigen

Den HTML-Quell-Code für die Komponente in einem schreibgeschützten Popup anzeigen.

{width="200"}

{width="40"}

Bedingten Inhalt aktivieren

(E-Mails und Fragmente) Aktivieren bedingter Varianten für die Komponente. Weitere Informationen

{width="40"}

Duplizieren

Erstellen Sie eine Kopie der Komponente und fügen Sie sie direkt unten hinzu.

{width="40"}

Löschen

Entfernen Sie die Komponente.

Hinzufügen einer Inhaltskomponente zu einem Design

Verwenden Sie im visuellen Design eine vorhandene Vorlage oder fügen Sie die erforderlichen Strukturkomponenten zu einer leeren Arbeitsfläche hinzu, um das Layout zu definieren.
Greifen Sie in der Komponenten-Bibliothek Ziehgriff für die Inhaltskomponente Ihrer Wahl und ziehen Sie sie dann auf die Strukturkomponenten.

Sie können zu einer einzelnen Strukturkomponente und zu jeder Spalte einer Strukturkomponente mehrere Komponenten hinzufügen.

{width="600" modal="regular"}
Passen Sie die Komponentenanzeige mit den Registerkarten Einstellungen und Stil auf der rechten Seite oder der auf der Arbeitsfläche angezeigten Kontextsymbolleiste an.

Sie können beispielsweise den Textstil, den Abstand oder den Rand der Komponente ändern.

{width="600" modal="regular"}

Während Sie mit Ihrem Design arbeiten, können Sie eine Komponente auch entfernen oder duplizieren.

Einstellungen und Stile der Inhaltskomponenten

Nachdem Sie eine Komponente hinzugefügt haben, wird sie im visuellen Design-Bereich ausgewählt und ihre Eigenschaften werden im rechten Bedienfeld angezeigt. Sie können auch jederzeit eine Komponente auswählen, um die Einstellungen und Stile zu ändern. Viele Einstellungen und Stile sind komponentenspezifisch, es gibt jedoch einige Standardeinstellungen und -stile, die Sie auf ausgewählte Inhaltskomponenten anwenden können.

Anzeigeoptionen

Wenn Sie die Komponente von der Desktop- oder Mobilgeräteanzeige ausschließen möchten, ändern Sie die Einstellung Anzeigeoptionen. Die Standardeinstellung (auf allen Geräten anzeigen aktiviert die Anzeige auf allen Geräten. Wählen Sie eine andere Einstellung aus, um die Komponente nach Gerätetyp auszuschließen:

Nur auf Desktop-Geräten anzeigen - Wählen Sie diese Einstellung, wenn Sie die Komponente auf Desktop-Geräten anzeigen und für Mobilgeräte ausschließen möchten.
Nur auf Mobilgeräten anzeigen - Wählen Sie diese Einstellung, wenn Sie die Komponente auf Mobilgeräten (wie Smartphones und Tablets) anzeigen und von Desktop-Geräten ausschließen möchten.

Anzeigeoptionen für die Inhaltskomponente {width="400" modal="regular"}

Container

Verwenden Sie einen Container, um bestimmte Stile auf eine Gruppe von Inhaltskomponenten anzuwenden. Fügen Sie Komponente "" hinzu und fügen Sie dann darin weitere Inhaltskomponenten hinzu. Diese Komponente ähnelt der Verwendung eines div in HTML. Sie können einen eigenen Stil auf den Container anwenden, der sich von dem Stil unterscheidet, der auf die darin enthaltenen Inhaltskomponenten angewendet wurde.

Fügen Sie beispielsweise die Komponente Container hinzu, und fügen Sie anschließend die Komponente Schaltfläche innerhalb dieses Containers hinzu. Sie können einen bestimmten Bereichsstil für den Container verwenden und die Schaltfläche und ihren Hintergrund nach Bedarf gestalten.

Container-Inhaltskomponenten-Stile {width="600" modal="regular"}

Hintergrund

Wenn Sie im rechten Bedienfeld die Stile ausgewählt haben, definieren Sie im Abschnitt Hintergrund die Hintergrundfarbe für die Komponente.

Aktivieren Sie das Kontrollkästchen und klicken Sie auf das Farbfeld, um eine Farbe aus der Auswahl auszuwählen. Sie können eine Farbe auswählen, indem Sie einen bekannten RGB-, HSL-, HSB- oder Hexadezimalwert eingeben. Sie können auch den Farbregler und das Farbfeld verwenden, um die Farbe auszuwählen.

Hintergrundfarbauswahl {width="300"}

Rahmen

Erweitern Sie im rechten Bedienfeld mit ausgewählten Registerkarte den Abschnitt Rahmen und legen Sie die Optionen zum Anzeigen eines Rahmens für die Komponente fest:
Schieben Sie den Umschalter nach rechts, um die Anzeigeoptionen für den Rahmen zu aktivieren und sie entsprechend Ihren Entwurfskriterien festzulegen:
- Um die Rahmenfarbe festzulegen, aktivieren Sie das Kontrollkästchen und klicken Sie auf das Farbfeld, um eine Farbe aus der Auswahl auszuwählen. Sie können eine Farbe auswählen, indem Sie einen bekannten RGB-, HSL-, HSB- oder Hexadezimalwert eingeben. Sie können auch den Farbregler und das Farbfeld verwenden, um die Farbe auszuwählen.
{width="300"}
- Zum Festlegen der Rahmengröße (Linienbreite) klicken Sie auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.
- Um den Rahmenstil“ festzulegen wählen Sie einen Wert aus der Liste der standardmäßigen CSS-border-style aus.
- Um zu bestimmen, wo der Rahmen angezeigt wird, aktivieren Sie jedes Kontrollkästchen Rahmenposition.
{width="250"}
Legen Sie für Rahmenradius den numerischen Wert entsprechend der gewünschten Kurve für die Ecken fest.

Ein Wert von 0 (Standard) ergibt eine quadratische Ecke.

Größe

Erweitern Sie im rechten Bedienfeld mit ausgewählten Registerkarte den Abschnitt Größe und legen Sie die Optionen für die Komponentenhöhe und -breite fest:

Höhe - Klicken Sie auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern. Ein leerer Wert (Auto) ist der Standardwert und bestimmt die Höhe des Elements entsprechend seinem Inhalt.
Breite - Verwenden Sie den Umschalter, um die Breite nach Pixel oder Prozentsatz festzulegen.
- Legen Sie für eine prozentuale Breite mithilfe des Schiebereglers den prozentualen Wert fest. Der Prozentsatz bestimmt die Elementgröße anhand des Inhaltsfelds des enthaltenden Blocks, wobei Auffüllung und Rahmen ausgeschlossen sind. Bei einem Wert von 50 wird beispielsweise die Elementbreite auf 50 % der Breite festgelegt, die den Block enthält.
  
  {width="250"}
- Klicken Sie bei einer pixelbasierten Breite auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern. Ein leerer Wert (Auto) ist der Standardwert und bestimmt die Breite des Elements entsprechend seinem Inhalt.
  
  {width="250"}

Spanne

Erweitern Sie im rechten Bedienfeld mit ausgewählten Registerkarte Stile“ den Abschnitt Rand und legen Sie die Optionen für den Randabstand in der Strukturkomponente fest. Dieser Stil repliziert den CSS-margin, der den Bereich außerhalb eines Komponentenrahmens steuert und ihn von anderen Komponenten trennt. Dadurch wird eine Lücke um die Komponente geschaffen, um ihre Positionierung und das Layout des umgebenden Inhalts zu beeinflussen.

Legen Sie die Randwerte in Pixeln entsprechend Ihren Design-Anforderungen fest. Sie können den Rand für alle Seiten, die obere Schaltfläche, die linke oder die rechte Seite der Komponente unabhängig voneinander festlegen:

Alle Seiten - Wenn Sie einen Wert festlegen möchten, der auf alle Seiten angewendet werden soll, deaktivieren das Kontrollkästchen „Unterschiedlicher Rand für jede Seite. Klicken Sie auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.

{width="250"}
Oben unten - Um die oberen und unteren Ränder auf denselben Wert festzulegen, legen Sie das Symbol Gesperrt zwischen den oberen und unteren Einstellungen fest. Klicken Sie auf die Pfeilsymbole nach oben bzw. unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.
Links-: Um die linken und rechten Ränder auf denselben Wert festzulegen, legen Sie das Symbol Gesperrt zwischen den linken und rechten Einstellungen fest. Klicken Sie auf die Pfeilsymbole nach oben bzw. unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.

{width="250"}
Unabhängig - Um jeden Rand auf einen unabhängigen Wert festzulegen, legen Sie das Symbol Entsperrt zwischen den oberen und unteren Einstellungen sowie zwischen der linken und rechten Einstellung fest. Klicken Sie für jede Einstellung auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.

{width="250"}

Ränder

Erweitern Sie im rechten Bedienfeld mit ausgewählten Registerkarte Stile“ den Abschnitt Padding und legen Sie die Optionen für den Abstand innerhalb der Strukturkomponente fest. Dieser Stil repliziert den CSS-padding, der den Abstand zwischen dem Inhalt einer Komponente und ihrem Rahmen darstellt. Der Abstand sorgt für einen internen Abstand, mit dem Sie den Abstand zwischen Inhalt und Rahmen der Komponente steuern können.

Legen Sie die Abstandswerte entsprechend Ihren Design-Anforderungen in Pixel fest. Sie können den Abstand für alle Seiten, die obere Schaltfläche, die linke oder die rechte Seite der Komponente unabhängig voneinander festlegen:

Alle Seiten - Wenn Sie einen Wert festlegen möchten, der auf alle Seiten angewendet werden soll, deaktivieren Sie das Kontrollkästchen Unterschiedlicher Abstand für jede Seite. Klicken Sie auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.

{width="250"}
Oben-unten - Um den oberen und unteren Abstand auf denselben Wert festzulegen, legen Sie das Symbol Gesperrt zwischen den oberen und unteren Einstellungen fest. Klicken Sie auf die Pfeilsymbole nach oben bzw. unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.
Left-Right - Um den linken und rechten Abstand auf denselben Wert festzulegen, legen Sie das Symbol Locked zwischen den linken und rechten Einstellungen fest. Klicken Sie auf die Pfeilsymbole nach oben bzw. unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.

{width="250"}
Unabhängig - Wenn Sie den Abstand für jede Seite auf einen unabhängigen Wert festlegen möchten, legen Sie das Symbol Entsperrt zwischen den oberen und unteren Einstellungen sowie zwischen der linken und der rechten Seite fest. Klicken Sie für jede Einstellung auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.

{width="250"}

Schaltfläche

Verwenden Sie die Button-Komponente, um eine oder mehrere anklickbare Schaltflächen in Ihren Inhalt einzufügen. Verwenden Sie Schaltflächen, um Seitenbetrachter oder E-Mail-Empfänger zu unterstützenden Inhalten weiterzuleiten (veröffentlichte Landingpage oder externer Link).

Schaltflächentext hinzufügen

Wenn die Schaltflächenkomponente auf der Arbeitsfläche angezeigt wird, enthält die Symbolleiste Optionen für die Textformatierung sowie Personalisierung und bedingte Varianten. Weitere Informationen zu den Optionen der Editor-Symbolleiste finden Sie unter #.

Wenn Sie den Text der Schaltflächenbeschriftung eingeben und die Formatierung festlegen, wird die Größe der Schaltfläche geändert, um den Inhalt aufzunehmen.

Schaltflächenkomponente mit Symbolleiste angezeigt {width="500" modal="regular"}

Festlegen von Link-Optionen

Verwenden Sie auf Registerkarte die Optionen Link, um den Schaltflächentext, das Link-Ziel und das Browser-Verhalten zum Laden der Zielseite zu definieren.

Legen Sie den Typ für den Link fest:
- Externer Link - Wählen Sie diesen Typ aus, um eine Standard-URL als Link-Ziel zu verwenden.
  
  Geben unter die URL für das Link-Ziel ein. Klicken Sie auf das Symbol Personalisieren ( ), um ein Personalisierungs-Token als Parameter in der URL zu verwenden.
  
  {width="200"}
- Landingpage - Wählen Sie diesen Typ, um eine veröffentlichte Landingpage in der Marketo Engage-Instanz auszuwählen.
  
  Wählen Sie für Option die veröffentlichte Landingpage aus. Klicken Sie auf das Seite auswählen-Symbol ( ) und wählen Sie die veröffentlichte Landingpage aus.
  
  {width="200"}
Geben unter den Text ein, der in der Schaltfläche angezeigt werden soll.

Die Größe der Schaltfläche wird entsprechend dem Text und dem Stil angepasst, der festgelegt ist.
Wählen Sie für Target aus, wie das verknüpfte Ziel von der E-Mail oder Seite umgeleitet werden soll:
- None - Öffnet den Link mit dem Standard-Browser oder dem Client-Verhalten (Standard).
- Leer - Öffnet den Link in einem neuen Fenster oder in einer neuen Registerkarte.
- Self - Öffnet den Link im selben Frame.
- Parent - Öffnet den Link im übergeordneten Frame.
- Oben - Öffnet den Link im gesamten Fenster.

Stile festlegen

Passen Sie den Schaltflächenstil auf der Registerkarte Stile an.

Hintergrund

Wenn Sie im rechten Bedienfeld die Stile ausgewählt haben, definieren Sie im Abschnitt Hintergrund die Hintergrundfarbe für die Komponente.

Hintergrundfarbauswahl {width="300"}

Text

Erweitern Sie im rechten Bedienfeld mit ausgewählten Registerkarte Stile“ den Abschnitt Text und legen Sie die Optionen für die Komponenten-Textstile fest:

Schriftfamilie - Klicken Sie auf das Abwärtspfeilsymbol, um eine Schriftfamilie für Text in der Komponente auszuwählen.
Schriftgröße - Klicken Sie auf die Pfeilsymbole nach oben und unten, um die Schriftgröße zu erhöhen oder zu verringern, oder geben Sie einen Wert ein. Für eingegebene Werte können Sie Dezimalzahlen verwenden.
Zeilenhöhe - Klicken Sie auf die Pfeilsymbole nach oben und unten, um die Zeilenhöhe zu erhöhen oder zu verringern, oder geben Sie einen Wert ein. Für eingegebene Werte können Sie Dezimalzahlen verwenden.

{width="250"}
Textstile - Wählen Sie das Symbol für den Textstil aus: Fett, Kursiv, Unterstrichen oder Durchgestrichen.
Textausrichtung - Wählen Sie das Symbol für die horizontale Textausrichtung aus: Links, Zentriert, Rechts oder Blocksatz.
Schriftfarbe - Klicken Sie auf das Farbquadrat, um eine Schriftfarbe aus der Auswahl auszuwählen. Sie können eine Farbe auswählen, indem Sie einen bekannten RGB-, HSL-, HSB- oder Hexadezimalwert eingeben. Sie können auch den Farbregler und das Farbfeld verwenden, um die Farbe auszuwählen.

{width="300"}

Rahmen

Erweitern Sie im rechten Bedienfeld mit ausgewählten Registerkarte den Abschnitt Rahmen und legen Sie die Optionen zum Anzeigen eines Rahmens für die Komponente fest:
Schieben Sie den Umschalter nach rechts, um die Anzeigeoptionen für den Rahmen zu aktivieren und sie entsprechend Ihren Entwurfskriterien festzulegen:
- Um die Rahmenfarbe festzulegen, aktivieren Sie das Kontrollkästchen und klicken Sie auf das Farbfeld, um eine Farbe aus der Auswahl auszuwählen. Sie können eine Farbe auswählen, indem Sie einen bekannten RGB-, HSL-, HSB- oder Hexadezimalwert eingeben. Sie können auch den Farbregler und das Farbfeld verwenden, um die Farbe auszuwählen.
{width="300"}
- Zum Festlegen der Rahmengröße (Linienbreite) klicken Sie auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.
- Um den Rahmenstil“ festzulegen wählen Sie einen Wert aus der Liste der standardmäßigen CSS-border-style aus.
- Um zu bestimmen, wo der Rahmen angezeigt wird, aktivieren Sie jedes Kontrollkästchen Rahmenposition.
{width="250"}
Legen Sie für Rahmenradius den numerischen Wert entsprechend der gewünschten Kurve für die Ecken fest.

Ein Wert von 0 (Standard) ergibt eine quadratische Ecke.

Größe

Erweitern Sie im rechten Bedienfeld mit ausgewählten Registerkarte den Abschnitt Größe und legen Sie die Optionen für die Komponentenhöhe und -breite fest:

Höhe - Klicken Sie auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern. Ein leerer Wert (Auto) ist der Standardwert und bestimmt die Höhe des Elements entsprechend seinem Inhalt.
Breite - Verwenden Sie den Umschalter, um die Breite nach Pixel oder Prozentsatz festzulegen.
- Legen Sie für eine prozentuale Breite mithilfe des Schiebereglers den prozentualen Wert fest. Der Prozentsatz bestimmt die Elementgröße anhand des Inhaltsfelds des enthaltenden Blocks, wobei Auffüllung und Rahmen ausgeschlossen sind. Bei einem Wert von 50 wird beispielsweise die Elementbreite auf 50 % der Breite festgelegt, die den Block enthält.
  
  {width="250"}
- Klicken Sie bei einer pixelbasierten Breite auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern. Ein leerer Wert (Auto) ist der Standardwert und bestimmt die Breite des Elements entsprechend seinem Inhalt.
  
  {width="250"}

+++Ausrichtung

+++

+++Rand der Schaltfläche

+++

Container-Rand

Alle Seiten - Wenn Sie einen Wert festlegen möchten, der auf alle Seiten angewendet werden soll, deaktivieren das Kontrollkästchen „Unterschiedlicher Rand für jede Seite. Klicken Sie auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.

{width="250"}
Oben unten - Um die oberen und unteren Ränder auf denselben Wert festzulegen, legen Sie das Symbol Gesperrt zwischen den oberen und unteren Einstellungen fest. Klicken Sie auf die Pfeilsymbole nach oben bzw. unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.
Links-: Um die linken und rechten Ränder auf denselben Wert festzulegen, legen Sie das Symbol Gesperrt zwischen den linken und rechten Einstellungen fest. Klicken Sie auf die Pfeilsymbole nach oben bzw. unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.

{width="250"}
Unabhängig - Um jeden Rand auf einen unabhängigen Wert festzulegen, legen Sie das Symbol Entsperrt zwischen den oberen und unteren Einstellungen sowie zwischen der linken und rechten Einstellung fest. Klicken Sie für jede Einstellung auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.

{width="250"}

Ränder

Alle Seiten - Wenn Sie einen Wert festlegen möchten, der auf alle Seiten angewendet werden soll, deaktivieren Sie das Kontrollkästchen Unterschiedlicher Abstand für jede Seite. Klicken Sie auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.

{width="250"}
Oben-unten - Um den oberen und unteren Abstand auf denselben Wert festzulegen, legen Sie das Symbol Gesperrt zwischen den oberen und unteren Einstellungen fest. Klicken Sie auf die Pfeilsymbole nach oben bzw. unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.
Left-Right - Um den linken und rechten Abstand auf denselben Wert festzulegen, legen Sie das Symbol Locked zwischen den linken und rechten Einstellungen fest. Klicken Sie auf die Pfeilsymbole nach oben bzw. unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.

{width="250"}
Unabhängig - Wenn Sie den Abstand für jede Seite auf einen unabhängigen Wert festlegen möchten, legen Sie das Symbol Entsperrt zwischen den oberen und unteren Einstellungen sowie zwischen der linken und der rechten Seite fest. Klicken Sie für jede Einstellung auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.

{width="250"}

Erweitert

Verwenden Sie die Stileinstellungen Erweitert, um zusätzliche CSS-kompatible Attribute mit Werten anzuwenden. Sie können die Werte der vorhandenen Attribute ändern oder neue hinzufügen. Die Formatierung wird mithilfe des CSS-Vererbungsmodells für über- und untergeordnete Komponenten (Elemente) auf die Komponente angewendet.

Die angezeigten Attribute spiegeln die Stile wider, die derzeit für die Komponente definiert sind. Sie können die Werte entsprechend den CSS-Definitionen ändern. Klicken Sie auf Hinzufügen (+), um ein neues Stilattribut für die Komponente hinzuzufügen.

Erweiterte Stile {width="250"}

Text

Verwenden Sie die Komponente Text , um einen Textblock in Ihren Inhalt einzufügen. Wenn die Textkomponente auf der Arbeitsfläche ausgewählt ist, geben Sie den Text ein und verwenden Sie die Symbolleistenoptionen, um Inline-Formatierung und Optionen hinzuzufügen, einschließlich Personalisierungs-Token und bedingter Varianten.

Passen Sie den Stil der Textkomponente auf der Registerkarte Stile an.

Hintergrund

Wenn Sie im rechten Bedienfeld die Stile ausgewählt haben, definieren Sie im Abschnitt Hintergrund die Hintergrundfarbe für die Komponente.

Hintergrundfarbauswahl {width="300"}

Text

Diese Stile werden auf den gesamten Textblock angewendet. Sie können Inline-Stile auf eine ausgewählte Textzeichenfolge anwenden.

Erweitern Sie im rechten Bedienfeld mit ausgewählten Registerkarte Stile“ den Abschnitt Text und legen Sie die Optionen für die Komponenten-Textstile fest:

Schriftfamilie - Klicken Sie auf das Abwärtspfeilsymbol, um eine Schriftfamilie für Text in der Komponente auszuwählen.
Schriftgröße - Klicken Sie auf die Pfeilsymbole nach oben und unten, um die Schriftgröße zu erhöhen oder zu verringern, oder geben Sie einen Wert ein. Für eingegebene Werte können Sie Dezimalzahlen verwenden.
Zeilenhöhe - Klicken Sie auf die Pfeilsymbole nach oben und unten, um die Zeilenhöhe zu erhöhen oder zu verringern, oder geben Sie einen Wert ein. Für eingegebene Werte können Sie Dezimalzahlen verwenden.

{width="250"}
Textstile - Wählen Sie das Symbol für den Textstil aus: Fett, Kursiv, Unterstrichen oder Durchgestrichen.
Textausrichtung - Wählen Sie das Symbol für die horizontale Textausrichtung aus: Links, Zentriert, Rechts oder Blocksatz.
Schriftfarbe - Klicken Sie auf das Farbquadrat, um eine Schriftfarbe aus der Auswahl auszuwählen. Sie können eine Farbe auswählen, indem Sie einen bekannten RGB-, HSL-, HSB- oder Hexadezimalwert eingeben. Sie können auch den Farbregler und das Farbfeld verwenden, um die Farbe auszuwählen.

{width="300"}

Rahmen

Erweitern Sie im rechten Bedienfeld mit ausgewählten Registerkarte den Abschnitt Rahmen und legen Sie die Optionen zum Anzeigen eines Rahmens für die Komponente fest:
Schieben Sie den Umschalter nach rechts, um die Anzeigeoptionen für den Rahmen zu aktivieren und sie entsprechend Ihren Entwurfskriterien festzulegen:
- Um die Rahmenfarbe festzulegen, aktivieren Sie das Kontrollkästchen und klicken Sie auf das Farbfeld, um eine Farbe aus der Auswahl auszuwählen. Sie können eine Farbe auswählen, indem Sie einen bekannten RGB-, HSL-, HSB- oder Hexadezimalwert eingeben. Sie können auch den Farbregler und das Farbfeld verwenden, um die Farbe auszuwählen.
{width="300"}
- Zum Festlegen der Rahmengröße (Linienbreite) klicken Sie auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.
- Um den Rahmenstil“ festzulegen wählen Sie einen Wert aus der Liste der standardmäßigen CSS-border-style aus.
- Um zu bestimmen, wo der Rahmen angezeigt wird, aktivieren Sie jedes Kontrollkästchen Rahmenposition.
{width="250"}
Legen Sie für Rahmenradius den numerischen Wert entsprechend der gewünschten Kurve für die Ecken fest.

Ein Wert von 0 (Standard) ergibt eine quadratische Ecke.

Größe

Erweitern Sie im rechten Bedienfeld mit ausgewählten Registerkarte den Abschnitt Größe und legen Sie die Optionen für die Komponentenhöhe und -breite fest:

Höhe - Klicken Sie auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern. Ein leerer Wert (Auto) ist der Standardwert und bestimmt die Höhe des Elements entsprechend seinem Inhalt.
Breite - Verwenden Sie den Umschalter, um die Breite nach Pixel oder Prozentsatz festzulegen.
- Legen Sie für eine prozentuale Breite mithilfe des Schiebereglers den prozentualen Wert fest. Der Prozentsatz bestimmt die Elementgröße anhand des Inhaltsfelds des enthaltenden Blocks, wobei Auffüllung und Rahmen ausgeschlossen sind. Bei einem Wert von 50 wird beispielsweise die Elementbreite auf 50 % der Breite festgelegt, die den Block enthält.
  
  {width="250"}
- Klicken Sie bei einer pixelbasierten Breite auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern. Ein leerer Wert (Auto) ist der Standardwert und bestimmt die Breite des Elements entsprechend seinem Inhalt.
  
  {width="250"}

Spanne

Alle Seiten - Wenn Sie einen Wert festlegen möchten, der auf alle Seiten angewendet werden soll, deaktivieren das Kontrollkästchen „Unterschiedlicher Rand für jede Seite. Klicken Sie auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.

{width="250"}
Oben unten - Um die oberen und unteren Ränder auf denselben Wert festzulegen, legen Sie das Symbol Gesperrt zwischen den oberen und unteren Einstellungen fest. Klicken Sie auf die Pfeilsymbole nach oben bzw. unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.
Links-: Um die linken und rechten Ränder auf denselben Wert festzulegen, legen Sie das Symbol Gesperrt zwischen den linken und rechten Einstellungen fest. Klicken Sie auf die Pfeilsymbole nach oben bzw. unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.

{width="250"}
Unabhängig - Um jeden Rand auf einen unabhängigen Wert festzulegen, legen Sie das Symbol Entsperrt zwischen den oberen und unteren Einstellungen sowie zwischen der linken und rechten Einstellung fest. Klicken Sie für jede Einstellung auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.

{width="250"}

Ränder

Alle Seiten - Wenn Sie einen Wert festlegen möchten, der auf alle Seiten angewendet werden soll, deaktivieren Sie das Kontrollkästchen Unterschiedlicher Abstand für jede Seite. Klicken Sie auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.

{width="250"}
Oben-unten - Um den oberen und unteren Abstand auf denselben Wert festzulegen, legen Sie das Symbol Gesperrt zwischen den oberen und unteren Einstellungen fest. Klicken Sie auf die Pfeilsymbole nach oben bzw. unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.
Left-Right - Um den linken und rechten Abstand auf denselben Wert festzulegen, legen Sie das Symbol Locked zwischen den linken und rechten Einstellungen fest. Klicken Sie auf die Pfeilsymbole nach oben bzw. unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.

{width="250"}
Unabhängig - Wenn Sie den Abstand für jede Seite auf einen unabhängigen Wert festlegen möchten, legen Sie das Symbol Entsperrt zwischen den oberen und unteren Einstellungen sowie zwischen der linken und der rechten Seite fest. Klicken Sie für jede Einstellung auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.

{width="250"}

Erweitert

Erweiterte Stile {width="250"}

Trennlinie

Fügen Sie Komponente Trennzeichen“ hinzu, um eine lineare Aufteilung zwischen Inhaltsabschnitten zu ermöglichen.

Hintergrund

Wenn Sie im rechten Bedienfeld die Stile ausgewählt haben, definieren Sie im Abschnitt Hintergrund die Hintergrundfarbe für die Komponente.

Hintergrundfarbauswahl {width="300"}

+++Zeile

+++

Größe

Erweitern Sie im rechten Bedienfeld mit ausgewählten Registerkarte den Abschnitt Größe und legen Sie die Optionen für die Komponentenhöhe und -breite fest:

Höhe - Klicken Sie auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern. Ein leerer Wert (Auto) ist der Standardwert und bestimmt die Höhe des Elements entsprechend seinem Inhalt.
Breite - Verwenden Sie den Umschalter, um die Breite nach Pixel oder Prozentsatz festzulegen.
- Legen Sie für eine prozentuale Breite mithilfe des Schiebereglers den prozentualen Wert fest. Der Prozentsatz bestimmt die Elementgröße anhand des Inhaltsfelds des enthaltenden Blocks, wobei Auffüllung und Rahmen ausgeschlossen sind. Bei einem Wert von 50 wird beispielsweise die Elementbreite auf 50 % der Breite festgelegt, die den Block enthält.
  
  {width="250"}
- Klicken Sie bei einer pixelbasierten Breite auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern. Ein leerer Wert (Auto) ist der Standardwert und bestimmt die Breite des Elements entsprechend seinem Inhalt.
  
  {width="250"}

Ausrichtung

Erweitern Sie den Abschnitt Ausrichtung und wählen Sie die horizontale Ausrichtung aus, die Sie verwenden möchten: links, zentriert oder rechts. Dieser Stil wird in einen standardmäßigen text-align-CSS-Stil übersetzt und wirkt sich darauf aus, wie die Komponente in der enthaltenden Komponente positioniert wird.

Horizontale Ausrichtungsstile {width="250"}

Spanne

Alle Seiten - Wenn Sie einen Wert festlegen möchten, der auf alle Seiten angewendet werden soll, deaktivieren das Kontrollkästchen „Unterschiedlicher Rand für jede Seite. Klicken Sie auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.

{width="250"}
Oben unten - Um die oberen und unteren Ränder auf denselben Wert festzulegen, legen Sie das Symbol Gesperrt zwischen den oberen und unteren Einstellungen fest. Klicken Sie auf die Pfeilsymbole nach oben bzw. unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.
Links-: Um die linken und rechten Ränder auf denselben Wert festzulegen, legen Sie das Symbol Gesperrt zwischen den linken und rechten Einstellungen fest. Klicken Sie auf die Pfeilsymbole nach oben bzw. unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.

{width="250"}
Unabhängig - Um jeden Rand auf einen unabhängigen Wert festzulegen, legen Sie das Symbol Entsperrt zwischen den oberen und unteren Einstellungen sowie zwischen der linken und rechten Einstellung fest. Klicken Sie für jede Einstellung auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.

{width="250"}

Ränder

Alle Seiten - Wenn Sie einen Wert festlegen möchten, der auf alle Seiten angewendet werden soll, deaktivieren Sie das Kontrollkästchen Unterschiedlicher Abstand für jede Seite. Klicken Sie auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.

{width="250"}
Oben-unten - Um den oberen und unteren Abstand auf denselben Wert festzulegen, legen Sie das Symbol Gesperrt zwischen den oberen und unteren Einstellungen fest. Klicken Sie auf die Pfeilsymbole nach oben bzw. unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.
Left-Right - Um den linken und rechten Abstand auf denselben Wert festzulegen, legen Sie das Symbol Locked zwischen den linken und rechten Einstellungen fest. Klicken Sie auf die Pfeilsymbole nach oben bzw. unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.

{width="250"}
Unabhängig - Wenn Sie den Abstand für jede Seite auf einen unabhängigen Wert festlegen möchten, legen Sie das Symbol Entsperrt zwischen den oberen und unteren Einstellungen sowie zwischen der linken und der rechten Seite fest. Klicken Sie für jede Einstellung auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.

{width="250"}

Erweitert

Erweiterte Stile {width="250"}

HTML

Verwenden Sie die HTML-Komponente, um Teile Ihrer bestehenden HTML hinzuzufügen. Diese Komponente bietet eine einfache Möglichkeit, modulare HTML-Elemente zu erstellen, die Ihre externen Inhalte wiederverwenden.

Wählen Sie die Komponente auf der Arbeitsfläche aus und klicken Sie auf Symbolleiste auf das Symbol Quellcode anzeigen“.

Öffnen Sie den Code-Editor, um die HTML hinzuzufügen
Fügen Sie die HTML in das Textfeld ein und klicken Sie auf Speichern.

Dialogfeld "HTML bearbeiten“

Wenn die HTML gültig ist, wird das Element auf der Arbeitsfläche gerendert. Wenn es sich um ein Element handelt, das einer der anderen Inhaltskomponenten zugeordnet ist, können Sie die Einstellungen und Stile im rechten Bedienfeld je nach Komponententyp ändern. Ist dies nicht der Fall, bleibt sie als HTML-Komponente erhalten.

Für eine HTML-Komponente können Sie die folgenden Stile für die gesamte HTML-Komponente im rechten Bedienfeld festlegen:

Hintergrund

Wenn Sie im rechten Bedienfeld die Stile ausgewählt haben, definieren Sie im Abschnitt Hintergrund die Hintergrundfarbe für die Komponente.

Hintergrundfarbauswahl {width="300"}

Rahmen

Erweitern Sie im rechten Bedienfeld mit ausgewählten Registerkarte den Abschnitt Rahmen und legen Sie die Optionen zum Anzeigen eines Rahmens für die Komponente fest:
Schieben Sie den Umschalter nach rechts, um die Anzeigeoptionen für den Rahmen zu aktivieren und sie entsprechend Ihren Entwurfskriterien festzulegen:
- Um die Rahmenfarbe festzulegen, aktivieren Sie das Kontrollkästchen und klicken Sie auf das Farbfeld, um eine Farbe aus der Auswahl auszuwählen. Sie können eine Farbe auswählen, indem Sie einen bekannten RGB-, HSL-, HSB- oder Hexadezimalwert eingeben. Sie können auch den Farbregler und das Farbfeld verwenden, um die Farbe auszuwählen.
{width="300"}
- Zum Festlegen der Rahmengröße (Linienbreite) klicken Sie auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.
- Um den Rahmenstil“ festzulegen wählen Sie einen Wert aus der Liste der standardmäßigen CSS-border-style aus.
- Um zu bestimmen, wo der Rahmen angezeigt wird, aktivieren Sie jedes Kontrollkästchen Rahmenposition.
{width="250"}
Legen Sie für Rahmenradius den numerischen Wert entsprechend der gewünschten Kurve für die Ecken fest.

Ein Wert von 0 (Standard) ergibt eine quadratische Ecke.

Größe

Erweitern Sie im rechten Bedienfeld mit ausgewählten Registerkarte den Abschnitt Größe und legen Sie die Optionen für die Komponentenhöhe und -breite fest:

Höhe - Klicken Sie auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern. Ein leerer Wert (Auto) ist der Standardwert und bestimmt die Höhe des Elements entsprechend seinem Inhalt.
Breite - Verwenden Sie den Umschalter, um die Breite nach Pixel oder Prozentsatz festzulegen.
- Legen Sie für eine prozentuale Breite mithilfe des Schiebereglers den prozentualen Wert fest. Der Prozentsatz bestimmt die Elementgröße anhand des Inhaltsfelds des enthaltenden Blocks, wobei Auffüllung und Rahmen ausgeschlossen sind. Bei einem Wert von 50 wird beispielsweise die Elementbreite auf 50 % der Breite festgelegt, die den Block enthält.
  
  {width="250"}
- Klicken Sie bei einer pixelbasierten Breite auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern. Ein leerer Wert (Auto) ist der Standardwert und bestimmt die Breite des Elements entsprechend seinem Inhalt.
  
  {width="250"}

Ausrichtung

Erweitern Sie den Abschnitt Ausrichtung und wählen Sie die horizontale und vertikale Ausrichtung aus, die Sie verwenden möchten. Die Ausrichtungsstile beeinflussen, wie die HTML-Komponente innerhalb der enthaltenden Komponente (Struktur oder Container) positioniert wird.

Die horizontale Ausrichtung wird in einen standardmäßigen text-align-CSS-Stil übersetzt und Sie können zwischen links, zentriert oder rechts wählen. Die vertikale Ausrichtung entspricht dem standardmäßigen vertical-align-CSS-Stil. Sie können zwischen oben, Mitte oder unten wählen.

Ausrichtungsstile für eine HTML-Komponente {width="300"}

Spanne

Alle Seiten - Wenn Sie einen Wert festlegen möchten, der auf alle Seiten angewendet werden soll, deaktivieren das Kontrollkästchen „Unterschiedlicher Rand für jede Seite. Klicken Sie auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.

{width="250"}
Oben unten - Um die oberen und unteren Ränder auf denselben Wert festzulegen, legen Sie das Symbol Gesperrt zwischen den oberen und unteren Einstellungen fest. Klicken Sie auf die Pfeilsymbole nach oben bzw. unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.
Links-: Um die linken und rechten Ränder auf denselben Wert festzulegen, legen Sie das Symbol Gesperrt zwischen den linken und rechten Einstellungen fest. Klicken Sie auf die Pfeilsymbole nach oben bzw. unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.

{width="250"}
Unabhängig - Um jeden Rand auf einen unabhängigen Wert festzulegen, legen Sie das Symbol Entsperrt zwischen den oberen und unteren Einstellungen sowie zwischen der linken und rechten Einstellung fest. Klicken Sie für jede Einstellung auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.

{width="250"}

Ränder

Alle Seiten - Wenn Sie einen Wert festlegen möchten, der auf alle Seiten angewendet werden soll, deaktivieren Sie das Kontrollkästchen Unterschiedlicher Abstand für jede Seite. Klicken Sie auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.

{width="250"}
Oben-unten - Um den oberen und unteren Abstand auf denselben Wert festzulegen, legen Sie das Symbol Gesperrt zwischen den oberen und unteren Einstellungen fest. Klicken Sie auf die Pfeilsymbole nach oben bzw. unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.
Left-Right - Um den linken und rechten Abstand auf denselben Wert festzulegen, legen Sie das Symbol Locked zwischen den linken und rechten Einstellungen fest. Klicken Sie auf die Pfeilsymbole nach oben bzw. unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.

{width="250"}
Unabhängig - Wenn Sie den Abstand für jede Seite auf einen unabhängigen Wert festlegen möchten, legen Sie das Symbol Entsperrt zwischen den oberen und unteren Einstellungen sowie zwischen der linken und der rechten Seite fest. Klicken Sie für jede Einstellung auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.

{width="250"}

Erweitert

Erweiterte Stile {width="250"}

Bild

Verwenden Sie die Bild-Komponente, um ein Bild-Asset in Ihren Inhalt einzufügen. Wenn die Bild-Komponente auf der Arbeitsfläche ausgewählt ist, können Sie die angezeigte Bild-Asset-Datei hinzufügen oder ändern.

Bildkomponente mit Symbolleiste angezeigt {width="400" modal="regular"}

Bild-Asset hinzufügen

Wählen Sie den Asset-Quelltyp und wählen Sie eine Bilddatei aus:

/fragments/de/docs/journey-optimizer-b2b/user/content-management/content-design/content-components/fragment-0

6ef00091-a233-4243-8773-0da8461f7ef0