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.
1. Editing Options
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.
- Enter the new URL where you want to redirect your visitors.
- 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 and is best suited to move elements by a small amount within their current locations. You can also change increase or decrease 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.
Allows you to remove an element from a variation.
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.
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.
2. Switch to Code Editor
Click the </> icon to switch to Code Editor. To learn more about Code Editor, click here.
3. View Mode
- 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.