Activity settings/configuration
Click the Configure icon (
The following options are available:
- Properties: Assign properties to the activity or remove properties from the activity. Properties is a (Target Premium feature. For more information, see Enterprise user permissions.
- Page Delivery: Include the same experience on similar pages on your site. Use a page template to provide structure to your pages, or if your pages contain similar elements, to test variations in similarly structured page elements or across your entire domain. For more information, see Include the same experience on similar pages.
- Site Preferences: Configure your site preferences to specify how Target generates CSS selectors. For more information, see CSS selectors in Configure the Visual Experience Composer.
- Add Additional Pages: Add additional pages to the activity to create a multipage activity that lets you create a story over multiple pages, with a design that is specific to each page. For more information, see Multipage activity.
- Single Audience: Use a single audience for the activity.
- Multiple Audiences: Assign multiple audiences to the activity. Click the Add Audiences icon (
Design/Browse modes
Use the Design/Browse toggles displayed on top of the design canvas to switch between design and browse mode.
Use the Browse mode to navigate your site and to pick the view or page you want to update. Switch back to Design mode to add or edit your changes.
Undo/Redo
You can undo changes made by clicking the Undo icon (
To redo an action, expand the Undo/Redo button group and choose Redo.
Components panel
You can add a number of components to your web page and edit them as needed by using the new Components panel.
To add a new component to an experience:
-
Click the desired component that you want to add to highlight it.
The available components are grouped into logic containers:
-
Basic
- Divider
- HTML
- Image
-
Text
- Heading
- Paragraph
- Link
-
Dynamic
-
-
Drag the component over an existing page element in the Design canvas.
-
Choose to insert the component before of after the selected element.
As compared to the previous VEC version, you cannot replace a selected element with a component.
Modifications panel
To open the Modifications panel, click the Show Modifications icon (
The Modifications panel shows all changes that have been made to your page in the Visual Experience Composer (VEC) and lets you make additional changes (such as CSS Selector, Mbox, and Custom Code).
Click the More Options icon (
Click the More Options icon (
Design canvas
The Design canvas lets you select viewports, including fit-to screen, Desktop, Tablet, Mobile Landscape, and Mobile Portrait. By default, the canvas fits the page to the screen along with the viewports defined in the Administration section.
You can also zoom in or zoom out by clicking the appropriate icon (
When you click a page element in the Design canvas, a menu shows the options that are available for that element type. In addition, a DOM path displays at the bottom of the page that lets you easily navigate through the page structure.
The various Visual Experience Composer (VEC) actions are grouped in appropriate menu options to make your job quicker and more efficient:
Properties panel
The Properties panel lets you change properties of selected elements on the page, whether these elements are HTML elements or objects specific to Target, such as recommendations or offers.
Click the icons on top of the panel to edit HTML code or delete, duplicate, or hide elements. Changes appear in the Modifications panel.
The Properties panel is collapsible in the right rail. Click the Show/Hide Properties icon (
Edit elements using the Design canvas
The following sections show you how to edit images and text in the Design canvas. The Design canvas, along with the Components, Modifications, and Properties panels provide you with powerful tools to let you easily create experiences for your activities.
Image options
If you click an image in an A/B Test activity, the VEC looks like similar to the following illustration:
Select components from the Components frame on the left side to insert the following elements:
- Basic (divider, HTML, image).
- Text (heading, paragraph, link).
- Dynamic (Recommendation, Experience Fragment, HTML offer).
The menu at the top of the image lets you do the following:
- Insert a link (
- Change the image (
- Add personalization (
- Delete the image (
The Properties pane on the right side lets further configure the image’s properties.
The icons at the top of the frame let you do the following:
- Edit the HTML (
- Duplicate the image (
- Delete the image (
- Hide the image (
The options in the right frame let you do the following:
- Edit the CSS class.
- Configure the image’s properties (source, title, alt text).
- Edit the link URL.
- Configure the image’s size (height and width). Click Show Advanced Options to configure the image’s minimum and maximum size, width, height, overflow, and object fit.
- Configure the image’s position on your page (absolute, fixed, relative, static, or sticky.)
- Configure the element’s spacing, including margin and padding.
- Configure the element’s effects (opacity). Click Show Advanced Options to configure the image’s sepia, grayscale, contrast, brightness, and blur values. You can also invert or rotate the image.
- Configure the image’s inline styles.
Text options
If you click text in an A/B Test activity, the VEC looks like similar to the following illustration:
Select components from the Components frame on the left side to insert the following elements:
- Basic (divider, HTML, image).
- Text (heading, paragraph, link).
- Dynamic (Recommendation, Experience Fragment, HTML offer).
Click the Show Modifications icon (
The menu at the top of the text element lets you do the following:
- Configure the text’s properties (heading level, paragraph, block quote, or monospace)
- Select the text’s color (
- Configure the text’s attributes (bold, italic, underline, or strike through) (
- Configure the text’s alignment (left, center, right, justify) (
- Insert a link (
- Replace the content with an HTML offer, Experience Fragment, or Recommendation.
- Edit the HTML (
- Add personalization (
- Delete the image (
The Properties panel on the right side lets further configure the text’s properties.
The icons at the top of the frame let you do the following:
- Edit the HTML (
- Duplicate the text (
- Delete the text (
- Hide the text (
The options in the right frame let you do the following:
- Edit the CSS class.
- Configure the text’s background color and image.
- Configure the text’s typography (heading style, font size, font weight, line height, alignment, text color, text style (bold, italic, underlined, or strike through)).
- Configure lists, including bulleted, numbered, or A,B,C.
- Choose the border color.
- Configure the text box’s size (height and width). Click Show Advanced Options to configure the text box’s minimum and maximum size, width, height, overflow, and object fit.
- Configure the text box’s position on your page (absolute, fixed, relative, static, or sticky) and set the number of pixels from the top, right, bottom, and left.
- Configure the element’s spacing, including margin and padding.
- Configure the element’s effects (opacity). Click Show Advanced Options to configure the image’s sepia, grayscale, contrast, brightness, and blur values. You can also invert or rotate the text.
- Configure the inline styles.
Edit HTML
In addition to HTML code, you can edit and inject custom JavaScript.
Several rich text formatting options are available when editing text and HTML for A/B and Experience Targeting activities. You can choose a font, select a font style, change text alignment, and other standard text formatting options. When modifying HTML, you can toggle between the code view and the rich-editing view of the HTML.
The following HTML5 tags can be nested:
Tag | Allowed Nested Tags |
---|---|
<a> | <h1-h6> , <p> , <ul> , <ol> , <menu> , <div> , <figure> , <figcaption> |
<ins> | <h1-h6> , <p> , <ul> , <ol> , <menu> |
<del> | <ul> , <ol> , <menu> , <h1-h6> , <p> |
<label> | <p> |
Navigate elements using the DOM path
When you click an element on the page, the VEC options menu displays. In addition, when you click an element, the corresponding DOM path displays at the bottom of the page.
If you do not see the DOM path, click the Show DOM icon (
You can use the DOM path to quickly see information about the selected element (type, ID, and class) and move up or down the DOM path to select the desired element.
You can easily navigate to any parent, sibling, or child element within the VEC using the DOM path.
The DOM path feature is also available when setting up click tracking.
Adobe Target Maturity Webinar Series
Adobe Customer Success Webinars
Tuesday, Feb 4, 4:00 PM UTC
Adobe Target innovations, including GenAI, and best practices on AI-powered personalization and experimentation at scale.
Register