Edit web content edit-web-content
Once you added a web action to your campaign, you can edit the content of your site using the web designer.
Learn how to author a web campaign in this video
In Journey Optimizer, web authoring is powered by the Adobe Experience Cloud Visual Helper chrome browser extension. Learn more
Access the following sections to learn more on each topic:
Work with the web designer work-with-web-designer
To start authoring your web campaign, follow the steps below.
-
From the Action tab of the campaign, select Edit content.
-
If you created a pages matching rule, you must enter any URL matching this rule: the changes will be applied to all pages matching the rule. The content of the page displays.
note note NOTE If you entered a single URL as the web surface, the URL to personalize is already populated. 
note caution CAUTION The web page must include the Adobe Experience Platform Web SDK. Learn more -
Click Edit web page to start authoring it. The web designer displays.
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. -
Select any element from the canvas, such as image, button, paragraph, text, container, heading, link etc. Learn more
-
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.
-
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
- Offer decision
-
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 and offers
To add personalization, select a container and select the personalization icon from the contextual menu bar that displays. Add your changes using the Expression editor. Learn more
Use the Offer decision component to insert offers into your web pages. The process is the same as when adding an offer to an email. It will leverage Decision Management to pick the best offer to deliver to your customers.
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 surface 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.