Optimize supports the following change types in the visual editor:
Used to implement style attribute changes, including element size and position.
Style change allows you to implement the instruction using a CSS rule:
...or use the target element’s style attribute:
The visual editor defaults to the most correct syntax, favoring the CSS Rule approach.
If there is a more specific CSS rule in the page that overrides the new rule, the visual editor will use the "important" property, e.g.:
The editor will only use the element's style if the above rule is also overridden by a more specific rule on the page.
You can examine the options that the editor picked, and modify any of them by editing an existing style change.
Used to implement element attribute changes, such as the target of a link, or the source of an image. You can examine and modify properties, such as the CSS selector, attribute and value.
Used when you make inline text edits in the editor. When an element contains text interleaved with child elements, the editor indicates the part of the text that was modified. In the following example, you can only change one of the parts, e.g. "Some text." To edit, click each part individually, or tab to move to the next part.
<b> a child element </b>
Some other text
The following modes are supported:
- Replace: Replaces an existing text part.
- Insert: Inserts a new text part inside the target element, at the beginning.
- Append: Inserts a new text part inside the target element, at the end.
- Before: Inserts a new text part before the target element.
- After: Inserts a new text part after the target element.
Used to replace or insert new HTML. The following modes are supported:
- Replace: Replaces the existing HTML content
- Insert: Inserts new HTML content inside the target element, at the beginning.
- Append: Inserts new HTML content inside the target element, at the end.
- Before: Inserts new HTML content before the target element.
- After: Inserts new HTML content after the target element.
An HTML change will result in the loss of all non-inline event handlers. For example, this button will stop working after an HTML change (e.g. Insert HTML before):
Two approaches are supported for dragging and moving an element to a different location on the page. The default approach produces a Reorder change, which changes the placement of the element in the DOM. The element will have a new parent and/or sibling element(s). This typically results in the element adopting the style of the elements in its new area.
Use a Reorder change when reordering menu items, or other similar looking elements.
A Reorder change involves a source and a target CSS selector which can be changed from the related dialog as well as a Move mode:
- Top: Makes the source element be the first child of the target element.
- Bottom: Makes the source element be the last child of the target element.
- Before: Makes the source element be the previous sibling of the target element.
- After: Makes the source element be the next sibling of the target element.
Each call takes place as early as possible based on the selected option:
- After opening tag: Only the opening tag of the matched element needs to have been parsed and available in the page in order for the script to run.
- After closing tag: All contents and the closing tag of the matched element must have been parsed and available in the page in order for the script to run.
- Using the "After opening tag" option with selector "head" means that the script change can run as early as when the Optimize snippet is first executed in the
<HEAD>(synchronous blocking execution).
- Using the "After closing tag" option with selector "body" means that the script change will run after the document ready (DOMContentLoaded) event.
Multiple target elements
As with other change types, a Reorder change allows you to modify its source and target CSS selectors to match multiple elements. For example, by selecting multiple source elements, you can move all items of a menu into a different menu.
A Reorder change also supports a target selector that matches multiple elements. This can be used to change the order of two table columns or any other tabular structure in the page.
- If there are more targets than source elements, the additional target elements are ignored.
- If there are more sources than target elements, the additional source elements are added in the last target element.