Manage Elements in Visual Editor to Create Variations

This article covers the following:

• Overview
• Access the Contextual Menu
• Operations in Visual Editor
  • Edit Operations
  • Track Events on Elements
  • Structural Operations
  • Manage Image Elements
  • Manage Video Elements

Overview

The Visual Editor lets you modify your website's elements to create different campaign variations without writing any code. When you select an element in the Visual Editor, a contextual menu appears, offering a variety of operations to edit, track, or restructure the element's layout. Use these operations to test text, design, and layout changes in your campaign variations. For example, you can test different CTA button colors, sizes, or positions to identify which variation generates more clicks.

The following section explains how you can access all the operations available for an element in the Visual Editor.

Access the Contextual Menu

The Visual editor offers multiple operations, such as Edit, Track, Remove, and others, that you can perform for an element. These operations are available in the contextual menu when you select an element in the Visual Editor.

To access the contextual menu:

1. Open your campaign in the Visual Editor.
2. Hover over the element you wish to modify.
3. Click on an element that you want to customize. A floating menu appears.
4. From the floating menu, click More options. A contextual menu appears. 

The contextual menu lists multiple operations that you can perform for the selected element. The following sections explain them in detail.

Operations in Visual Editor

The contextual menu provides several categories of operations to help you customize your webpage. Let us begin by understanding the Edit operations.

Edit Operations

The Edit menu lists operations that let you modify the appearance and content of an element. To access the operations available under the Edit menu:

1. Select an element and click More options.
2. In More options, hover over Edit. A sub-menu appears with the following options:
   1. Wandz: Use AI-powered prompts to generate new copy or improve existing text. For example, you can select a specific headline in the canvas and enter a prompt in the Wandz tab on the right panel: Rewrite this headline to sound more urgent and professional for a 20% discount sale.
   2. Content and Style: Modify the text, font, colors, and overall styling of the element.

1. HTML: Edit the raw HTML code of the selected element for advanced customizations in the Edit HTML dialog.
2. Element Attributes: Modify attributes such as IDs, classes, or titles.
3. Element CSS: Add custom CSS rules specifically for the selected element.
4. Element JavaScript: Add custom JavaScript to execute when the visitor interacts with the element

The contextual menu also allows you to track certain events on your elements.

Track Events on Elements

The Visual Editor lets you track user events, such as Click, Hover, Blur and others, on the elements of your webpage. To track such events for your elements:

1. Select an element and click More options.
2. In More options, hover over Track. A sub-menu appears with the following list of events:

• Hover: Tracks when a visitor intentionally places and pauses their cursor over a specific element on the webpage.
• Focus: Tracks when a visitor activates an input field by clicking into it, making it active.
• Blur: Tracks when a visitor clicks away or navigates out of an active input field, removing their focus.
• Element Visible: Tracks when a specific element becomes visible within the visitor's viewport on the page.
• Mousedown: Tracks the moment a visitor presses a mouse button down on an element, before releasing it. Ideal for tracking drag-and-drop movements or precise interaction timings.
• Click: Tracks the clicks on an element.

You can track these events for an element by configuring metrics in a new or existing metric. For more information, refer to Configure Metrics in Visual Editor.

Let us further understand the structural operations available in the contextual menu.

Structural Operations

These operations allow you to view or manage the placement and visibility of elements.

• Select Relative: Allows you to navigate to the Parent, Child, or Sibling elements of the current selection.
• Select same class elements: Automatically selects all elements on the page that share the same CSS class.
• Copy: Creates a duplicate of the element. You can copy the entire element or just its styles.
• Cut: Removes the element from its current position to be pasted elsewhere.
• Show/Hide: Toggles the visibility of the element. Hidden elements remain in the DOM but are not visible to users.
• Remove: Permanently deletes the element from the variation.

Manage Image Elements

The Visual Editor allows you to modify, change, or enhance image elements on your webpage without writing any code.

To modify existing images or add new image elements to your variations:

1. Select an existing image element on the page. The floating context menu appears with specific image operations such as Change Image and Rearrange.
2. Click the Change Image icon in the floating menu. Alternatively, you can navigate to the Edit tab in the right pane to view all the image operations.
3. Once you click Change Image, a dialog appears, where you can perform the following:
   1. Clear the existing image.
   2. Select an image from the Asset Hub.
   3. Upload a new image from your device.
   4. Directly enter or paste the URL of the image you want to use.
   5. [Optional] Click Add another size if you want to add images of different sizes.
   6. [Optional] Toggle on the Use responsive sizes switch. This ensures that the browser selects the most efficient image size based on the visitor's screen resolution and width.
   7. In the Edit pane on the right, you can also configure the following:
      1. Alt text: Enter descriptive text in the Alt text field to improve accessibility and SEO. If an image fails to load, this text appears in its place.
      2. Add Link: Toggle on this switch to make the image clickable. You can specify the destination URL and whether it opens in a new tab.
      3. Show loader: Toggle on this switch to display a customizable animation while the image is fetching. You can customize the loader's primary and secondary colors, as well as its animation speed. For more information, refer to Configure Image Loading Animation.

Modify Background Images

If an image is set as a CSS background property, you can change it using the following steps:

1. Select the container element in which the image is used (such as a <div> or <section>).
2. In the right pane, navigate to Styles > Background.
3. Click Background Image to replace the current URL or gradient with an image from the Asset Hub or upload a new one.

Manage Video Elements

The Visual Editor allows you to insert new video elements or modify existing ones to enhance page interactivity. To add a new video element:

1. In the left panel, click +Add > Elements.
2. Drag the Video element to your desired location.
3. Select the video element and go to the Edit tab in the right panel. Here you can configure the following for the video element:
   1. Video Source: Enter the primary video URL, for example, an MP4 link.
   2. Add another source: To ensure compatibility across all browsers, click Add another source to add alternative formats such as WebM or OGG. The browser automatically selects the first compatible format from the list.
   3. Under the Preferences, you can control how the video behaves using the following toggles:
      1. Autoplay on page load: Starts the video automatically when the page loads. Note that most browsers require the video to be muted for autoplay to function.
      2. Mute audio: Toggles the sound off by default.
      3. Loop infinitely: Automatically restarts the video once it reaches the end.
      4. Remove controls: Hides the play, pause, and volume controls from visitors.
      5. Show/Hide Poster: Click Upload or select from uploaded images to set a thumbnail that appears before the video starts. Optionally, you can select Show no poster.

Need more help?

For more information or further assistance, contact Wingify Support.