Add Elements or Widgets to Your Variation using VWO Visual Editor

This article covers the following:

Overview

When optimizing your website, you often need to go beyond simple text changes by introducing new call-to-action (CTA) buttons, promotional banners, or video content. The VWO Visual Editor provides two primary ways to add or duplicate elements: using the Library menu and the Copy/Paste functions.

For example, if you want to test the impact of a new promotional banner on your dummy-store.com homepage, you can use the Library to add a pre-styled banner and customize it instantly without waiting for your development team.

This article explains how you can add new web elements, such as buttons, banners, lists, or other widgets, to your variation using the Library.

Add New Elements using the Library

The Library in the Visual Editor lets you add UI elements without writing any code. These elements are pre-styled but fully customizable. 

The VWO Gallery available within the Library includes the following categories of elements:

• Basic: Buttons, Images, List items (Bulleted/Numbered), and Content Blocks.
• Typography: Headings (H1-H6), Paragraphs, Blockquotes, and Hyperlinks.
• Form: Input fields, Labels, Textareas, and Form Buttons.
• Media: Video elements (Direct URL or HTML5 source).

To add a new web element to your variation:

1. Create a new campaign (for example, A/B Test) and navigate to the Configurations Tab.
2. Select Variations > Add variation. 
3. Click the Launch Editor option available for the newly added variation. The VWO editor appears in a new browser window.
4. Click on the LIBRARY  menu available at the bottom of the visual editor window. A menu appears on the right.
5. Navigate to VWO Gallery > Basic Elements.
6. Select the element you wish to add, for example. Button.
7. Hover your mouse over the webpage. The editor displays a blue placeholder indicating where the element will be placed.
8. Click to drop the element at the desired position. A configuration menu will appear, allowing you to customize text, links, and styles.
   
9. Click Done to save.

Add Video Element to Your Webpage

Adding a video to your webpage helps deliver information quickly and improves visitor engagement, especially on pages with complex content. You can add video elements to your variation using the VWO Gallery.

Prerequisites: The Video element in the VWO Gallery supports direct video file URLs and HTML5 sources. To embed YouTube or Vimeo videos, use the specific YouTube or Vimeo widgets in the Widgets section of the Library.

To add a video element

1. In the VWO Visual Editor, select Library > VWO Gallery > Basic Elements.
2. Under the Basic elements section, select the Video element.
3. Position the element on the webpage as you prefer, then select the location (Before, After, or Inside). The Add Video dialog appears.
   
4. Configure the following settings in the Add Video dialog:

Once you apply the settings, click Done to save your changes.

Reuse Existing Elements

If you want to duplicate an existing element from your page, whether it's the complete element structure or just the style of an element, you can use the Copy and Paste options within the VWO Visual Editor. This is a recommended practice because it helps maintain consistency and ensures that the new element or style aligns with the existing CSS rules on your page.

To duplicate an existing element:

1. Click the element you want to duplicate.
2. From the contextual menu, select Copy.
   • Element: Copies the HTML and the styles.
   • Styles only: Copies only the CSS (useful for applying the look of one button to another).
3. Click near the existing element where you want to add the new element and select the Paste element dropdown. You must choose the position from the dropdown:
   • Before or After the selected element. After you select the position, from the paste options, choose Paste HTML with styles to keep the original look or Paste HTML only to inherit the styles of the new section.
     

Add Widgets to Your Variation

You can also add more complex elements, such as Web Pop-up Modals, Countdown Timers, or Banners, using the Widgets tab in the Library.

To add a widget:

1. Navigate to Library > Widgets.
2. Select the widget you want to add, for example, the Modal widget.
   

Widgets come with built-in logic, such as Show on exit intent, that standard elements do not. This helps you deliver a targeted experience to your visitors.

Things to Consider When Editing Existing Elements in the VWO Visual Editor

When editing existing elements using the Edit or Edit HTML options in the VWO Visual Editor, keep the following three limitations in mind:

• Scope of Modifications
• Browser-Enforced HTML Nesting Rules
• Restriction on Tag Type Changes

Scope of Modifications

When you edit an existing element, you can only modify the content inside that element. You cannot insert new elements before or after the selected element using the Edit or Edit HTML options.

Example (Valid)

If you select and edit a <div> element, you will see something like:

<div>
Some content here
</div>

You are allowed to modify the content inside this <div>.

Example (Invalid)

The following HTML is not supported, because it adds new elements before and after the selected element:

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

Adding elements outside the selected container is not allowed when editing an existing element.

Browser-Enforced HTML Nesting Rules

Browsers enforce strict rules about which HTML tags can be nested inside others. If these rules are violated, the browser automatically restructures the DOM.

Example (Invalid Nesting)

A <td> tag cannot be nested inside a <div>. If you attempt the following:

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

The browser automatically converts it to:

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

This effectively moves the <td> outside the original element, which results in adding a new element after the edited element, an operation that is not supported in the VWO Visual Editor.

Restriction on Tag Type Changes

When editing a selected element, you cannot change its HTML tag.

Example (Valid)

If you select a <p> tag, you can edit its content:

<p>
Some content here
</p>

Example (Invalid)

You cannot change the <p> tag to another tag, such as <div>:

<div>
Some content here
</div>

While editing an element, you can successfully perform the following:

• Modify text or HTML code strictly inside the selected element.

• Update attributes (ID, Class, Title) or CSS styles applied to the element.

• Refine existing content without altering the element’s external structure.

Need More Help?