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:
- 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 are accessed using this option.
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 <img scr=””> tag inside the parent tag of the element.
- 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.ATTENTION 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.
- To modify an image in a variation webpage, click the image and then select the Edit Image option from the Tools menu.
- In the Edit Image window, you can rotate, flip, sharpen, crop, and perform other enhancements to the image.
- 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.