Visual Experience Composer options

The Adobe Target Standard/Premium 25.2.1 release (February 17, 2015) introduces an updated Visual Experience Composer (VEC). This article explains the updated UI and its options.

The VEC displays when you create or edit an existing activity.

VEC UI overview

The following sections explain the options available in the updated VEC for an A/B Test activity. The options vary, depending on the activity type.

Experiences panel

The Experiences panel displays in the left rail of the VEC.

You can view, create, rename, or remove experiences using the Experiences panel.

The following options are available in the Experiences panel:

• View an experience: To view an experience, click the desired experience to display it in the Design canvas.
• Add an experience: Click the Add icon ( ) to add a new experience. Configure the new experience as desired.
• Rename an experience: Click the Rename icon ( ) to display the Rename Experience dialog box. Specify the new name, then click Save.
• Duplicate, delete, or redirect an experience: Click the More Actions icon ( ), then choose Duplicate, Delete, or Redirect to URL.

Activity settings/configuration

Click the Configure icon ( ) displayed on top of the Design canvas to display the activity properties menu.

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 ( ), then select one or more audiences from the list. You can also combine audiences or create a new audience from the Add Audiences dialog box.

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:

1. 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
     • Recommendation
     • Experience Fragment
     • HTML Offer

2. Drag the component over an existing page element in the Design canvas.

3. 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 ( ) in the Components panel.

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 ( ) in the panel header to add a modification, delete all modifications, or delete all invalid modifications. Click Select to perform bulk operations: Apply to All Pages or Delete.

Click the More Options icon ( ) next to each modification to view its information, delete the modification, or to apply the modification to more views.

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 ( or ).

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 ( ) to the right of the panel to collapse or display the Properties panel.

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 ( ). See Edit HTML below for more information.
• 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 ( ) to display the modifications to the experience.

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 ( ). See Edit HTML below for more information.
• 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:

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.