Navigate the Wingify Visual Editor

This article covers the following:

• Overview
• Access Visual Editor
• Navigate the Visual Editor
  • Top Navigation Bar
  • Variation Management Bar
  • Left Sidebar
  • Interactive Canvas
  • Editor Sidebar

Overview

The Wingify Visual Editor provides a redesigned, modern interface that streamlines the process of creating and managing website variations. This updated version introduces a top navigation bar to switch editing modes, enhanced contextual menus, and powerful element-level editing options.

For example, a marketing manager can quickly toggle between desktop and mobile views to ensure a promotion banner appears correctly across all devices. Instead of searching through deep menus, they can use the new top toolbar to switch modes or manage variations in seconds.

By centralizing essential tools, the Visual Editor enables faster navigation and more precise modifications to your campaigns. This article walks you through all the functional areas and features available in the visual editor that make your website experimentation process seamless.

Access Visual Editor

To access the Visual Editor:

1. Create a new campaign or open an existing one in draft state (for example, an A/B Test), then navigate to the Configurations tab.
2. Select Variations & Traffic > Add variation.
3. Click the Launch Editor option available for the newly added variation. The Visual Editor appears in a new browser window.

Let us further understand all the functional areas in the Visual Editor dashboard.

Navigate the Visual Editor

The Visual Editor interface is organized into the following five functional areas that help you navigate and manage your variations better:

• Top Navigation Bar
• Variation Management Bar
• Left Sidebar
• Interactive Canvas
• Right Modification Panel

Top Navigation Bar

The top navigation bar acts as your central command hub within the editor. It contains the following:

• Campaign Information: Displays the campaign name and its current status, for example, Draft.
• Mode Switcher: Located in the center, this toggle lets you switch between different operational modes in the editor. Selecting the right mode is essential for either modifying content or testing the site's natural flow. Select from the following modes:
  • Design: The default environment where you can click on any element to edit its text, style, or layout. This mode is where the majority of your visual variations are created.
  • Navigate: Enables a live browsing experience within the editor. In this mode, you can browse through your site as a visitor would.
  • Code: Opens a code editor where developers can inject custom JavaScript or CSS. This is ideal for adding complex tracking scripts or custom animations that the visual tools cannot handle. For more information, see Use Code editor to Configure Custom Scripts.

• Action Buttons: Located near the top-right, you will find the following action buttons:
  • Save: Save unsaved changes.
  • Preview: Preview all the changes you made in the editor.
  • Publish & Continue: Save your work and proceed to the next step in the setup.

• More options: Located in the top-right corner, click the horizontal ellipsis to open the More options menu. It provides the following options:
  • Settings: Configure advanced visual editor settings, such as how elements are identified or how the editor behaves during modification. It also allows you to optimize the editor for Single Page Applications (SPA) or Server-Side Rendering (SSR) environments. For more information, refer to Configure Visual Editor Settings.
  • Theme: Allows you to set a Light or Dark theme for the Visual Editor based on your preference.
  • Keyboard Shortcuts: Provides a complete list of keyboard shortcuts you can use while editing the elements in the Visual Editor.

Variation Management Bar

Located just below the top navigation, the variation management bar displays:

• Control Tab: Represents the original, unmodified version of your website.
• Variation Tabs: Represent the different variations that you add in a particular campaign. You can switch between these tabs to apply changes for specific variations. To add more variations in your campaign, click +New Variation

To manage your variations better, the variation management bar also offers the following tools for better website optimization:

• View Ports: Select either the Desktop, Tablet, or Mobile icon to simulate and optimize your website appearance across different screen sizes.
• Viewport Options: To manage your changes better, you can configure the following settings:
  • Show Viewport dimension controls: Toggle on this switch to display a dimension field at the top of the canvas. In this field, you can manually set the screen dimensions or drag the width and height of your web page to the desired values. You can also use the Fit to window dropdown in the respective viewports to change magnification levels, such as 50%, 100%, and 150%.
  • Reload page on device switch: Toggle this switch to have the editor fully reload the page rather than just resizing the frame.
  • Apply changes to all devices: Toggle this switch on to apply your edits to all devices, or toggle it off to make device-specific modifications.

Left Sidebar

A new vertical sidebar located on the left side of the editor provides quick access to the following tools:

• Layers: This feature lets you view and navigate the entire DOM of your webpage. You can also drag and drop the elements within the Layers panel to easily rearrange them. For easier navigation, you can use the search option to find a specific element. You can also pin the Layers panel using the pin option at the top of the Layers panel while editing your elements in the canvas.
• Add: This feature allows you to add:
  • Widgets: Visual Editor provides a set of prebuilt widgets, such as banners, countdown timers, social proof notifications, and more, to enhance your webpage experience. Based on your conversion goals, you can add the required widget to enhance your webpage experience. For more information, refer to Add Widgets in Visual Editor.
  • Elements: Visual Editor also provides multiple elements, such as Buttons, Images, Lists, Content blocks, and others, that you can add to your web page to redesign the overall appearance of your website. You can add these elements to create a new variation of your webpage. For more information, refer to Manage elements in Visual Editor.
• Metrics: This feature lets you configure metrics in the editor to track interactions with your webpage elements, such as Click, Hover, Focus, Blur, and more. For example, if you are changing the color of a Request Demo button to see if it increases conversions, you can select that specific button in the editor and instantly select the Track option to track the event as a Click metric. This ensures that your tracking is accurately attached to the exact element you are modifying. For more information, refer to Configure Metrics in Visual Editor.
• Changes: This feature provides a list of all modifications made to the current variation. Each change indicates the author’s name (who made the change) and the timestamp. For more information, refer to Manage changes in your variation.
• Version History: This feature lets you view the modification history for each variation. It provides a clear audit trail of changes made to your campaign variations. It ensures governance and transparency by allowing you to track who modified the design and when those changes occurred. For more information, refer to Manage Version History in Visual Editor.
• Undo/Redo: Undo or Redo a particular change.

Interactive Canvas

The interactive canvas is the main area where your website renders. Once you are in the canvas, you can click to select an element, such as a button or a header. This highlights the selected element and opens an editor sidebar on the right where you can change the text, style, image, or perform other edits. The editor also highlights elements as you hover your mouse over them, showing the CSS selector currently targeted.

Editor Sidebar

When you select an element, the editor sidebar appears on the right. It contains two tabs - Wingify AI and Edit.

• Wingify AI: This tab provides a conversational interface to apply changes to your variation. For example, you can use commands such as:
• Change button text to Start Your Free Trial.
• Change button color to an eye-catching orange.
• Add a distinct shadow around the button

You can choose to type your commands or use the microphone icon to speak your instructions directly to the AI.

• Edit: This tab allows you to make deep customizations manually for a selected element, such as:
• Styles: Modify font family, size, colors, background, borders, alignment, and layout properties.
• Attributes: Change element attributes like IDs, classes, or link URLs.
• Code changes: Apply HTML, CSS, or JavaScript changes directly to a specific element using the Edit Code dropdown.

Note: Adding JavaScript or CSS at the element level ensures the code runs only for that specific component, not the entire page.

You can also use the following quick actions from the floating icons when you select an element:

• Wingify AI: Use Wingify AI to modify the appearance or behavior of the selected element.
• Rearrange: Rearrange the position of the selected element by using the drag and drop method.
• Track event: You can track an event (Click, Hover, Focus, Blur) by configuring a metric for the selected element.
• More options: You can perform additional actions on the selected element, such as Select Relative element, Cut, Copy, Show/Hide, and Remove.

Need more help?

For further assistance and more information, contact Wingify Support.