DokumentationJourney Optimizer B2BDokumentation zu Journey Optimizer B2B Edition

[Beta]{class="badge informative" title="Diese Funktion befindet sich derzeit in einer eingeschränkten Beta-Version"}

Landingpage-Design

Last update: Tue Sep 09 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Erstellt für:

  • Benutzende

Nachdem Sie Landingpage erstellt haben verwenden Sie den visuellen Design-Bereich, um die Struktur- und Inhaltskomponenten in Ihrer Seite zu erstellen.

Hinzufügen von Struktur und Inhalten structure-content-landing-page

  1. Ziehen Sie zum Beginnen Ihres Inhaltsdesigns ein Element aus der Strukturen und legen Sie es auf der Arbeitsfläche ab.

    Fügen Sie so viele Elemente aus Strukturen hinzu, wie Sie benötigen, und bearbeiten Sie die Einstellungen für jedes Element im Bereich auf der rechten Seite.

    note tip
    TIP
    Wählen Sie die Komponente n:n Column aus, um die Anzahl der Spalten zu definieren (drei bis zehn). Sie können auch die Breite jeder Spalte definieren, indem Sie die Pfeile unter die Spalte verschieben.

    Ziehen Sie eine Struktur auf die Arbeitsfläche und passen Sie die Einstellungen an {width="800" modal="regular"}

    Die Größe einer Spalte darf nicht kleiner als 10 % der Gesamtbreite der Strukturkomponente sein. Nur leere Spalten können entfernt werden.

  2. Erweitern Sie Abschnitt Inhalte“ und fügen Sie beliebig viele Inhaltskomponenten zu einer oder mehreren Strukturkomponenten hinzu.

    Ziehen Sie ein Inhaltselement auf die Arbeitsfläche und passen Sie die Einstellungen an {width="800" modal="regular"}

  3. Bei Bedarf können Sie auf den Registerkarten Einstellungen“ oder „Stil zusätzliche Anpassungen jede Komponente.

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

  4. Um bedingte Inhalte hinzuzufügen und den Inhalt auf der Grundlage von bedingten Regeln an die Zielprofile anzupassen, wählen Sie eine Inhaltskomponente aus und klicken Sie in der Komponenten Symbolleiste auf das Symbol Bedingten Inhalt aktivieren“.

    Weitere Informationen finden Sie unter Bedingter Inhalt.

Hinzufügen von benutzerdefiniertem CSS

Sie können Ihr eigenes benutzerdefiniertes CSS direkt im Design-Bereich der Landingpage hinzufügen. Verwenden Sie benutzerdefiniertes CSS, um erweiterte und spezifische Stile anzuwenden, um die Flexibilität und Kontrolle über das Erscheinungsbild Ihrer Inhalte zu erhöhen. Es empfiehlt sich, diese Formatierung auf höchster Ebene hinzuzufügen, bevor Sie Komponenten wie Bilder, Schaltflächen und Text einbeziehen.

Wählen Sie bei mindestens einer Inhaltskomponente auf der Arbeitsfläche die Komponente Hauptteil in der linken Navigationsstruktur aus, um auf den benutzerdefinierten CSS-Editor zuzugreifen.

Zugriff auf Textkörperstile {width="800" modal="regular"}

  1. Klicken Sie auf der Stile Registerkarte, die auf der rechten Seite angezeigt wird, auf Benutzerdefiniertes CSS hinzufügen.

    note note
    NOTE
    Die Schaltfläche Benutzerdefiniertes CSS hinzufügen ist nur verfügbar, wenn die Komponente Hauptteil ausgewählt ist. Sie können jedoch benutzerdefinierte CSS-Stile auf alle darin enthaltenen Komponenten anwenden.

    Der Benutzerdefinierte CSS hinzufügen Popup-Editor wird mit Platzhalter-Code-Kommentaren angezeigt.

  2. Geben Sie Ihren CSS-Code im Editor ein.

    Stellen Sie sicher, dass das benutzerdefinierte CSS gültig ist und der richtigen Syntax folgt. Wenn die eingegebene CSS-Datei ungültig ist, wird eine Fehlermeldung angezeigt und die CSS-Datei kann nicht gespeichert werden. Weitere Informationen finden Sie unter CSS-Gültigkeit.

  3. Klicken Sie Speichern, um das benutzerdefinierte CSS zu speichern.

    Das benutzerdefinierte Stylesheet wird auf den vorhandenen Inhalt angewendet. Sie können überprüfen, ob Ihr benutzerdefiniertes CSS Ihren Anforderungen entspricht. Informationen zum Vornehmen von Änderungen und Anpassen der Stylesheet-Anwendung finden Sie unter Fehlerbehebung.

NOTE
Wenn Sie den gesamten Inhalt entfernen, wird der CSS-Abschnitt nicht mehr im Bereich für Textkörperstile angezeigt und das zuvor definierte benutzerdefinierte CSS wird nicht mehr angewendet. Wenn Sie Inhalte wieder hinzufügen, wird der Abschnitt CSS-Stile erneut angezeigt und die benutzerdefinierte CSS-Datei wird erneut angewendet.

Hinzufügen von Assets

