On this page: Learn how to author your web experience with the Adobe Journey Optimizer visual web designer, including selecting and editing elements, adding components and personalization, navigating the canvas, and changing the device size.
In Journey Optimizer, visual web authoring is powered by the Adobe Experience Cloud Visual Helper Chrome browser extension. Learn more
Start authoring your web experience
To start authoring your web experience using the visual web designer, follow the steps below.
-
From the Edit content screen, click Edit web page to open the web designer.
note NOTE If you attempt to load a website that fails to load, a message displays suggesting that you install the Visual Editing Helper browser extension. See some tips for troubleshooting in this section. You can also edit your web content without loading the visual editor. To do so, unselect the Visual editor option to use the non-visual edition mode instead. Learn more -
Once in the web designer, select any element from the canvas, such as image, button, paragraph, text, container, heading, link etc. Learn more
-
To edit an element, you can use:
-
The contextual menu to edit its content, layout, insert links or personalization, etc.
-
The icons on top of the right panel to edit, duplicate, delete or hide each element.
-
The right panel that changes dynamically according to the selected element. For example, you can edit the background, typography, border, size, position, spacing, effects or inline styles of an element.
-
Once you edited your web content, you can manage your modifications. Learn more
Use components content-components
-
From the Components pane on the left, select an item. You can add the following components to your web page and edit them as you need:
- Divider
- HTML
- Image
- Heading - Using this component is similar to using the Text component in the Email Designer. Learn more
- Paragraph - Using this component is similar to using the Text component in the Email Designer. Learn more
- Link
-
Hover in the page and click the Insert before or Insert after button to append the component to an existing element on the page.
note NOTE To unselect a component, click the ESC button in the contextual blue banner displayed on top of the canvas. -
Edit the component as needed directly in the content of your page.
-
Adjust the styles that display from the contextual pane on the right, such as background, text color, border, size, position, etc. - depending on the selected component.
Add personalization
To add personalization, select a container and select the personalization icon from the contextual menu bar that displays. Add your changes using the personalization editor. Learn more
You can also use Decisioning to deliver the most relevant offer to each visitor. From the personalization editor, navigate to Decision policies and select Insert syntax to add a decision policy to your web component. Learn more
Navigate through the web designer navigate-web-designer
This section details the different ways you can navigate through the web designer. To view and manage the modifications added to your web experience, see this section.
Use breadcrumbs breadcrumbs
-
Select any element from the canvas.
-
Click the Expand/Collapse Breadcrumbs button on the lower left side of the screen to quickly display information about the selected element.
-
When you hover over the breadcrumbs, the corresponding element is highlighted in the editor.
-
Using it you can easily navigate to any parent, sibling, or child element within the visual editor.
Swap to browse mode browse-mode
You can swap from the default Design mode to the Browse mode using the dedicated button.
From the Browse mode, you can navigate to the exact page from the selected configuration you want to personalize.
It is especially useful when dealing with pages that are behind authentication or that are not available from the start at a certain URL. For example, you will be able to authenticate, navigate to your account page or to your cart page, and then switch back to Design mode in order to perform the changes on your desired page.
Using Browse mode also enables you to navigate through all the views of your website when authoring single-page applications. Learn more
Change device size change-device-size
You can change the device size of the web designer display to a predefined size such as Tablet or Mobile landscape, or define a custom size by entering the desired number of pixels.
You can also change the zoom focus - from 25% to 400%.
The ability to change the device size is designed for responsive sites that render well on various devices, windows, and screen sizes. Responsive sites automatically adjust and adapt to any screen size, including desktops, laptops, tablets, or mobile phones.
How-to video video
The video below shows how to author a web experience using the web designer in Journey Optimizer campaigns.
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.