Using VWO Visual Editor, you can change, insert, or edit images on a webpage without touching a single line of code. Using the editor, you can perform the following actions on your webpage:
Insert a new image.
Edit an existing image.
On VWO Visual Editor, click the image you want to replace and then select Change Image from the Editor Tool options.
In the Change Image window, specify the image you want to upload and then enter the title, alternative text for the image, and size of the image.
Upload Image: To upload a new image, click Choose File to select an image from your local hard disk.
Specify URL: If the image you want to upload is already online, enter the URL to access the image.
Browse Existing Images: Browse the images you have already uploaded and then select the one that you want to upload. The images you upload are saved on VWO cloud servers, and the same is accessed using this option.
Enter the title, alt text, and size of the image you want to upload and then click Done.
PRO-TIP: If the image you uploaded is bigger in size than the
original version (control), the original image might appear for
a moment before the new image is loaded on the webpage.
To avoid flickering in such cases, first, use the Hide operation
on the image in the control. Next, use the Edit HTML operation or
the code editor and add a style attribute with value as
display:block !important to ensure that the visibility of the
image is always on. When a visitor lands on the web page, the
hide operation ensures that the control image is hidden and the
rendered the image. To learn more about the Edit HTML operation,
Alternatively, you can also use the image loader animation to
handle the flickering issue. To know more, refer to Use Loading
Animation for Images on Your Webpage.
Inserting a New Image
To insert a new image to a variation page, click the element where you want to insert the image and then click the Edit HTML option from the Tools option.
In the HTML window, add the image tag inside the parent tag of the element. For example, <img scr=‘http://example.com/main.jpg'>
Alternatively, you can also insert the new image using the Edit option from the Tools menu. Click the Image option from the Edit window to upload a new image to a variation.
To insert the image, click Done.
NOTE: It is recommended not to use the Edit HTML or Edit operation on
dynamic content such as product image/price/description, cart product
count, dynamic headlines, and so on. Use the Edit or Edit HTML operation
on elements that require minor modification or to change a single element
on a web page.
- If the image you want to edit is associated with the stylesheet of the website with the tag background-image:url(‘http://image.png’), you will notice the Edit Background Image option when clicking the image. Click the option to edit the image.
After making the changes, click Apply > Done to save the changes.