Visual editor – Usage

Use the code editor to add CSS or global JavaScript to your page.

User interface

The Optimize visual editor consists of two visual components, the app bar and editor palette, which appear on the web page you want to modify (the editor page.)

App bar

The app bar – which appears at the top of your page – includes information to help you identify your experience like its name and status, the variant name, the number of changes made, diagnostics, and help.  Learn more about the top row in Visual editor – Overview.

The upper row

The upper row of the app bar (in dark gary) includes the experience name (and status), variant name, device preset menu, changes button, and diagnostics, which are covered in other areas of the help center.

Learn more about the upper row:

The lower row

The lower row of the app bar (in light gray) contains the following features, which are described in more detail below:

  • Element selector
  • Breadcrumbs
  • Code editor
  • Interactive mode
  • Move settings

 

Element selector and multi select

The element selector [Element selector icon] enables you to select multiple elements on your web page and apply the same change(s) to all of them, saving time. For example, you can use it to increase the font size of all of the buttons in your top navigation bar by the same amount.

Start by clicking an element on your page, then click the element selector button [Element selector icon] in the app bar. This brings up the element selector:

Tip: Hold down the SHIFT key to select multiple elements that you want to edit.

The element selector field displays the currently-selected element (e.g. #header>a>img) and the total number of elements selected (e.g. 1) which update dynamically as you select elements on the page. You can also type directly into the element selector field (e.g. #login) to find and select elements even more quickly.

The checkboxes for Use element id and Use element class are checked by default, allowing the visual editor to select the correct element ID and class when you click on an element on your page. Leave 'Use Element id' and 'Use element class' checked when you know the element's attributes are static.

If an element's ID and/or class are dynamically generated (e.g. from a dynamic website or content management system) you might not want them to be detected by the visual editor. Use the following checkboxes for more granular controls when building your selectors:

  • Use element id – Uncheck if the element id is dynamic.
  • Use element class – Uncheck if the element id is dynamic.

Learn more in CSS selector building, below.

Breadcrumbs

When you click on your web page, the visual editor selects the deepest element in the clicked area. The breadcrumbs in the middle of the app bar – display the path to your selection in the page structure.

Click on elements in breadcrumbs to select any ancestor element (which may occupy the same area and may affect visible properties of that area, such as the background image or color). Hover over the ancestor elements in the breadcrumbs to inspect the area that each element occupies. Click and select the element and use the editor palette to inspect the properties that it affects.

Advanced editor – CSS selector screenshot

Pro tip:
Click on the angle bracket (“>”) next to an element to select any ancestor element.

Selecting an element in the visual editor determines the CSS selector your changes will be applied to. The selector value is significant because it's what's used when the experience runs for your visitors.

This is the algorithm that the editor uses to build the selector:

  • Traverse up the ancestors in the DOM until there is one that can be uniquely identified
    • By its ID attribute
    • By a class used only by that element in the page
    • As the document <BODY>
  • Go back downwards to the selected element and:
    • Use the tag name if there is only one child element with that tag
    • Use the :nth-of-type selector if not
Tips for CSS selectors
  • It’s always preferable to target elements with an ID or unique class or a close ancestor that has them. This makes your variants easier to maintain when there are small changes in the page structure.
  • When using classes as unique identifiers, make sure that you use a representative page as your editor page (and not, for example, a product results page with just a single product).
  • You can always modify the CSS selector of a change and type in your own selector. The editor will highlight the newly matched element/elements.
  • You can disable the options of using ID or a unique class for trimming a selector hierarchy. This can be useful if these attributes use a CMS or database identifier and vary.

Code editor

In addition to making changes in the visual editor, you can also use the Optimize code editor to add CSS and global JavaScript code directly to your web page.

To add CSS or global JavaScript code to your page, click the code editor button Embed in the app bar:

The code-editor button in the app bar.

Add CSS code

To add CSS code directly to your page:

Click CSS:

Code-editor menu, CSS selected

This will bring up the CSS code editor:

CSS code editor screenshot

Write (or paste) your CSS code in the text field and click Save.

Note: Text, HTML, and other non-CSS style changes (e.g. element style) are not visible and will not be affected by editing CSS.

Convert to HTML

If you need to edit the CSS in a variant, for example, to add unsupported styles (e.g. browser vendors prefix, CSS comment, keyframe animation, CSS hack, etc.) you can do this with Convert to HTML. Optimize allows you to edit the CSS in a variant and use it without validation.

The Optimize CSS code editor allows you to view and copy CSS generated by the UI and enter your own custom CSS which is translated into style changes in Optimize. If you enter custom CSS that isn't recognized by the Optimize parser, you have two options:

  1. Click Clean CSS to remove any unparsed CSS code, or
  2. Click Save, then Convert to HTML to retain any unparsed CSS code and wrap it in HTML.

Convert CSS to HTML dialog.

When you click Convert to HTML any unparsed CSS is inserted in an HTML <STYLE> tag and appended to the <HEAD> tag in your website's code. This way the Optimize editor will not attempt to validate or display the CSS as individual style changes.

Convert to HTML examples

Some examples where you might use the feature to convert unsupported CSS code (in bold) to HTML:

Browser vendor prefix
div.nav > ul > li:nth-of-type(4) > a > span {
  color : rgb(247, 148, 151);
  -moz-font-smoothing: antialiased;
}
CSS Comment
div.nav > ul > li:nth-of-type(2) > a > span {
  color : rgb(247, 148, 151); /* This RGB value is a pink color. */
}
Keyframes Animation
@keyframes slideIn {
  from {
    margin-left: 100%;
    width: 300%;
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}
CSS Hack
div.nav > ul > li:nth-of-type(2) > a > span {
  *color : rgb(247, 148, 151); /* Targeting IE <= 7 browsers. */
}

Limitations

When using Convert to HTML you won't be able to preview the effect of individual style changes in the Optimize visual editor (for example, the number of style changes, which elements they affect, and if those elements even exist). Optimize won't validate or show errors for CSS that is converted to HTML, but you can always debug your code using Chrome DevTools.

Support for conditionals

The CSS code editor supports conditionals, like media queries, making it easy to implement a variant for a responsive page. For example, you can decrease a font size to 14px on screens that are less than 500px by adding the following CSS code:

@media(max-width: 500px) {
  body {
     font-size: 14px;
  }
}

Advanced CSS code editor

If you’re comfortable with CSS, you can implement your variant entirely in the CSS code editor. CSS added here is translated into individual style changes that are visible in the change list. Similarly, you can implement a leading variant by copying code from the CSS code editor and deploying it on your production website.

Add Global JavaScript code

Dynamic websites present unique challenges for testing and personalization because many of the signals you might look for may not be present when the Optimize container loads. And even when Optimize does apply a change, a dynamic website may subsequently modify or move page elements requiring Optimize to reapply a change.

Single-Page Applications (SPA) can present similar challenges as they don't change URLs or reload after every user interaction. Adding global JavaScript code at the page level allows it to be available to apply to any element on the page, as opposed to being associated to a single element.

Pro tip: Use an activation event to trigger your global JavaScript code to reapply the change as many times as needed.

Add global JavaScript to your page

To add global JavaScript to your page, click the code editor button Embed in the app bar:

The code-editor button in the app bar.

Click Global JavaScript:

Code editor, Global JavaScript selected

This will bring up the Global JavaScript editor:

Global JavaScript editor screenshot

Type or paste a page-level JavaScript function that will be called upon activation of this experience, then click Apply.

Global JavaScript Example

// Activation happens whenever the user refines e-commerce results.
// Whenever that happens, this will add an additional link to see latest offers
// but only in the cases where there are less than 3 results.

var eCommerceContainer = document.getByElementId('ecommerce-container');

if (eCommerceContainer.childNodes.length < 3) {
var offers = document.createElement('a');
offers.href = "/offers";
offers.innerText = ' Have a look at our latest offers'
eCommerceContainer.appendChild(offers);
}
Pro tip: Use an activation event to trigger your global JavaScript code and reapply a change as many times as needed.

Interactive mode

Interactive mode [Interactive mode icon] is used to create variants from pages that include interactive elements that require user interaction to enable, such as scrolling, interactive menus, and login panels.

Keyboard shortcut:

Use Shift + Return/Enter to enter/exit interactive mode.

Note: Even though your selection may not be visible, the element remains selected in interactive mode allowing you to switch to the visual editor to make changes to the new selection.

Click the button [Interactive mode icon] in the app bar to enable interactive mode, which hides the editor palette and replaces the app bar with this simple black bar:Interactive mode banner

While in interactive mode, expose/interact with the element you wish to edit, then click Exit in the black bar to switch back to the visual editor to make any necessary changes to it.

Move settings

You can freely move elements on your web page with the Move anywhere option by clicking Settings [Settings] in the app bar:

Move anywhere setting menu

Move anywhere

Move anywhere creates style changes based on an element's position on your web page (i.e. left, top, bottom, etc). While the element retains its original location in the DOM, it appears in a new position to your visitor. Typically, its style remains unaffected and the rest of the page doesn't change.

Use Move anywhere when changing the position of global buttons, areas, and fixed-position elements such as your login area.

Automatically select for reorder

This makes it easy to select the correct source and target elements while navigating the visual editor. When you click the visual editor automatically selects the correct element (e.g.: a list item <li> instead of the image <img> it contains) and confines reordering to what's inside the container (i.e. the list element <ul>).

Reorder outside target element

Note: Uncheck Automatically select for reorder to enable this.

When checked, move anywhere is enabled. When unchecked, the ability to reorder elements in the DOM is disabled and the default move mode is changed from Before/After to Top/Bottom.

Was this helpful?
How can we improve it?

Need more help?

Sign in for additional support options to quickly solve your issue