Images are a crucial part of any design, enhancing visual appeal and improving search engine optimization (SEO) when used correctly. This guide will show you how to add, manage, and style images in Vev.
Adding an Image Element
There are several ways to add an image element to your canvas.
Using the Image Tool
Select the Tool: Choose the Image icon from the top-bar navigation, or use the keyboard shortcut [I].
Place on Canvas: Once selected, click-and-drag the element onto the canvas to specify the desired size and position.
Selecting an Image Source
After adding the image element, the content panel will automatically switch to the Image tab, prompting you to select a source for the new element. From this menu, you can:
Upload: Add images from your computer.
Existing Library: Select from the project’s existing library of uploaded images.
Stock Galleries: Search within the royalty-free image galleries: Unsplash, Pexels, and Pixabay.
Dragging from the Library
Single Image: Click and drag an image directly from the image library onto the canvas.
Multiple Images (Bulk Add): Select the tickbox on each of your desired images. Once your selection is complete, simply click-and-drag the group onto the canvas.
Changing an Existing Image
At any time, if you want to change the image source for an element:
Double-Click: Double-click the image element on the canvas.
Right-Click: Alternatively, right-click the element and select Edit content.
Both actions will open the Image tab within the content panel again, allowing you to select a new image.
Managing the Image Library
Managing your project’s image library is crucial for streamlining your design process and keeping assets organized.
The Image tab is divided into two distinct areas:
Internal Image Library
This area provides an overview of all images that have been uploaded to this specific project.
"In use" Tag: Images that are actively being used in the project will display an "In use" tag for easy tracking.
Stock Images Library
This area allows you to browse and search for royalty-free images from:
Unsplash
Pexels
Pixabay
Note: You can filter the results displayed in the Image panel by using the search function at the top of the panel. When adding an image from a stock library to your canvas, it is automatically uploaded to the Internal Image Library area for future use.
Deleting and Cleaning Up Images
To manage your library space:
Single/Bulk Deletion: Hover over an image card and select the checkbox. Then, select the red bin icon (delete) to remove it. You can easily bulk delete several images by selecting multiple image cards before pressing the delete button.
Remove Unused Assets: The broom icon (clean-up) is a helpful tool that removes all assets that are not currently in use from your image library. Only images actively being used on the project’s canvas will remain.
Managing Image Information (Name and Description)
You can view and change the information for an image by selecting the information tooltip (i) shown when hovering on the relevant image card.
Name (Internal Use)
The Name field is purely for use within the editor to allow you to manage your assets better.
Function: It gives you a visual identifier for an image and makes it easier to find using the search function within the image library panel.
Description (Alt Text for Accessibility)
The Description field is where you should assign the alt text of the image.
Importance: This is essential for accessibility, ensuring that your project complies with accessibility standards and is usable by a wider audience, including those using screen readers.
Image Styling Options
When an image element is selected on the canvas, its contextual styling properties appear in the Style panel on the right-hand side.
Standard Styling: Like all Vev elements, you can adjust standard styling options such as Border, Border-Radius, and Effects.
Object Fit (Cropping and Focus): To crop an image and change its focus point, you will use the Object fit option. From this menu, you can:
Crop your image and select a focus point.
Select the fit behavior, such as cover, contain, or stretch.
Flip the image horizontally or vertically.
Since this is an option within the style panel, you can also adjust the Object Fit setting per-breakpoint if required for responsive design.