Wählen Sie im Visual Content Editor das Symbol Marketo Engage Assets ( Marketo Engage Assets-Symbol ) oder das Symbol Experience Manager Assets ( AEM Assets-Symbol ) in der linken Navigationsleiste aus. Über den Asset-Wähler können Sie direkt Assets auswählen, die in der Quellbibliothek gespeichert sind.

NOTE
Wenn Sie mit Adobe Experience Manager as a Cloud Services bereitgestellt wurden, haben Sie Zugriff auf die Repositorys für Marketo Engage Design Studio und Adobe Experience Manager Assets as a Cloud Service, wenn Ihr Benutzerkonto über die erforderlichen Berechtigungen verfügt. Diese Repositorys sind getrennt und nicht synchronisiert. Sie können Bild-Assets aus beiden Quellen verwenden.

  • Fügen Sie ein neues Asset hinzu, indem Sie das Bild-Asset per Drag-and-Drop in eine Strukturkomponente ziehen.

    Ziehen Sie ein Marketo Engage-Asset auf die Arbeitsfläche und passen Sie die Einstellungen an {width="800" modal="regular"}

  • Ersetzen Sie ein vorhandenes Bild-Asset, indem Sie es auf der Arbeitsfläche auswählen und Asset auswählen in den Bildquellen-Tools klicken.

    Asset aus der Quellbibliothek auswählen {width="600" modal="regular"}

Weitere Informationen zur Verwendung von Assets aus Ihrem Quelltyp finden Sie unter Verwenden von Assets für die Inhaltserstellung.

Formulare hinzufügen

Ein Formular ist eine wiederverwendbare Komponente, die von mehreren Landingpages und Landingpage-Vorlagen in Adobe Journey Optimizer B2B edition referenziert werden kann. Es handelt sich dabei um einen Block von Feldern und eine Senden-Schaltfläche, die vorab erstellt und schnell eingefügt werden können, um den Seitenentwurf schneller und konsistenter zu machen.

Im folgenden Beispiel werden Schritte zum Hinzufügen eines Formulars während des Designs Ihrer Seite beschrieben.

  1. Ziehen Sie Abschnitt Inhalte“ das Element Formular und legen Sie es in einer Strukturkomponente im Seitendesign-Bereich ab.

    Ziehen Sie eine Formular -Komponente in den visuellen Design-Bereich {width="600"}

    note tip
    TIP
    Um das Formular so hinzuzufügen, dass es das gesamte horizontale Layout in der E-Mail einnimmt, fügen Sie eine 1:1-Spaltenstruktur hinzu und ziehen Sie das Formular dann per Drag-and-Drop hinein.

  2. Klicken Sie auf das Formular-Symbol in der Komponenten-Symbolleiste oder verwenden Sie die Eigenschaften Formular einbetten rechts, um das veröffentlichte Formular auszuwählen.

    Wählen Sie das veröffentlichte Formular aus {width="600"}

  3. 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.

    Dies wird auch als "-Seite“ das 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 Journey Optimizer B2B edition- 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. Mit dieser Konfiguration fungiert die Senden-Schaltfläche als Download-Schaltfläche.

    Ändern der Folgeeinstellung {width="280"}

  4. Wenn Sie die Anzeige des Formulars nach Gerätetyp beschränken möchten, ändern Sie die Einstellung Anzeigeoptionen:

    • Nur auf Desktop-Geräten anzeigen
    • Nur auf Mobilgeräten anzeigen
    • Auf allen Geräten anzeigen (Standard)

  5. Wählen Sie bei Bedarf die Stile im rechten Bereich aus, um die Formularränder innerhalb der Seite festzulegen.

Beim Arbeiten mit Inhalten im visuellen Design-Bereich können Sie über die Navigationsstruktur auf die Komponenten, Spalten und Inhaltselemente zugreifen. Klicken Sie links auf das Symbol Navigationsbaum ((Symbol Navigationsbaum) ), um die Baumstruktur anzuzeigen.

Zugriff auf die Inhaltsebenen {width="800" modal="regular"}

Im folgenden Beispiel werden Schritte zum Anpassen des Abstands und der vertikalen Ausrichtung innerhalb einer Strukturkomponente mit Spalten beschrieben.

  1. Wählen Sie die Spalte in der Strukturkomponente direkt auf der Arbeitsfläche aus oder verwenden Sie den Navigationsbaum der links angezeigt wird.

  2. Klicken Sie in der Spalten-Symbolleiste auf Spalte auswählen und wählen Sie das Tool aus, das Sie bearbeiten möchten.

    Sie können sie auch aus dem Strukturbaum auswählen. Die bearbeitbaren Parameter für diese Spalte werden auf den Registerkarten Einstellungen und Stile auf der rechten Seite angezeigt.

    Spaltenkomponenten, die im visuellen Designer angezeigt werden {width="800" modal="regular"}

  3. Um die Spalteneigenschaften zu bearbeiten, klicken Sie auf die Stile Registerkarte auf der rechten Seite und ändern Sie sie entsprechend Ihren Anforderungen:

    • Für Hintergrund ändern Sie die Hintergrundfarbe nach Bedarf.

      Deaktivieren Sie das Kontrollkästchen für einen transparenten Hintergrund. Aktivieren Sie die Hintergrundbild, um ein Bild anstelle einer Volltonfarbe als Hintergrund zu verwenden.

    • Wählen für das Symbol Oben, Mitte oder Unten aus.

    • Definieren für Abstand“ den Abstand für alle Seiten.

      Wählen Sie Unterschiedliche Abstände für jede Seite aus, wenn Sie eine Feinabstimmung für den Abstand vornehmen möchten. Klicken Sie auf Sperrsymbol, um die Synchronisierung aufzuheben.

    • Erweitern Sie den Abschnitt Erweitert, um Inline-Stile für die Spalte zu definieren.

    Ändern Sie die Stile für die ausgewählte Spalte {width="700" modal="regular"}

  4. Wiederholen Sie bei Bedarf diese Schritte, um die Ausrichtung und den Abstand für die anderen Spalten in der Komponente anzupassen.

  5. Speichern Sie Ihre Änderungen.

