A picture is worth a thousand words. Learn how to add and style images in Vev as well as how to change the image's information to better position your page in search engines.
Add an image
Find the image tool by navigating to the top menu and
Click the image icon (Shortcut
i) or,Click the plus icon to open Add menu where you search for and select "Image".
Add an image container by clicking and dragging it onto the canvas.
Double-click the image container to open your image library.
Upload and select an image, or choose one from Unsplash or Pixabay.
Replace an image
Double-click the image container where you want to replace the image.
In the Object fit editor on your right, press the button "Replace image" to open your image library.
Upload or select the image to replace, or choose one from Unsplash or Pixabay.
Crop and fit an image
Decide how your image behaves inside the container with the Object fit editor in the right-side style tab. These are the fitting settings you can choose from:
Cover: The image keeps its aspect ratio and fills the dimension of the container.
Contain: The image keeps its aspect ratio but resizes to fit inside the dimension of the container.
Stretch: The image does not keep its aspect ratio to fill the dimension of the container.
Once you have decided how you want your image to behave within the container, you can adjust the cropping of your image by following the steps below.
How to crop an image:
Select the image you want to crop.
Double-click the image to open the Object fit editor.
Navigate to the slider labeled "Zoom" located below the image preview.
Use the slider to decide how much you want to zoom into your image.
Use the blue circle on the image preview to select the area of the image you want to display.
You can further customize and style your image by using the other style editors listed below.
Background: Adds background to your container. Note: For images, you need to set your Object fit to Contain if you want the background to be visible as it will always place itself behind the image.
Border: Sets a border, color, opacity, and line weight.
Border radius: Curves the radius of the border.
Effects: Adds different types of shadows or blur effects. ➡️ Learn more about effects
Opacity: Sets the opacity of your container.
The image library
The image library is a collection of images you have uploaded to your project or selected from a stock library. This is how you find and add images from your image library:
Navigate to the top bar to the image tool button and press the arrow icon to open the dropdown.
Click the "Open image library" option.
From here you can select an image and add it to the canvas by double-clicking the image or pressing the "Use image" button.
Image alternative text
In the image library, you can edit the image name and description/alternative text for SEO or accessibility purposes. Use these steps to add alternative text to your images:
In the image library, select the image you want to add alternative text to.
On your right, you can find fields where you can add more information about your image.
In the field labeled "Description/alternative text", add an image description that gives the information needed to understand what the image is for those who cannot see it.
