Add Elements or Widgets in Your Variation using Wingify Visual Editor

This article covers the following

• Overview
• Add New Elements using the Library
  • Add Video Element in Your Webpage
• Reuse Existing Elements
• Add Widgets to your Variation
• Things to Consider While Editing Existing Elements in the Editor

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 Wingify Visual Editor provides three primary ways to add or duplicate elements: using the Wingify Library 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 Wingify Gallery to drop a pre-styled banner and customize it instantly without waiting for your development team.

This article further explains how you can add new web elements, such as buttons, banners, lists, and other elements to your variation using the library.

Add New Elements using the Library

The Visual Editor lets you add UI elements without writing any code. These elements are pre-styled but fully customizable. You can find 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 Wingify editor appears in a new browser window.
4. From the left navigation bar, click +Add > Elements.
5. Select the element you wish to add, for example. Button.
6. Hover your mouse over the webpage within the editor. Wingify will show a blue placeholder indicating where the element will be placed.
7. Click to drop the element at the desired position. A configuration menu will appear on the right where you can customize the text, links, or styles. 
8. 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 Wingify Gallery.

Prerequisites: The Video element in the Wingify 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 Wingify Visual Editor, from the left navigation panel, click +Add > Element
2. From 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 Video configuration dialog appears on the right.
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 Wingify 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.

Use Wingify Widgets

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 the left panel, click +Add > 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 Wingify Visual Editor

When editing existing elements using the Edit or Edit HTML options in the Wingify Visual Editor, there are a few important limitations to keep in mind.

You Cannot Add New Elements Before or After the Selected Element

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.

HTML Nesting Rules Are Enforced by Browsers

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 will automatically convert 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 Wingify Visual Editor.

You Cannot Change the Tag Type of the Selected Element

When editing an 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>

Changing the tag type of the selected element is not supported.

What You Can Do While Editing an Element

• Modify text or HTML inside the selected element
• Update attributes or styles applied to the element
• Refine existing content without changing the element’s structure

If you need to add new elements to the page or insert content before or after an element, use the appropriate Add Element options in the Wingify Visual Editor instead of Edit or Edit HTML.

Need more help?

For further assistance or more information, contact Wingify Support