Start Free trial

Articles in this section

See more

Using Edit HTML and Inline Edit Operations in the VWO Editor

Vaibhav Singh
  • Updated
Follow

For a novice user, the Inline 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.

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.

Working with Inline Edit Option in VWO Editor

Use the Inline Edit option if you need to make some quick changes to your page element(s). It allows you to make a bunch of modifications with just one click. Here's how you can use the Edit HTML option:

Procedure

  1. In Visual Editor, click on the element you wish to modify, and from the menu that appears, select Inline Edit.inline_Edit.png

  2. The INLINE EDIT dialog appears on the page. Using the options present in this dialog, make the desired changes.  inlineEdit.png

  3. To apply changes, click DONE.

Working with Edit HTML Option in VWO Editor

Use the Edit HTML option if you wish to modify an element by modifying the HTML code of the page as it gives you more flexibility and control. Here's how you can use the Edit HTML option:

Procedure

  1. In Visual Editor, click on the element you wish to modify, and from the menu that appears, select Edit HTML.
    editHTML.png

  2. The Edit HTML dialog appears on the page. Add the modification code snippet (for static content only).editDialog.png

  3. To apply changes, click DONE.

Example: Editing Dynamic Buttons

Assume you want to test the color of your product's price buttons on your website, say a button that says "$29 – Buy it Now". The price "$29" varies dynamically depending on the product selected by the user. Using Edit HTML or Edit, you can change the button's CSS color property to blue without affecting its dynamic content—the price. For this variation, all Buy It Now buttons on the website you're testing will be blue.

However, if you change the text "$29 – Buy it Now," which includes the dynamically generated price, to "$29 – Add to Cart," the entire text string will become static content, including the price. As a result, every "Buy it Now" button on your test pages will read "$29 – Add to Cart".

To learn about working with dynamic content in VWO, click here.

Related articles