Auf dieser Seite Erfahren Sie, wie Sie Ihr Web-Erlebnis mit dem Visual Web Designer von Adobe Journey Optimizer erstellen, einschließlich des Auswählens und Bearbeitens von Elementen, des Hinzufügens von Komponenten und der Personalisierung, des Navigierens auf der Arbeitsfläche und des Änderns der Gerätegröße.
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 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, Link usw. 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 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., je nach ausgewählter 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.
This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.
For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.
- TL;DR: This page explains how to author a web experience with the Journey Optimizer visual web designer, including selecting and editing elements, adding components and personalization, navigating the canvas, and changing the device size.
Intents:
- Open the web designer from the Edit content screen to author a web experience
- Select and edit elements on the canvas using the contextual menu, right panel icons, and dynamic right panel
- Add and edit components such as Divider, HTML, Image, Heading, Paragraph, and Link
- Add personalization to a container using the personalization editor
- Navigate the designer with breadcrumbs and Browse mode
- Change the device size and zoom focus of the designer display
Glossary:
- Web designer: The Journey Optimizer visual web authoring editor, powered by the Adobe Experience Cloud Visual Helper Chrome browser extension (product-specific)
- Design mode: The default web designer mode for performing changes on a page (product-specific)
- Browse mode: A mode used to navigate to the exact page from the selected configuration you want to personalize, useful for pages behind authentication or not available at a certain URL from the start (product-specific)
- Breadcrumbs: A control that displays information about the selected element and lets you navigate to any parent, sibling, or child element within the visual editor (product-specific)
- Non-visual edition mode: An alternative editing mode used by unselecting the Visual editor option to edit web content without loading the visual editor (product-specific)
Guardrails:
- Visual web authoring is powered by the Adobe Experience Cloud Visual Helper Chrome browser extension, and the prerequisites must be followed to access and author web pages.
- The Adobe Experience Platform Web SDK must be included in your web page.
- If a website fails to load, a message suggests installing the Visual Editing Helper browser extension.
- Changes made at a specific device size apply to all sizes and devices as long as the selectors are the same; editing in normal desktop view also applies to all screen sizes.
- Journey Optimizer does not currently support device size-specific page changes; changes for a separate mobile website with a separate structure should be made in a different campaign.
- The zoom focus can be changed from 25% to 400%.
Terminology:
- Canonical name: Web designer — Acronym: n/a — variants: visual web designer, web content designer, visual editor
- Synonyms: “web designer” = “visual web designer”
- Do not confuse: “Design mode” (default mode for performing changes) ≠ “Browse mode” (navigate to the exact page to personalize)
FAQ:
- Q: How do I open the web designer? — From the Edit content screen, click Edit web page.
- Q: Can I edit web content without the visual editor? — Yes; unselect the Visual editor option to use the non-visual edition mode instead.
- Q: What components can I add to a web page? — Divider, HTML, Image, Heading, Paragraph, and Link.
- Q: Do device-size changes apply only to that device? — No; as long as the selectors are the same, changes apply to all sizes and devices. Journey Optimizer does not currently support device size-specific page changes.
- Q: When should I use Browse mode? — When dealing with pages behind authentication or not available at a certain URL from the start, and to navigate through all the views of a website when authoring single-page applications.