Work with the web designer work-with-web-designer
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 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 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
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.