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.

Change Video

Do you wish to modify a video present on your webpage? If so, VWO makes it possible with the Change Video feature. 

For example, with the launch of a new product, your web page’s interface has changed, and you now wish to replace the existing video with a new one available at a different URL. Likewise, if you wish to hide the progress bar from an existing video or mute the audio, you can use the options available under the Change Video feature.

With the Change Video feature, you can modify the videos present on your website. When you click on a video embedded inside a <video> tag in the visual editor, the Change Video option appears.

The Change Video feature has the following settings:

Video Source Settings

• URL: Use this to change the video source.
• URL(s) in different compatible formats: Use this to specify the video source in various formats. The one that is compatible with the browser is automatically displayed. This is often useful when there are browser compatibility issues.

Preferences Settings

• Autoplay on page load: Enable this to ensure that the video automatically plays when the page loads. 
• Remove controls: Enable this if you wish to hide all controls from the video.
• Loop infinitely: Enable this if you wish to replay your video continuously.
• Mute audio: Enable this if you want the video to be played without audio when the page loads.

Poster Settings

• Show no poster: Choose this if you want to display the first frame of the video while it loads.
• Use image source URL: Choose this if you want to display an image as a poster from a specific URL while it loads.
• Upload or select from uploaded images: Select this if you want to display an already uploaded image or upload a new image as a poster while the video loads.

ATTENTION: The poster image should be of the same aspect ratio as the video.

To modify a video embedded inside a <video> tag on your webpage, follow this:

Procedure

1. Click on a video embedded inside a <video> tag in the visual editor, and from the menu that appears, select the Change Video option.
   The Change Video dialog appears.
2. To modify the attributes of your video, use the options described above. 
3. To finalize your changes, click DONE.

Modifying a Video Embedded in an iframe

If you wish to modify a YouTube or Vimeo video embedded in an iframe, be sure you don't change the embed video code that YouTube or Vimeo provides. If you do this, the video may break.

The embed video code highlighted in the screenshot, for example, is one provided by YouTube. You must embed it as is on your website without any changes.

To modify a video embedded inside a <iframe> tag on your webpage, follow this:

Procedure

1. Click on a video embedded inside a <iframe> tag in the visual editor.
2. Select the YouTube embed settings or Vimeo embed settings option based on your video type from the menu that appears.
   The Change Video dialog appears.
3. To modify the attributes of your video, you may use the following options.
4. To finalize your changes, 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.

DOM Tree

VWO also provides you with an alternate way of doing this. You can bypass the above steps using the DOM (Direct Object Model) tree. It presents all of the elements in the family in a linear fashion, arranged in the order of their origin.

You can directly select the required element from the tree. If not found, click the arrows to surf through the branches to identify and select it.

To know more about selecting a relative element, read this article.

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-Paste Element/Styles

Do you wish to copy an existing element and paste it at another position on your webpage or only copy a style from one element and apply it to another? If that's the scenario, VWO makes it possible with just a few mouse clicks; no technicalities involved. 

For example, to keep your website's design and style consistent, you might want to copy-paste an element across your website, like an add to cart button, or only apply an element’s style attributes to other elements on your webpage.

The Copy option of VWO allows you to copy an element or just its visual style. Once copied, you may use the Paste Element and Paste Styles options to paste it at another position or only paste the style of one UI element onto another element(s). This typically reduces the time it takes to copy and paste an element elsewhere on your website or apply the same styles to other elements, thereby increasing efficiency.

Let’s learn how you can:

Copy-paste an Element (with or without Styles)
To copy-paste an element at another position on your webpage, follow this:

Procedure

1. In the VWO Editor, click on the element you wish to copy and select Copy > Element.
2. To paste the copied element at another position on your website, select a position and choose Before this element or After this element.
3. To retain the look and feel of the source element, choose to Paste HTML with styles else, choose to Paste HTML only. With this, the copied element should be pasted on your webpage.

Copy-paste Only the Element Style

To copy-paste the styles of one UI element onto another, follow this:

Procedure

1. In the VWO Editor, click on the element whose style you wish to copy, and select Copy > Styles only.
2. To paste the copied style onto another element, click on the element and select Paste styles. With this, the copied style should be applied to the chosen element.

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.

Adding Bookmarks or Jump links

Wish to direct your users to a specific section or back to the top of a web page without scrolling or searching? For example, when creating long blog posts, a link to each section at the top of the page would be pretty useful, as the user may click on the necessary link and be taken directly to the information they are interested in without scrolling. This phenomenon is often referred to as bookmarking or adding jump links.

If that's the case, you can configure it in your VWO campaign using the Edit Element section. All you have to do is set the URL attribute of the element to the section where it needs to go.

To configure jump links for your VWO campaign, follow this: 

Procedure

1. Add an id attribute to the section where you wish to navigate your users, using the Edit Element option.
   
   NOTE: We recommend having unique ids so that your users are directed appropriately.
   
2. Select the element you want your visitors to click on to go to another section, and choose the Edit Element option.
3. In the URL field, enter the id specified in step-1 prefixed with a #(hash) symbol.