How to Use Visual Editor to Create Variations

VWO Visual Editor is a what you see is what you get (WYSIWYG) tool to help you modify the design layout of your website pages. Using the visual editor, you can make basic visual changes on your website without writing a single line of code. The intuitive interface of the visual editor makes it easy to use, even for someone with no prior experience in web technology or coding.

Let's understand more about the VWO editor through this video.

Using VWO Visual Editor, you can modify elements on your webpage, add goals to track, switch to the code editor if you want to make some advanced modifications, and so on. For example, you can change the copy of your website headline or change the size and color of a CTA button.

To open editing options, click the website element you want to change.

Change Image

Use this option to change images on the website. The Change Image option is displayed when you click the image in the visual editor. The Change Image option is not displayed if you click elements other than an image.

To change an image on a webpage:

1. Click the Change Image option on the editor.
2. On the Change Image dialog, click the Choose File option to select an image from your local folder. You can also add the respective URL to specify an image file from the web.
3. Alternatively, you can also change the image by specifying the URL in the specify URL field.
4. Enter the image title, alt text, and size specifications for the image.
5. To upload the image, click Done.

Edit Element

Use the Edit Element option to modify the text, URLs, CSS styles, and attributes for the elements.

General 

From the General tab, you can modify the content, font styles or sizes, text color, and other element attributes. After updating the element, click Done to save the changes.

Styles

Using this option, you can change the CSS styling of the elements on the website. Click the Styles tab to change.

From this section, you can change the font size, background, border, layout, etc. or add custom style elements while previewing them in real-time on the editor. 

Attributes

Attributes provide additional information about HTML elements. You can modify standard HTML attributes or custom attributes of any elements you select on the page.

• ID: Used to identify a specific element. The value of this attribute must be unique.
• Class: Used with CSS to style elements with common properties.
• Title: Text to be displayed as a tool-tip when hovering over the element.

You can add your custom attributes to the element. To add custom attributes, select Custom, and then enter the Attribute Name and Value as required. When you make any attribute changes by using the visual editor, VWO creates the corresponding code snippet for the update that you can view in the code editor.

Move/Resize

The Move operation moves the element relative to its current position in exact pixels. You can use this operation to also increase or decrease the size of buttons and other elements.

You can move an element from one position to another on the webpage. You can drag an element to the desired position or enter the values on the axes to plot on the page.

Edit HTML

Use this option to modify the HTML code snippet of any element on a webpage. To learn more about using the Edit HTML option, click here.

Remove

Use this option to remove an element from a variation. This sets the display property of the element to none.

Hide/Show

It allows you to hide or unhide (show) elements from your website. You can choose to show a hidden element at any point in time.  For example, you may want to hide an image or a CTA button for a variation. This sets the visibility property of the element to visible/hidden.

Please note that the Hide/Show operation does not remove or delete the element from the website, but only hides the code snippet of the element so that a user cannot view it.

Select Relative Element

At times, some child, parent, or sibling elements are not visible on the webpage, and thus they cannot be clicked or selected. That said, when you apply a change to the parent element that affects the child elements, you may not know which all child elements will get affected.

To cater to this, VWO has the Select Relative Element option, which shows all the available elements (Parent/Child/Sibling) corresponding to the selected element. To select a Parent/Child/Sibling element corresponding to the selected element, click the Select Relative Element option, and choose the desired element.

Here, the Parent displays the list of parent elements of the selected element, the Sibling displays the list of all the sibling elements of the selected element, and the Child displays the list of all the immediate child elements of the selected element.

Navigate to URL

The Navigate to URL option of the VWO editor allows you to navigate the target URL by clicking on the link in edit mode itself.

All you need to do is, click on the Navigate to URL option for any element that is linked to a resource. This redirects the user to that very resource in the edit mode.

NOTE: The Navigate to URL option is only applicable for the elements 
inside the anchor tags. 

Edit iframe Content

The Edit iframe content option of the VWO editor allows you to make changes to elements that are present inside an iframe on the page. With this option, VWO loads the URL of the iframe in the editor that enables the user to do the desired functions on the iframe's content.

NOTE: The Edit iframe content option applies to the elements that are 
inside an iframe.

Inline Edit

The Inline Edit option allows you to quickly modify an item without navigating to the Edit Element dialog. Using the options present in the Inline Edit dialog, you can change the font, color, alignment, add a link, or Insert Image. Here, you can add custom code using the EDIT HTML option.

Copy and Paste

The Copy option lets you create a copy of an existing element on your webpage or other pages. With the Paste tool, you can paste the copied element at the required position. You can choose to paste it with or without its original CSS properties (styles).

To learn more about the copy and paste functionality in VWO Editor, click here.

Rearrange

It allows you to move multiple elements from one position to another. You can use this operation to rearrange and place elements anywhere on a page.

Adding Goals to Track

VWO Editor also lets you add some conversion goals for your test. Using Visual Editor, you can add goals to track clicks on links, clicks on elements, and form submissions on the website.

To learn more about how to add goals through the editor, click here.

Switch to Code Editor

Click the </> icon to switch to Code Editor. To learn more about Code Editor, click here.

Navigate Mode

• Design: Select this mode to make changes to your page loaded in the editor.
• Navigate: This mode lets you browse the website in VWO just like you would browse it using a browser. However, you will not be able to make edits in this mode. After you have landed on the page you want to edit, switch to the Design mode and select the section of the page you want to modify.

Undo/Redo/Save

Use the Undo/Redo/Save button in the visual editor while making changes to your webpages. You can access your last saved changes to a test or variation on your next sign-in.

Settings

This option in the VWO Editor enables you to determine the method used while targeting the elements present on your webpage. VWO needs to target the elements to apply changes to those elements. By default, Editor will consider both Id and class (which is also our recommended option) to identify an element on the page. This gives us the flexibility to use both Ids and classes to build an element selector.

Changing this setting is useful for websites with dynamic ids and classes. Using the options present in the Editor Settings dialog, you can skip id, class or both, for the selector paths being generated.

The Editor Settings option is also present at the account level and you can configure it in the Account Settings > Campaign Settings tab.

NOTE: By default, the Consider both Id and class (recommended) option is 
selected.