How to Use Visual Editor to Create Variations

Last updated

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.editor-1

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.

Change Text/URL/Image

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.

Change Image

editor-2

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.

Change Text

editor-3

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.

Change URL

editor-4

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.

Edit Image

editor-5

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.

Move/Resize

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.editor-6

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.

Change Styling

Using this option, you can change CSS styling of the webpage. Select the element you want to change and then click the Style option.editor-7

You can also add your own Javascript/jQuery or CSS code to modify elements, using the code editor. To learn about the code editor, click here.

Edit Content

Use this option to edit the content of the selected element.editor-8

Hide/Show

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.editor-9

Remove

Allows you to remove an element from a variation.

Edit HTML

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.

editor-10

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.editor-11

Rearrange

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.editor-12

Select Parent

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.editor-13

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.editor-14

2. Switch to Code Editor

Click the </> icon to switch to Code Editor. To learn more about Code Editor, click here.editor-16

3. View Mode

editor-15

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

4. Undo/Redo/Save

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.editor-17

Was this article helpful?

Thanks for your feedback!
Please email us at support@vwo.com to tell us what you were looking for. We'll send the answer to your inbox.

Contact Us / Login

Product
Resources Home