Arbeiten mit dem Web-Designer work-with-web-designer

In Journey Optimizer wird die visuelle Webbearbeitung durch die Chrome-Browsererweiterung Adobe Experience Cloud Visual Helper unterstützt. Weitere Informationen

CAUTION
Um in der Benutzeroberfläche von Journey Optimizer auf Web-Seiten zuzugreifen oder sie dort zu erstellen, müssen Sie den Voraussetzungen in diesem Abschnitt folgen.

Erstellen Ihres Web-Erlebnisses beginnen

Gehen Sie wie folgt vor, um mit der Erstellung Ihres Web-Erlebnisses mit dem visuellen Web-Designer zu beginnen.

CAUTION
Das Adobe Experience Platform Web SDK muss in Ihre Webseite aufgenommen werden. Weitere Informationen
  1. Klicken Sie im Bildschirm Inhalt bearbeiten auf Webseite bearbeiten , um den Webdesigner zu öffnen.

    note note
    NOTE
    Wenn Sie versuchen, eine Web-Site zu laden, die sich nicht laden lässt, wird eine Meldung mit dem Vorschlag angezeigt, die Browser-Erweiterung Visual Editing Helper zu installieren. Tipps zur Fehlerbehebung finden Sie in diesem Abschnitt.
    Sie können Ihren Webinhalt auch bearbeiten, ohne den Visual Editor zu laden. Deaktivieren Sie dazu die Option Visual Editor , um stattdessen den nicht visuellen Bearbeitungsmodus zu verwenden. Weitere Informationen
  2. Wählen Sie im Webdesigner ein beliebiges Element aus der Arbeitsfläche aus, z. B. Bild, Schaltfläche, Absatz, Text, Container, Überschrift, Link usw. Weitere Informationen

  3. Um ein Element zu bearbeiten, können Sie Folgendes verwenden:

    • das Kontextmenü zur Bearbeitung des Inhalts, des Layouts, der Links oder der Personalisierung usw.

    • die Symbole oben im rechten Bereich zum Bearbeiten, Duplizieren, Löschen oder Ausblenden der einzelnen Elemente.

    • den rechten Bereich, der sich dynamisch entsprechend dem ausgewählten Element ändert. Sie können beispielsweise den Hintergrund, die Typografie, den Rahmen, die Größe, die Position, den Abstand, die Effekte oder Inline-Stile eines Elements bearbeiten.

NOTE
Der Web-Content-Designer ähnelt größtenteils E-Mail-Designer. Weitere Informationen finden Sie unter Inhaltserstellung mit Journey Optimizer.

Nachdem Sie Ihren Webinhalt bearbeitet haben, können Sie Ihre Änderungen verwalten. Weitere Informationen

Verwenden von Komponenten content-components

  1. Wählen Sie im Bereich Komponenten auf der linken Seite ein Element aus. Sie können Ihrer Web-Seite die folgenden Komponenten hinzufügen und diese nach Bedarf bearbeiten:

  2. Bewegen Sie den Mauszeiger über die Seite und klicken Sie auf die Schaltfläche Einfügen vor oder Einfügen nach, um die Komponente an ein vorhandenes Element auf der Seite anzuhängen.

    note note
    NOTE
    Um die Auswahl einer Komponente aufzuheben, klicken Sie auf die Schaltfläche ESC im kontextuellen blauen Banner, das oben auf der Arbeitsfläche angezeigt wird.
  3. Bearbeiten Sie die Komponente nach Bedarf direkt im Inhalt Ihrer Seite.

  4. Passen Sie die Stile an, die im kontextuellen Bereich auf der rechten Seite angezeigt werden, z. B. Hintergrund, Textfarbe, Rahmen, Größe, Position usw., - abhängig von der ausgewählten Komponente.

Hinzufügen von Personalisierung

