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 gray) 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.
- The device preset menu and changes button are covered in Visual editor – Overview.
- The diagnostics button is covered in Installation diagnostics.
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 [
Start by clicking an element on your page, then click the element selector button [
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 class 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.
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.
CSS selector building
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
- 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 
Add CSS code
To add CSS code directly to your page:
Click CSS:
This will bring up the CSS code editor:
Write (or paste) your CSS code in the text field and click Save.
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:
- Click Clean CSS to remove any unparsed CSS code, or
- Click Save, then Convert to HTML to retain any unparsed CSS code and wrap it in HTML.
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.
Add global JavaScript to your page
To add global JavaScript to your page, click the code editor button
Click Global JavaScript:
This will bring up the Global JavaScript editor:
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);
}
Interactive mode
] 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 [
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 [
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 checked, 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.
Related Resources
- Activation events – Create experiences for dynamic websites and single page apps (SPA).
- Visual editor – Overview
- Visual editor – Change types
- Installation diagnostics