How to Add a New Image to a Variation Using Wingify?

A variation of your website may contain any change that you feel can boost conversions. If you decide to create a more visual impact, adding an image can serve the purpose just right. Using Wingify, there are three simple ways to add an image to a variation:

• Using Copy and Paste Operations in Visual Editor
• Using the Select Parent and Edit HTML operations
• Using Custom JS code

Using Copy and Paste Editor Operations

1. In Wingify Visual Editor, click on an existing image on your webpage and then select Copy > Element from the Tools menu.
2. Select a position on your webpage where you want to add a new image and then click Paste. Next, select Before this element or After this element to paste the copied image at the appropriate position.
3. Now you can use this pasted image as a placeholder to insert the new image. Select the pasted image from the previous step, and then select Change Image.
4. You have three options:
   • Upload an image from your local hard drive.
   • Type the URL that specifies the image location.
   • Use an existing image. While choosing the image, you can also type the title, alternative text, and size of the image to be uploaded.

Using the Select Parent and Edit HTML Operations

1. In the visual editor, select an existing image on the webpage and then select Copy.
2. On your webpage, select the position where you want to add a new image and then select Paste. Next, select Before this element or After this element to paste the copied image at this position.
3. Select the copied image from the previous step and then select the Select Parent/Select Relative Element option to edit the element container. Alternatively, you can use the DOM tree to select the element container. To know more, read this article. 

4. To replace the selected element with the image, select the Edit HTML operation. 

    For example, <p><em> This is a placeholder </em></p>. In this HTML code snippet, <em> is the copied element and <p> is the parent element. In the code editor window, replace the <em> tag with an image as follows:

<p><img src=”images/img1.jpg” /></p>

Using the Custom JS Code

You can directly add the JS code snippet in the code editor window to add an image on the page.

For Example,

if (window.timerX) clearInterval(window.timerX);
window.timerX = setInterval(function() {
  if (vwo_$('CSS path of element').length) {
    vwo_$("CSS path of element").after("<img src='images/img1.jpg' />");
    clearInterval(window.timerX);
  }
}, 100);

This code snippet adds the image with src as images/img1.jpg after the element with the CSS selector provided in the code. Follow the best practices while using custom JS code.