Image libraries are separate for each workspace. If you add an image to one page, it will still be available for other pages from the same workspace but not for your other workspaces.
The Image Manager is located in your page builder. To access it click on Image.
You can use one of the free images that we selected for you.
Or you can upload one directly from your PC or a URL. The supported file types are WEBP, PNG, JPEG, GIF, and SVG. Please do not upload images larger than 4000 x 4000 px, as they can block the image manager. Our recommendation for sizing is to upload the images at the exact size you intend to use on the page. You can also see more tips and good practices for images in this guide: https://d.pr/8vsThC
NOTE: If your image manager gets blocked or is endlessly loading, it means that an image that was too large was uploaded in the past. In order to solve this, our support team will need to find and delete that image from the backend. You can reach out on live chat or at email@example.com for assistance with this.
NOTE regarding SVGs: Sometimes, the image manager will say that an SVG file is an unsupported file type, even though that is not the case. That can happen when the file is missing an XML line from its body of text. To remedy that, you can use one of three methods:
- Run the image through this service and upload the resulting version: https://www.svgminify.com/
- Open the file in Adobe Illustrator, then save it as a new SVG
- Open the file using a text editor and add this at the first line: <?xml version="1.0" encoding="UTF-8"?>
Easily manage all your images by sorting them into folders.
Edit, Duplicate, or Delete images from within folders.
In edit mode, you can change an image's name and alt tag. Aside from the alt tag describing what the image is about and the function of the image, the alt tag is also used by screen readers. Screen readers are browsers used by blind and visually impaired people.
To add an image to your page simply click Insert when hovering your mouse cursor over it.
Once the image has been added to the page, you can left-click on it, and it will open the menu on the right.
Position and size. Here you can change the position and size without having to drag and drop the image.
Change image. You can modify the image by clicking on this button.
Edit mask. With the help of the image masking tool, the images are scaled and masked to fit the same proportions as the rest of the layout. This option allows you to resize, mask, or reposition the image to your liking.
Set as background. This allows you to set the selected image as a background to a page or a specific block. You can check our article on how to change the background here https://d.pr/ncv4qI.
Link setup. This lets you link the image to an Outside URL or Landing page (dedicated article: https://d.pr/JVS2br); create a pop-up once someone clicks on the image (https://d.pr/QV6bMU); link within the same page (https://d.pr/5p0fpv); or download a file on an image click (https://d.pr/FHiRBZ).
You can right-click on the image, and we will see another menu, as seen in the image above. Besides the Change image and Edit mask options, here we have some additional ones.
Duplicate. Using this, you can duplicate your current image.
Order. This helps you with hiding the image behind an element or positioning it in front of it.
Edit CSS. It will open the Inline CSS Editor, which allows you to add custom styling to your image, as seen here: https://d.pr/j13i0H
Detele. You can delete the current image.