Manage Changes for Your Variation in the Visual Editor

This article covers the following:

• Overview
• Access the Changes Panel
• Manage Changes
  • Review and Filter Changes
  • Hide or Show a Change
  • Rename a Change
  • Edit a Change
  • Modify the Selector Path of an Element
  • Delete Changes
• FAQs

Overview

The Changes panel in the Visual Editor provides a centralized interface for viewing, managing, and auditing all the changes applied to a specific variation. As you use the editor to change text, colors, or visibility, each action is recorded as an individual operation within this list. This granular tracking ensures you have full visibility into the modifications that comprise your experiment, enabling precise control over the final user experience.

For example, if you are testing a new hero banner on an e-commerce site, you might change the headline text, update the background image, and hide a secondary Learn More button. The Changes panel lists these three distinct operations, allowing you to temporarily hide/show the button changes. This allows you to compare the changes to the original version or permanently delete the change if you decide to revert to the original.

Let’s understand how you can access the Changes panel.

Access the Changes Panel

To access all the changes that you make in the Visual Editor for your variation, follow these steps:

1. In the left sidebar of the Visual Editor dashboard, click Changes.
2. A panel appears on the left with a list of all the changes you have made in your variation. 

From the Changes panel, you can review, manage, and take actions on your changes. The following sections explain each available action in detail.

Manage Changes

The Changes panel gives you granular control over each UI change, such as style updates or text edits, by listing them as a separate entry. You can independently show or hide each change and perform operations such as editing, renaming, updating the selector path, or deleting it. You can also filter changes by device type. This setup makes it easy to isolate and manage specific changes for testing or troubleshooting changes without affecting the rest of your variation.

Let us understand these operations in detail.

Review and Filter Changes

You can easily review and filter your changes according to the device-specific modifications applied across Mobile, Desktop, or Tablet devices.

To review your changes and filter them based on target devices like Mobile, Desktop, or Tablet:

1. Click the Applied on dropdown to filter changes applied by device type.
2. Select a device type, such as Desktop, Tablet, or Mobile, to view the changes applied to that device type. For example, if you select Mobile, the Changes panel will display only the changes you made for the mobile device.

Hide or Show a Change

You can temporarily disable a change without deleting it. This helps compare the modified state of the web page with its original state. To hide or show a change:

1. In the Changes panel, hover over a change in the Changes list.
2. Click Hide to hide the change. The change remains in the list but is no longer applied to the variation in the editor.
3. If you want the change to re-appear in the variation, click Show  .

Rename a Change

When you make changes in the editor, the Visual Editor automatically assigns generic names for those changes, such as Edit Element or Remove. You can rename these changes to make it easier for your team to quickly understand their purpose and manage variations more efficiently. To rename a change:

1. In the Changes panel, hover over a change and click More options 
2. Click Rename.
3. Enter a descriptive name, for example, Update Hero Headline, and press Enter. Your change is renamed.

Edit a Change

You can edit an existing change, such as text, style, or widget configurations, to make further adjustments. To edit your change:

1. In the Changes panel, hover over the operation, then click More options.
2. Click Edit.
   • For Text or CSS changes, the editor opens the relevant properties panel.
   • For Widgets, select Widget Settings to modify the layout, content, or triggers.

If you remove an element while creating a variation, you cannot edit that change later because the element no longer exists on the page.

Modify the Selector Path of an Element

The selector path of an element acts as the element’s address on your webpage. The Visual Editor auto-identifies the path of the selected element, but you can manually edit it to target multiple elements or fix paths that have changed due to website updates. To modify the selector path of an element for a particular change:

1. Hover over a change and click More options.
2. Click Edit selector path.
3. In the Edit Modification Selector dialog, choose a selection method:
   • Auto (Recommended): Uses Wingify's default logic to find the element.
   • Class/Tag name/User element text: Allows you to target elements based on specific CSS classes, HTML tags, or the text they contain.
   • Enter path manually: Type a custom CSS selector path or use the Select in the editor tool to pick a new element from the editor.
4. View the Total elements on this page count in the top right of the modal to see how many items will be affected by this change.
5. Click Save. The Visual Editor will start targeting elements based on the updated selector path.

Delete Changes

If a change is no longer required, you can delete it. To delete a change:

1. Hover over the change and click More options
2. Click Delete.
3. To delete multiple changes, select the checkboxes next to each change, then click Delete at the top right of the list. All your selected changes will be deleted.

FAQs

• Can I apply a single change to all instances of a button? Yes. By editing the Selector Path and choosing a generic class or tag name instead of a specific ID, you can apply the same modification to every element on the page that matches that selector.
• Does hiding a change in the editor affect the live campaign? No. Hiding a change will reflect only in the visual editor canvas. For modifications to be visible to visitors, changes must be saved and the campaign published.

Need more help?

For further assistance or more information, contact Wingify Support.