Visual Editor allows you to make changes to your web pages and create variations out of it. Like the Visual Editor of Google Optimize, VWO’s Visual Editor also allows you to perform the same functionalities with more elaborate configurations to cater to your requirements.

In Google Optimize, all the edit operations can be carried out using the Editor Pallet. Similarly, in VWO, you can use the Editor Options panel that comes with a host of options to configure the changes to your web pages. In order to apply changes to a web page, you need to select the elements on the page and use the respective options to make the required changes.

Apart from that, the Editor Dock at the bottom offers options for configuring the Visual Editor, accessing the library of widgets and elements to be added to the web page, configuring the device to preview the web page, accessing the code block of the web page, and so on. In Google Optimize, the Editor Dock is called an App Bar, which is found at the top.

Here are the options that the Visual Editor in Google Optimize offers and their counterparts in VWO:

App Bar

This is the control panel of the Visual Editor, which houses all the fundamental configurations.

Variant Menu

The Variant Menu in Google Optimize allows you to switch to any Variant or the Original web page. In VWO, the Variations Panel serves the same purpose. In both cases, you can switch to any version by clicking on it. In Google Optimize, you need to save the changes before making a switch. In VWO, the changes can be saved at any point.

Variant Menu in Google Optimize:

Variation Panel in VWO:

Device Preset Menu

The Device Preset menu in Google Optimize allows you to preview your web page against a list of devices. The same in VWO can be done using the Change Device option. Here, you get to choose the device type from Desktop, Mobile, and Tablet. Upon selecting, the editor loads the page in the corresponding view. For Mobile and Tablet options, you will be able to choose from a list of devices for the respective device types. You can also use the Responsive option from this list to manually alter the screen layout.

The Device Preset Option in Google Optimize:

Using the Change Device option in VWO:

Changes

This, in Google Optimize, indicates the number of changes applied to the current variant. In VWO, you view the same by clicking on View details under the campaign name in the Variations Panel.

Viewing Changes for a Variant in Google Optimize:

Viewing Modifications for Variations in VWO:

Diagnostics

This provides a diagnosis of any issues present in the current variant while making changes via code. In VWO, you’ll find this debugger preset in the Code Editor, which is also available when you use the Edit HTML option.

Diagnostics in Google Optimize:

Debugger in VWO Code Editor:

Debugger in VWO Visual Editor’s Edit HTML option:

Editor Tour and Help

You can access the vertical ellipsis on the App Bar to take a tour of the Google Optimize Visual Editor and access the online help. The HELP option in VWO’s Editor Dock allows you to access Keyboard shortcuts and FAQ’s related to the Visual Editor. 

Accessing Editor Tour and Help in Google Optimize:

Accessing Help in VWO:

Done / Save

In Google Optimize, to save any changes made to a Variant, you can click on the Save button on the App Bar. This will allow you to navigate back to the Experiment details page. Upon applying all the required changes to a Variant, you can click on the Done button, which appears in place of the Save button.

In VWO, you can save the changes made to your variations at any time while creating variations in the Visual Editor by clicking on the SAVE button.

Saving a change in Google Optimize’s Visual Editor:

Saving a change in VWO’s Visual Editor:

Element Selector

This, in Google Optimize, is generally used to apply a change across multiple elements together. In VWO, you can do this by configuring the CSS selector path of the elements, as described here.

Breadcrumbs

This is used to identify the path to the selected element on your web page. In VWO, you call it a DOM (Direct Object Model) tree.

Breadcrumbs in Google Optimize:

DOM (Direct Object Model) tree in VWO:

Code Editor

In Google Optimize and VWO, this option is used to apply changes to your versions via code. This allows you to add any CSS or JavaScript code directly to your web page.

Accessing Code Editor in Google Optimize:

Accessing Code Editor in VWO:

Interactive Mode

In cases like applying changes to a subsequent page, such as modifying the page that appears post login, you can use the Interactive Mode in Google Optimize. The same can be done by switching to the NAVIGATE mode in VWO’s Editor Dock. This helps you to navigate through your website and access any other page and then, switch back to the DESIGN mode to apply the changes.

Accessing the Interactive Mode in Google Optimize:

Accessing the NAVIGATE mode in VWO:

Move Settings

To configure the relocation of an element on a web page, you use the Move Settings in Google Optimize. Equivalently, in VWO, you can avail of the Move / Resize option from the Editor Options panel.

Accessing Move Settings in Google Optimize:

Accessing the Move / Resize option in VWO:

Editor Pallet

All the editing options in Google Optimize are contained in the Editor Pallet. It presents the following options:

Undo / Redo

These are used to undo or redo an operation in the Visual Editor. You can also use the Ctrl+Z or Command+Z keys on your keyboard to undo and Ctrl+Y or Command+Y to redo an operation. In VWO, these options can either be availed from the Editor Dock or by using the same keyboard shortcuts.

Undo / Redo options in Google Optimize:

UNDO / REDO options in VWO:

Edit Element

This is used to edit an element to modify or remove it from the web page. 

Other Options

Apart from the Edit Element option, the Editor Pallet in Google Optimize comes with the following configuration options to work on your variants:

In addition to the above, the Visual Editor in VWO offers a plethora of options to create variations of your web pages which are too extensive to be covered in this article. Check out this article to learn about all of them.