Personalisieren von Inhalten

Journey Optimizer B2B edition verwendet eine einfache Inline-Syntax, mit der Sie Ausdrücke mit personalisierten Inhalten erstellen können, die von {} geschweiften Klammern eingeschlossen sind. Sie können ohne Einschränkungen mehrere Ausdrücke in demselben Inhalt oder Feld hinzufügen.

Beispiele:

  • Hello {{profile.person.name.firstName}} {{profile.person.name.lastName}}

  • Hello {{profile.person.name.fullName}}

Bei der Verarbeitung des Inhalts ersetzt Journey Optimizer B2B edition den Ausdruck durch die in der Experience Platform-Datenbank enthaltenen Daten. Das erste Beispiel wird also Hallo, Max Mustermann.

Im folgenden Beispiel werden die Schritte zum Personalisieren von Inhalten mit Lead-/Kontoattributen und System-Token beschrieben.

  1. Wählen Sie die Textkomponente aus und klicken Sie auf das Symbol Personalisierung hinzufügen in der Symbolleiste.

    Klicken Sie auf das Symbol Personalisieren ​ {width="600"}

    Dadurch wird das Dialogfeld Personalization bearbeiten geöffnet.

  2. Klicken Sie auf + oder …, um dem Leerzeichen ein Token hinzuzufügen.

    Personalisierten Text mithilfe von Token erstellen {width="700" modal="regular"}

  3. Klicken Sie auf Speichern.

Verknüpftes URL-Tracking bearbeiten

  1. Klicken Sie auf Links-Symbol ( Link-Symbol anzeigen ) auf der linken Seite, um alle verknüpften URLs in Ihrem Inhalt anzuzeigen, die verfolgt werden sollen.

  2. Klicken Sie bei Bedarf auf das Symbol Bearbeiten ( Bearbeiten ) und ändern Sie den Tracking-Typ oder Label.

    Sie können auch Tags für einen Link hinzufügen.

Klicken Sie auf das Symbol Bearbeiten , um auf das Linktracking zuzugreifen {width="500"}

Speichern Sie Ihre Arbeit

Klicken Sie auf, um den Entwurf der Landingpage zu speichern.

Sie können die Entwurfsseite weiterhin bearbeiten. Wenn Sie bereit sind, die Seite anzuzeigen und für die Verknüpfung in einer E-Mail oder SMS-Nachricht verfügbar zu machen, können Sie die Seite veröffentlichen.

Optionen anzeigen

Nutzen Sie die Ansicht- und Inhaltsvalidierungsoptionen, die im visuellen Design-Bereich verfügbar sind.

  • Vergrößern/Verkleinern des Inhalts in allen vordefinierten Zoom-Optionen.

  • Wechseln der Anzeige von Inhalten zwischen Desktop, Mobilgerät oder Nur-Text-/Nur-Text-Ansicht.

    • Klicken Sie auf das Anzeigen-Symbol für die geräteübergreifende Inhaltsvorschau.
    • Wählen Sie eines der standardmäßigen Geräte aus oder geben Sie benutzerdefinierte Dimensionen ein, um eine Vorschau des Inhalts anzuzeigen.

Mehr Optionen

Im Menü Mehr … oben im visuellen Design-Bereich können Sie die folgenden Aktionen ausführen:

Klicken Sie auf Mehr , um auf Vorlagenaktionen zuzugreifen {width="500"}

  • Landingpage zurücksetzen - Klicken Sie auf diese Option, um die visuelle Design-Arbeitsfläche zu leeren und die Erstellung Ihres Seiteninhalts neu zu starten.
  • Design ändern - Kehren Sie zur Startseite von Erstellen primären Landingpage“ zurück. Dort können Sie eine andere Vorlage auswählen, um den Design-Prozess neu zu starten, oder die Seite von Grund auf auf auf einer leeren Arbeitsfläche entwerfen.
  • HTML exportieren - Laden Sie den Inhalt auf der visuellen Arbeitsfläche in HTML im Format herunter, das als ZIP-Datei verpackt ist.
recommendation-more-help
6ef00091-a233-4243-8773-0da8461f7ef0