Talk to a sales representative

+1 844-822-8378
or

Write to us

Use VWO Editor to create variations

Wednesday, January 22, 2014

VWO Visual Editor is a WYSIWYG (what you see is what you get) tool that allows you to modify design and layout of your website pages without having to write a single line of code. Its intuitive interface makes it very easy to use even for someone with no prior experience in web technology or coding. This article provides of features and capabilities in the Editor.

Undo/Redo/Save

Use the undo/redo/save buttons in the visual editor while making changes to your web pages. You can access your last saved changes to a campaign or variation in your next login.

View Mode

  • Design: In this mode, you can 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. Once you have landed on the page you want to edit, simply select the section of the page you want to modify.

Edit Options

Change Image

Use this option to change images in your webpage. You can upload a new image from your local drive, specify URL to pick the image from, or select your saved image from VWO custom content. Click here to know more about changing image in the variation.

Edit Image

Use this option to rotate, flip, sharpen, crop, and perform other enhancements to an existing image in your website page.

Change Text

Use this option to make edits in the text that you want to be displayed on the variation. Click here to learn how to change text in variation.

Edit

Use this option to edit the content of the selected element. Click here for more details.

Edit HTML

Us this option to modify the HTML code of any element on a webpage Click here to understand the best practices for using the Edit HTML option.

Copy and Paste 

The ‘Copy’ tool 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). Click here to know more about copying and pasting elements n VWO editor.

Rearrange

Allows you to move elements from one position to another. You can use this operation to rearrange and place an element anywhere on the page.

Move

Allows you to move element from one position to another anywhere in the webpage. Move operation is relative to the current position of the element in exact pixels and is best suited to move elements by small amount within its current location. Click here to understand the best practices for using the Move operation.

Resize

Use the option to resize an element in the webpage. For example, you may want to increase or decrease the size of a button in the page.

Hide/Show

Allows you to hide and un-hide elements from the website. You can choose to show a hidden element at any point of time. For example, you may want to hide certain images or text for a variation.

Remove

Allows you to remove an element from a variation.

Change Styling

Allows you to change CSS styling of the webpage.

Note: You can also add your own Javascript/jQuery or CSS code to modify elements using the code editor. Click here for more details.

Select Parent

Use the option to find out the parent element to which the element you want to change belongs. Click on Select Parent and select the parent element of the section you want to change.

Add Goals through Editor

The VWO Editor also lets you to add some conversion goals for your campaign. To know more on how to add goals through editor, click here.

Check Your Email!
We've sent a message to
yourmail@domain.com
with an activation link in it.
Just click the link, and we'll take it from there.
Can't find the mail?
Check your spam, junk or secondary inboxes.
Still can't find it? Let us know at support@vwo.com