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 Visual Editor, you can make basic visual changes on your website without writing a single line of code. Its intuitive interface makes it easy to use even for someone with no prior experience in web technology or coding.
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. Using different options, you can make basic changes on the webpage without the need to understand or write a single line of code.
Use this option to change image, URL, or text on a webpage. The relevant option is displayed when you click the element you want to modify. For example, if you click any image, the Change Image is displayed, and when you click any text or heading section, Change Text is displayed.
To change an image on a webpage:
- Click the Choose File option to select from your local folder.
- Enter URL to select images from the web.
- Select Browse Existing Images to select from existing images you have uploaded for the website.
- Enter Title, Alt text, and Size of the image.
- To upload the image, click Done.
To change text on a webpage:
- Click the text element you want to update and then select the Change Text option on the editing tool.
- Enter the new text you want to update and then click Done to save.
To change the URL on a webpage:
- Click the link you want to update and then select the Change URL option on the editing tool.
- In the URL field, enter the new link where you want to redirect your visitors.
- Under Target drop-down, select how you’d like to open the new link by selecting one of the following options:
- Same Tab- opens the link in the same window
- New Tab - opens the link in a new window
- Custom window/frame - any custom target window or frame where you want to open the link.
- Click Done to save the changes.
To edit an image on a webpage:
- Select the image you want to edit and then click the Edit Image option.
- Rotate, flip, or perform other enhancements, as required, to an existing image on your website page.
The Move operation is relative to the current position of the element in exact pixels. You can also change increase or decrease the size of buttons and other elements using this operation.
You can move an element from one position to another anywhere on the webpage. You can drag and drop the element to your desired position or enter the values on the axes to plot on the page.
Using this option, you can change CSS styling of the webpage. Select the element you want to change and then click the Style option.
Use this option to edit the content of the selected element.
Allows you to hide or un-hide (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.
Allows you to remove an element from a variation. This sets the display property of the element to none.
Use this option to modify the HTML code of any element on a webpage. To learn more about using the Edit HTML option, click here.
Attributes provide additional information about HTML elements. You can modify any 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 in a tooltip when hovering over the element.
- URL: the URL of the page.
- Target: Select how you would like to open the link.
You can add multiple custom attributes as per your requirements. To add your custom attributes, click Add Attribute under Custom.
- Enter Attribute Name and Value.
- Click Done to save the attribute.
When you make any attribute changes using the visual editor, VWO creates the corresponding code for the update that you can view in the code editor.
Copy and Paste
The Copy option lets you create a copy of any existing element on your webpage or other pages. With the Paste tool, you can paste the element in your desired position. You can choose to paste it with or without its original CSS properties (styles). To learn more about copy and paste functionality in VWO Editor, click here.
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.
Use the option to find out the parent element to which the element you want to change belongs. Click Select Parent and then select the parent element of the section you want to change.
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 link, clicks on elements, and form submissions on the website. To know more on how to add goals through 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 that is loaded in the editor.
- Navigate: This mode lets you navigate through the website in VWO just like you would navigate through 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 buttons in Visual Editor while making changes to your web pages. You can access your last saved changes to a test or variation in your next sign-in.