Using Visual Editor to Create Variations

VWO Visual Editor is a what you see 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 on an image you wish to change on your webpage, and from the menu that appears, select the Change Image option.
   The Change Image dialog appears.
2. In the Change Image dialog, you can upload an image either by uploading it from your local device or directly adding the URL from where it is sourced.
3. If you wish to show an animation when the image loads, enable the Show Loader animation while fetching images. To learn more about this option and how you can use it in your campaigns, refer to Use Loading Animation for Images on Your Webpage.
4. To make images appear good on different screen sizes (for example, handheld devices, desktops, large HD displays, etc.), you must upload different sizes of the same images (for example, 1x, 2x, etc.) so that the browser can display the suitable one depending on the screen size. You can upload different sizes of the same image in VWO Editor using the Responsive sizes (srcset) option. 
   
   NOTE: If you do not see this option, it means that the original image doesn't support responsive sizes. We recommend having a srcset defined for all your images; seek the help of your development team to do so. You can then modify the srcset using VWO, but you cannot transform a non-responsive image into a responsive one.
   • If you have the images for each size defined, upload them to the respective sizes.
   • If you have additional image sizes for your new image, you can upload them using the Add a size option.
   • If you do not have enough image sizes for the new image, ensure to delete the size(s) using the ⊖ option.
     
5. You can specify additional attributes for your image in the Title, Alt text, Size, Border fields. 
6. 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 

You can modify the content, font styles or sizes, text color, and other element attributes from the General tab. 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.

You can change the font size, background, border, layout, etc. or add custom style elements from this section 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 also to 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.

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 linked to a resource. This redirects the user to that very resource in the edit mode.

Edit iframe Content

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

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 (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.

Single Page Application/Server-side Rendering Support Settings

Suppose you have some dynamic elements on your webpages that typically appear after a delay or some user actions. Through a VWO test campaign, you might apply changes to such elements. For such cases, to ensure that the modification you made gets applied each time a campaign is loaded, VWO has two different implementations:

• Keep applying changes even after the page is loaded
• Delay applying changes until framework rendering is complete

While one deals with the changes that appear on the web page after the VWO campaign is executed, the other aims to apply changes to the elements of a website built on frameworks like GatsbyJS, Next.js ReactJS, etc.

To know more about these settings in VWO, refer to Configuring Single Page Application / Server Side Rendering Support in Editor Settings for Your Website in VWO.