Configure Visual Editor Settings

This article covers the following:

• Overview
• Access Editor Settings
• Configure Element Selection Method
• Manage Single Page Application (SPA) and Server-Side Rendering (SSR) Support
• Configure Image Loading Animation

Overview

Wingify provides a centralized Editor settings dialog within the Visual Editor, allowing you to manage how elements are selected and how your website handles changes. These settings ensure that your modifications remain stable across different web architectures, such as Single-Page Applications (SPA) or sites with dynamic IDs.

For example, if you are testing a site where element IDs change every time the page loads (dynamic IDs), you can configure the Visual Editor to use CSS classes instead. This helps ensure that your changes continue to apply correctly across visits, ensuring a consistent user experience. Additionally, the Editor settings dialog lets you configure image loading animations. This feature prevents blank placeholders and maintains a professional appearance while new images are being loaded.

Let us understand how you can access and configure all the Visual Editor settings.

Access Editor Settings

To access the available settings in the Visual Editor:

1. Open your campaign in the Visual Editor.
2. In the right corner of the top bar, click the horizontal ellipsis.
3. Select Settings.

The Settings menu displays multiple settings that you can configure for your Visual Editor. The subsequent sections explain the significance of each setting.

Configure Element Selection Method

The selection method determines how Wingify identifies and targets elements on your page. Selecting the appropriate method helps ensure that variation changes are applied to the correct elements when the campaign runs. Under the Element selection method, select one of the following methods based on your website's structure:

• Balanced (Recommended): This is the default setting. Wingify uses a combination of both IDs and classes to identify elements, providing a balance of stability and precision.
• Class-based Only: Wingify ignores IDs and relies solely on CSS classes. Use this option if your website uses dynamic IDs that change frequently.
• ID-based Only: Wingify ignores classes and relies solely on IDs. Use this option if your website uses stable, unique IDs but inconsistent or shared class names.
• Structure based: Wingify ignores both IDs and relies on the element's hierarchical position (DOM path) in the page code.

[Optional] If you have selected the ID-based element selection method and your website uses alphanumeric IDs, select the Consider alphanumeric values for IDs checkbox.

Exclude Specific Classes or IDs

If certain classes (like active or expanded) change based on user interaction, they can make selectors unreliable. To create stable selectors, you can exclude specific IDs or classes using the following steps:

1. Under Exclude Class/ID, enter the specific string you want to ignore.
2. Use the dropdown to define the matching logic:
   • Class starting with
   • ID matching regex
   • ID containing id
3. Click Choose ID/Class to exclude to save the rule.

Manage Single Page Application (SPA) and Server-Side Rendering (SSR) Support

For modern web frameworks like React, Angular, or Vue, elements often re-render or update without a full page refresh. Hence, it is necessary to ensure that the modifications made in the Visual Editor for a web page do not break. Use these settings to ensure your changes persist.

• Keep applying changes even after the page is loaded: Toggle this option to ensure that if a new element (like a pop-up) appears after the initial load, Wingify identifies it and applies your modifications.
• Re-apply changes whenever modified elements are rendered afresh: Enable this option for SPAs. If a framework re-renders a component, Wingify immediately re-applies your changes so the element doesn't flicker back to its original state.
• Delay applying changes until hydration completes: Use this for Server-Side Rendering (SSR) frameworks like Next.js or Nuxt.js. This ensures Wingify waits until the client-side interactivity (hydration) is finished before applying changes, preventing mismatches between the server and client.

Configure Image Loading Animation

Large images can take longer to load, causing blank spaces in your website and a poor user experience. Visitors may even abandon your site due to perceived broken elements. To address this issue, you can configure a loader animation until the images fully load. This prevents flicker and reassures users that the image is loading.

To configure loading animation:

1. In the Editor settings dialog, scroll down to Image options.
2. Toggle on the Show animation when image is loading switch. 
3. Select a Primary Color and Secondary Color to match your brand's aesthetic.
4. Adjust the Animation Speed using the Slow to Fast slider.
5. View the Loader preview on the right to see how the animation looks.
6. To apply these styles to all existing images in your campaign, select Apply for all existing change image modifications in this campaign.

Alternatively, you can also configure the same setting when you change an image in the Visual Editor. To configure the loader animation directly from the Visual Editor:

1. Select the image you want to change.
2. Toggle on the Show loader animation while fetching images.
3. [Optional] Click Customize loader below the toggle to configure the Primary Color, Secondary Color, and Animation speed of the loading animation.

Save Settings

After configuring your overall preferences in the Editor settings dialog, click Save to apply the changes.

Need more help? For further assistance or more information, contact Wingify Support.