In this article, you’ll learn:
Different Visual Editor operations you can use to make changes on your webpage.
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.
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:
- 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.
- 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.
- 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.
- 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.
- You can specify additional attributes for your image in the Title, Alt text, Size, Border fields.
- To upload the image, click DONE.
Use the Edit Element option to modify the text, URLs, CSS styles, and attributes for the elements.
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.
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 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.
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.
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.
Use this option to remove an element from a variation. This sets the display property of the element to none.
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.
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.
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.
- 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.
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.
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:
- 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.
- Select the element you want your visitors to click on to go to another section, and choose the Edit Element option.
- In the URL field, enter the id specified in step-1 prefixed with a #(hash) symbol.