For a novice user, the Edit option in Visual Editor is the easiest way to edit an element. The Edit HTML is a more advanced function and allows you to make changes to the HTML code of the page, thereby giving you more flexibility and control to modify the code.
-
Using the Edit option in the VWO editor
-
Using the Edit HTML option in the VWO editor
NOTE: We do not recommend editing dynamic content such as product prices,
product details, and other such elements that are generated by your
website CMS. Overwriting dynamic content code will make it static, and
the same content may appear on all the pages which use that particular
template. For dynamic content, use the Add JS/CSS option, which requires
writing a custom javascript code.
Using the Edit Option in the VWO Editor
-
Select the element you want to edit.
-
In the Tools menu, click Inline Edit.
-
Make changes to the element, using the VWO inline editor.
-
When finished, click DONE.
Edit HTML of an Element
-
Select the element you want to edit.
-
If you want to edit the code of your page HTML, in the Edit Tools option, click Edit HTML.
-
Make changes to the content of HTML code (for static content only).
-
When finished, click DONE.
Example: Editing dynamic buttons
Suppose you want to test the color of a button on your webpage that mentions the price of your product, “$29 – Buy it Now.” Here, the price “$29” changes dynamically based on the product a user selects. Using Edit HTML or Edit, you can change the CSS color property of the button to blue without affecting its dynamic content—the price. Now, all the Buy it Now buttons on the website included in your test will be blue for this variation.
However, if you change the text “$29 – Buy it Now,” which contains the dynamically generated price, to “$29 – Add to Cart,” then along with the price, this entire text string will become static content. Also, every Buy it Now button will read “$29 – Add to Cart” on all the pages included in your test. To learn about static and dynamic content, click here.