Inhaltskomponenten content-components
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 in eine oder mehrere Strukturkomponenten“ einfügen die das Layout definieren.
Inhaltsbibliothek
Im Inhalt der Komponentenbibliothek werden die verfügbaren Inhaltskomponenten angezeigt:
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. Die Symbolleiste enthält Formatierungs- und Funktionsfunktionen, die für den Komponententyp gelten.
Formatierungswerkzeuge
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Tool | Nutzung | Komponenten |
|
Anwenden von fett, kursiv, unterstrichen oder Durchgestrichen, hochgestellt oder tiefgestellt auf die ausgewählte Textzeichenfolge. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Tool | Nutzung | Komponenten |
|
Wenden Sie einen horizontalen Ausrichtungstyp auf den Komponenteninhalt an. Wählen Sie links, zentriert, rechts oder Blocksatz. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Tool | Nutzung | Komponenten |
|
Anwenden einer geordneten oder ungeordneten Listenformatierung auf den Komponententext. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Tool | Nutzung | Komponenten |
|
Anwenden der Formatierung auf Überschriftenebene auf den Absatz für die Cursorposition. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Tool | Nutzung | Komponenten |
|
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. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Tool | Nutzung | Komponenten |
|
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. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Tool | Nutzung | Komponenten |
|
Erstellen Sie einen anklickbaren Link für den ausgewählten Text oder das ausgewählte Element.
|
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Tool | Nutzung | Komponenten |
|
Entfernen Sie den anklickbaren Link für den ausgewählten Text oder das ausgewählte Element. |
|
Funktionale Tools
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
Sie können zu einer einzelnen Strukturkomponente und zu jeder Spalte einer Strukturkomponente mehrere Komponenten hinzufügen.
-
Passen Sie die Komponentenanzeige mit den Registerkarten Einstellungen und Stile 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.
Während Sie mit Ihrem Design arbeiten, können Sie eine Komponente auch mit den Tools Löschen und Duplizieren im Abschnitt Funktionstools 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.
Container 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.
Schaltfläche button
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 Inhaltskomponenten-Symbolleisten.
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.
Festlegen von Link-Optionen button-set-link-options
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 (
-
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 (
-
-
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 von Ihnen festgelegten Stil angepasst.
-
Wählen Sie 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.
Text 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.
Diese Stile werden auf den gesamten Textblock angewendet. Sie können Inline-Stile auf eine ausgewählte Textzeichenfolge anwenden.
{{styles-text}}
Trennlinie divider
Fügen Sie Komponente Trennzeichen“ hinzu, um eine lineare Aufteilung zwischen Inhaltsabschnitten zu ermöglichen.
Erweitern Sie im rechten Bedienfeld mit ausgewählten Registerkarte den Abschnitt Linie und legen Sie die Optionen für die Komponentenhöhe und -breite fest:
-
Farbe - 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.
-
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.
- 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.
-
Style - Wählen Sie einen Wert aus der Liste der standardmäßigen CSS-
line-styleaus, z B. Solid, Dotted und Dashed.
HTML 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“.
-
Fügen Sie die HTML in das Textfeld ein und klicken Sie auf Speichern.
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:
Bild image
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.
Bild-Asset hinzufügen add-image-asset
Methode zum Hinzufügen des Bild-Assets auswählen:
-
Asset auswählen - Wählen Sie diesen Typ aus, um ein Bild-Asset aus der Marketo Optimizer Assets-Bibliothek zu durchsuchen und auszuwählen.
Im Dialogfeld können Sie ein Bild aus dem ausgewählten Repository auswählen. Klicken Sie auf Auswählen, um das Asset hinzuzufügen.
Es stehen Tools zur Verfügung, mit denen Sie das benötigte Asset finden können:
-
Klicken Sie oben links auf Filter), um die angezeigten Elemente nach Ihren Kriterien zu filtern.
-
Geben Sie Text in das Suchen-Feld ein, um die angezeigten Elemente nach einer Übereinstimmung mit dem Asset-Namen zu filtern.
-
-
Medien importieren - Wählen Sie diesen Typ aus, um eine Datei aus Ihrem System auszuwählen und in die Marketo Optimizer Asset-Bibliothek zu importieren.
Ziehen im Dialogfeld Bild hochladen“ eine Datei aus dem System per Drag-and-Drop in das Feld „Datei“. Die maximale Dateigröße beträgt 100 MB.
Die Dateinamen der ausgewählten Bilder werden im Dialogfeld angezeigt. Asset-Dateinamen müssen eindeutig sein (in allen Ordnern). Wenn bereits eine Datei mit dem Namen vorhanden ist, wird eine Meldung angezeigt. Namen dürfen maximal 100 Zeichen lang sein und keine Sonderzeichen enthalten (beispielsweise
;,:,\und|).Klicken Sie Importieren.
Sie können einen Bildtitel und alternativen Text für das Bild im rechten Bereich hinzufügen.
Festlegen von Link-Optionen image-set-link-options
Verwenden Sie auf Registerkarte die Optionen Link, um das Bild mit einem Ziel und dem Browser-Verhalten zum Laden der Zielseite zu verknüpfen.
-
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 (
-
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 (
-
-
Geben unter optional einen beschreibenden Text für den Bild-Link ein.
-
Wählen Sie 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.
Festlegen der Stile
Legen Sie die Stile für die Bildkomponente im rechten Bedienfeld fest.
Social social
Verwenden Sie die Komponente Social, um Links zu Social-Media-Seiten in Ihre Inhalte einzufügen. Es enthält drei standardmäßige Social-Media-Typen, Sie können die Typen jedoch je nach Bedarf hinzufügen oder entfernen.
-
Um einen Social-Media-Typ hinzuzufügen, klicken Sie auf das Symbol Hinzufügen ( + ) und wählen Sie einen Social-Media-Typ aus, den Sie hinzufügen möchten.
-
Um einen Social-Media-Typ zu entfernen, klicken Sie auf das X neben dem Social-Media-Symbol.
Erweitern Sie die Karte für jeden Social-Media-Typ, um die Optionen festzulegen:
- URL - Geben Sie die Social-Media-URL ein, die Sie mit der Social-Media-Grafik oder dem Symbol verknüpfen möchten.
- Source - Wenn Sie Ihr eigenes Bild anstelle des Standardbilds verwenden möchten, wählen Sie ein Bild-Asset aus. Sie können ein Bild aus der Assets-Bibliothek auswählen oder eine Bilddatei aus Ihrem System importieren. Weitere Informationen zum Auswählen und Importieren Bild-Assets finden unter „Informationen zur Bild-Komponente“.
- ALT-: Geben Sie den ALT-Text für das angezeigte Bild ein.
Um eine konsistente Anzeigegröße für alle Social-Media-Grafiken zu definieren, legen Sie die Größe von Bildern“.
Sie können die folgenden Stiloptionen für die Komponente Social festlegen:
Formular (nur Landingpages) form
Verwenden Sie die Formular-Komponente, um ein veröffentlichtes Formular zu einer Landingpage oder Landingpage-Vorlage hinzuzufügen. Weitere Informationen zum Erstellen und Veröffentlichen von Formularen finden Sie unter Forms.
-
Klicken Sie auf das Formular-Tool in der Komponenten-Symbolleiste oder verwenden Sie die Eigenschaften Formular einbetten auf der rechten Seite, um das veröffentlichte Formular auszuwählen.
-
Wenn Sie den standardmäßigen Follow-up-Typ für das Formular überschreiben möchten, ändern Sie die Einstellung entsprechend den Anforderungen für Ihre Seite oder Vorlage.
Diese Seite wird auch als Dankeseite“ für Formular bezeichnet. Diese Einstellung bestimmt, was passiert, wenn ein Besucher das Formular sendet:
-
Auf Seite bleiben - Wählen Sie diese Option, um den Besucher beim Senden des Formulars auf der gleichen Seite zu belassen.
-
Landingpage - Wählen Sie diese Option, um eine beliebige Marketo Optimizer- oder Marketo Engage-Landingpage als Folgemaßnahme auszuwählen.
-
Externe URL - Wählen Sie diese Option aus, um eine beliebige URL als Folgeseite anzugeben. Nachdem der Besucher das Formular gesendet hat, lädt der Browser die vorgesehene URL.
note tip TIP Wenn Sie das Formular zum Herunterladen einer Datei verwenden möchten, können Sie eine URL für die gehostete Datei angeben. Bei dieser Konfiguration fungiert die Senden-Schaltfläche als Download-Schaltfläche. 
-
Wählen Sie bei Bedarf die Stile im rechten Bereich aus, um die Formularränder innerhalb der Strukturkomponente festzulegen.
{{styles-margin}}