Edit HTML or Edit operation
- When you use HTML or Edit HTML operation for an element you want to modify in a web page, the editor displays the content (rich formatted or raw HTML) of the particular element. After your modifications, the final new HTML content of that element is stored by VWO. While implementing the change on the page element, VWO replaces the original HTML of the element with the new (modified) HTML saved in VWO editor.
- DO NOT use Edit HTML or Edit operation on dynamic content such as product image/price/description, cart product count, dynamic headlines, and so on.
- Use Edit or Edit HTML operations on specific elements that require minor modification or to change a single element in a web page. We do not recommend to use full-page edit HTML operation.
- If you want to add new content on a page, use Copy element operation to clone the element and then edit the copied element using the Edit or Edit HTML operations
- Use other operations like Move, Resize, Change Text wherever possible. They do not interfere with the dynamism of any element
- Avoid using multiple Edit HTML operations on the same set of elements. You can use one single HTML operation to apply all the required changes.
Configure Editor Setting
In case you have used VWO’s visual editor to apply changes and they do not reflect on the page when you Preview the test, there could be a possibility that the elements on which the changes are applied load on the page after the changes from VWO have been fired. In such a case, configure the SPA/SSR editor settings that are suitable for you. This repeatedly checks for the elements on which the changes were applied and applies the changes to them as soon as they are loaded on the page.
ATTENTION: This is only applicable when you have done changes on your web
page using the custom code. If you use the VWO Visual Editor to make the
changes, refer to SPA/SSR editor settings.
NOTE: As a best practice, make sure to provide a unique name to the
variable for every block of setInterval that you add. In the above example,
the variable name is window.vwoElInterval. This can be changed to
window.vwoBannerImage or any other meaningful name as well.
Add Styles (CSS)
If you are using the code editor to add CSS properties within <style> tag, make sure to use “!important” with each property to ensure that all previous CSS properties are overridden and changes in variation are implemented.
Attribute1 = value!important;
Attribute2 = value!important;
If you are adding a new image for your variations using Change Image operation. If the image size is bigger than the control’s image, the original image might show for a moment before the variation image is loaded. To avoid flickering in such cases, use Edit HTML operation or the code editor and use Hide operation on the image in the control.
If you enter the image URL on your own server, it could further reduce the loading time and overall flickering effect.
- Move operation on any element moves it relative to its current position in exact pixels you specify.
- Imagine moving an element by a huge distance into some other section on the page. Now that section can be visible somewhere else based on the screen size (which is very popular these days using media queries). In that case your moved element won’t appear at the place you wanted it to be.
- A better approach in such cases would be to write custom CSS changes. You can also include media queries to apply the changes based on the screen width.
- You can also rearrange elements using the Rearrange operation in case your purpose was to swap the positions of two elements present on your web page.