Using Visual Editor to Create Variations

Attention: You are viewing documentation for Visual Editor. If you are looking for Visual Editor Next documentation, click here.

This article covers the following visual editor operations:

Different Visual Editor operations you can use to make changes on your webpage. Change image Change video Edit element Remove elements Select relative element Inline edit Switch to Code Editor Undo/Redo/Save Navigate to URL Navigate Mode Hide/Show elements Rearrange elements Edit iframe content Modify element style Move/Resize an element Modify HTML code of an element Copy-Paste Element/Styles Adding Goals to Track Use AI-Suggested Metrics General element settings Modify element attributes Settings to use while targeting your webpage elements Single Page Application/Server-side Rendering Support Setting Adding bookmarks or Jump links Preview Variations

Visual Editor is a what you see what you get (WYSIWYG) tool to help you modify the design layout of your website pages. Using the visual editor, you can make basic visual changes on your website without writing a single line of code. The intuitive interface of the visual editor makes it easy to use, even for someone with no prior experience in web technology or coding.

Using Wingify Visual Editor, you can modify elements on your webpage, add goals to track, switch to the code editor if you want to make some advanced modifications, and so on. For example, you can change the copy of your website headline or change the size and color of a CTA button.

To open editing options, click the website element you want to change.

#Change Image

Use this option to change images on the website. The Change Image option is displayed when you click the image in the visual editor. The Change Image option is not displayed if you click elements other than an image.

To change an image on a webpage:

1. Click on an image you wish to change on your webpage, and from the menu that appears, select the Change Image option. The Change Image dialog appears.

2. In the Change Image dialog, you can upload an image either by uploading it from your local device or directly adding the URL from where it is sourced.

3. If you wish to show an animation when the image loads, enable the Show Loader animation while fetching images. To learn more about this option and how you can use it in your campaigns, refer to Use Loading Animation for Images on Your Webpage.

4. To make images appear good on different screen sizes (for example, handheld devices, desktops, large HD displays, etc.), you must upload different sizes of the same images (for example, 1x, 2x, etc.) so that the browser can display the suitable one depending on the screen size. You can upload different sizes of the same image in Wingify Editor using the Responsive sizes (srcset) option.

   Note: If you do not see this option, it means that the original image doesn't support responsive sizes. We recommend having a srcset defined for all your images; seek the help of your development team to do so. You can then modify the srcset using Wingify, but you cannot transform a non-responsive image into a responsive one.

   • If you have the images for each size defined, upload them to the respective sizes.
   • If you have additional image sizes for your new image, you can upload them using the Add a size option.
   • If you do not have enough image sizes for the new image, ensure to delete the size(s) using the ⊖ option.

5. You can specify additional attributes for your image in the Title, Alt text, Size, Border fields.

6. To upload the image, click DONE.

#Change Video

Do you wish to modify a video present on your webpage? If so, Wingify makes it possible with the Change Video feature.

For example, with the launch of a new product, your web page’s interface has changed, and you now wish to replace the existing video with a new one available at a different URL. Likewise, if you wish to hide the progress bar from an existing video or mute the audio, you can use the options available under the Change Video feature.

With the Change Video feature, you can modify the videos present on your website. When you click on a video embedded inside a tag in the visual editor, the Change Video option appears.

Info: If you wish to modify a Vimeo or YouTube video embedded in an iframe, click here. The video settings contained within the