Arbeiten mit dem Web-Designer work-with-web-designer
In Journey Optimizer basiert das Erstellen visueller Web-Seiten auf der Chrome-Browser-Erweiterung Adobe Experience Cloud Visual Helper. Weitere Informationen
Erstellen eines Web-Erlebnisses
Gehen Sie wie folgt vor, um mit der Erstellung Ihres Web-Erlebnisses mit dem visuellen Web-Designer zu beginnen.
-
Klicken Sie im Bildschirm Inhalt bearbeiten auf Webseite bearbeiten, um den Web-Designer 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 Ihre Web-Inhalte auch bearbeiten, ohne den visuellen Editor zu laden. Heben Sie dazu die Auswahl der Option Visueller Editor auf, um stattdessen den nicht visuellen Bearbeitungsmodus zu verwenden. Weitere Informationen -
Wählen Sie im Web-Designer ein beliebiges Element auf der Arbeitsfläche aus, z. B. Bild, Schaltfläche, Absatz, Text, Container, Überschrift oder Link. Weitere Informationen
-
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.
-
Nachdem Sie Ihren Web-Inhalt bearbeitet haben, können Sie Ihre Änderungen verwalten. Weitere Informationen
Verwenden von Komponenten content-components
-
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:
- Trennlinie
- HTML
- Bild
- Überschrift – die Verwendung dieser Komponente ähnelt der Verwendung der Komponente Text im E-Mail-Designer. Weitere Informationen
- Absatz – die Verwendung dieser Komponente ähnelt der Verwendung der Komponente Text im E-Mail-Designer. Weitere Informationen
- Link
-
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. -
Bearbeiten Sie die Komponente nach Bedarf direkt im Inhalt Ihrer Seite.
-
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
Navigieren durch den Web-Designer navigate-web-designer
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
-
Wählen Sie ein beliebiges Element auf der Arbeitsfläche aus.
-
Klicken Sie auf Breadcrumbs erweitern/reduzieren auf der linken unteren Bildschirmseite, um Informationen zum ausgewählten Element schnell anzuzeigen.
-
Wenn Sie den Mauszeiger über die Breadcrumbs bewegen, wird das entsprechende Element im Editor hervorgehoben.
-
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.
Anleitungsvideo video
Das folgende Video zeigt, wie Sie ein Web-Erlebnis mit dem Web-Designer in Journey Optimizer-Kampagnen erstellen.