How to Add New Elements in a Variation

Last updated

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 from the Tools menu.editor-22
    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 or after the element you clicked and select the relevant option.editor-23
    4. Select Paste HTML with styles or Paste HTML only per your requirement.editor-24
    5. To save the changes, click Done.

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 and select the container which includes this element.editor-25
  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.editor-26
  4. Use <p></p> tags with the DIV to add the new element.editor-27
  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.

Was this article helpful?

Thanks for your feedback!
Please email us at support@vwo.com to tell us what you were looking for. We'll send the answer to your inbox.

Contact Us / Login

Product
Resources Home