Um Personalisierung hinzuzufügen, wählen Sie einen Container aus und klicken Sie auf das Personalisierungssymbol in der angezeigten Kontextmenüleiste. Fügen Sie Ihre Änderungen mithilfe des Personalisierungseditors hinzu. Weitere Informationen

In diesem Abschnitt werden die verschiedenen Methoden beschrieben, wie Sie durch den Web-Designer navigieren können. Informationen zum Anzeigen und Verwalten der Änderungen, die zu Ihrem Web-Erlebnis hinzugefügt wurden, finden Sie in diesem Abschnitt.

Verwenden von Breadcrumbs breadcrumbs

  1. Wählen Sie ein beliebiges Element auf der Arbeitsfläche aus.

  2. Klicken Sie auf Breadcrumbs erweitern/reduzieren auf der linken unteren Bildschirmseite, um Informationen zum ausgewählten Element schnell anzuzeigen.

  3. Wenn Sie den Mauszeiger über die Breadcrumbs bewegen, wird das entsprechende Element im Editor hervorgehoben.

  4. Damit können Sie einfach zu jedem übergeordneten, gleichrangigen oder untergeordneten Element im visuellen Editor navigieren.

Wechseln in den Durchsuchen-Modus browse-mode

Sie können über die entsprechende Schaltfläche vom Standardmodus Design in den Durchsuchen-Modus wechseln.

Im Modus Durchsuchen können Sie von der ausgewählten Konfiguration, die Sie personalisieren möchten, zur gewünschten Seite navigieren.

Dies ist besonders nützlich, wenn es um Seiten geht, die sich hinter der Authentifizierung befinden oder nicht von Anfang an über eine bestimmte URL verfügbar sind. Sie können sich beispielsweise authentifizieren, zu Ihrer Kontoseite oder zu Ihrer Warenkorbseite navigieren und dann zurück in den Design-Modus wechseln, um die Änderungen auf der gewünschten Seite durchzuführen.

Wenn Sie den Modus Durchsuchen verwenden, können Sie auch durch alle Ansichten Ihrer Website navigieren, wenn Sie eine Einzelseitenanwendung erstellen. Weitere Informationen

Ändern der Gerätegröße change-device-size

Sie können die Gerätegröße der Web-Designer-Anzeige in eine vordefinierte Größe ändern, z. B. Tablet oder Mobilgeräte – Querformat. Legen Sie alternativ eine benutzerdefinierte Größe fest, indem Sie die gewünschte Pixelanzahl eingeben.

Sie können auch den Zoom-Fokus ändern – von 25 % bis 400 %.

Die Möglichkeit, die Gerätegröße zu ändern, wurde für responsive Web-Sites entwickelt, die auf verschiedenen Geräten, Fenstern und Bildschirmgrößen gut dargestellt werden. Responsive Web-Sites passen sich automatisch an jede Bildschirmgröße an, einschließlich Desktops, Laptops, Tablets oder Mobiltelefone.

CAUTION
Sie können ein Web-Erlebnis mit einer bestimmten Gerätegröße bearbeiten. Solange die Selektoren identisch sind, gelten diese Änderungen für alle Größen und Geräte, nicht nur für die Gerätegröße, in der Sie arbeiten. Gleichermaßen werden bei der Bearbeitung eines Erlebnisses in der normalen Desktop-Ansicht die Änderungen auf alle Bildschirmgrößen angewendet, nicht nur auf die Desktop-Ansicht.
Zurzeit unterstützt Journey Optimizer keine Seitenänderungen für bestimmte Gerätegrößen. Wenn Sie also beispielsweise über eine separate mobile Web-Site mit einer separaten Site-Struktur verfügen, müssen Sie die für Ihre mobile Site spezifischen Änderungen in einer anderen Kampagne vornehmen.

Anleitungsvideo video

Das folgende Video zeigt, wie Sie ein Web-Erlebnis mit dem Web-Designer in Journey Optimizer-Kampagnen erstellen.

recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76