How to Add New Elements in a Variation?

One important aspect of improving your website layout is to add, remove, and modify elements. Modifying elements and making changes to the way they are presented constitute an important part of testing your website variations. With VWO, you can use Edit and Edit HTML options to add or modify the elements on your website. While the Edit option allows you to modify elements using the visual editor, the Edit HTML option allows you to use the code editor and make advanced changes to the pages.

• Copying and pasting an element

• Editing an element’s container to add a new element

• Adding new elements before/after an existing element

• Changing the tag of the element being edited

Copying and Pasting an Element

1. In VWO Visual Editor, click the element you want to copy and then select Copy > Element (to copy the whole element) / Styles only (to copy just the styles) from the Tools menu.

2. Go to the section where you want to paste the copied element and then select Paste.

3. Specify whether you want to paste the copied element Before this element or After this element the element you clicked and select the relevant option.

4. Select Paste HTML with styles or Paste HTML only per your requirement.

5. To save the changes, click Done.

Adding Widgets

Using the ADD option present at the bottom of the editor, you can add widgets and elements to your webpage. To learn more about widgets and add them to your webpages, refer to Working with Widgets in VWO.

Editing an Element’s Container to Add a New Element

1. Click the element before or after which you want to add the new element.

2. Click Select Parent / Select Relative Element and select the container which includes this element.
   Alternatively, you can use the DOM tree to select the relative element. To know more, read this.
   

3. From the Tools menu, select Edit HTML to edit the code of the selected container. Now you can easily add HTML within the selected container tag.

4. Use <p></p> tags with the DIV to add the new element.

5. Click Done to apply the changes.

Adding New Elements Before/After an Existing Element

You cannot add a new element before or after an element using the Edit or Edit HTML options. For example, if you select a DIV tag on the page and edit it, you’ll see something like:

<div>
   Some content here
</div>

If you are editing the DIV tag, you cannot add anything before or after it. Therefore, the following code snippet will be considered invalid:

<span>Content added before</span>
<div>
   Some content here
</div>
<span>Content added after</span>

Moreover, browsers enforce certain tag rules corresponding to which tag can be nested in another. For example, a TD tag cannot be nested in a DIV tag. If you ignore these rules, the browser removes the nested element and puts it after the invalid container tag.

For example, the HTML code:

<div>
   Some content here
   <td>Wrongly placed tag</td>
</div>

will be converted to the following by the browser:

<div>
   Some content here
</div>
<td>Wrongly placed tag</td>

This change essentially results in adding a new element after the element being edited, and therefore it is not supported.

Changing the Tag of an Element Being Edited

You cannot change the tag of an element being edited. For example, if you select the <P> tag on the page and edit it, you’ll see something like:

<p>
   Some content here
</p>

However, you cannot change this <P> tag to say <DIV> or some other tag. The following example about the above HTML would be invalid:

<div>
   Some content here
</div>

You can always make changes within the selected element. VWO restrictions do not allow you to add new elements using the above two possible use-cases. You can always use the Edit or Edit HTML options in VWO to add new elements on the page.