How do I edit an image in Website Builder?
Make your website images shine with our built-in photo editor. Resize images, enhance their appearance, and add stylish elements - all without leaving the Website Builder.
You can edit manually or use our no-fuss AI editor to get the exact edits you want in no time.
Edit your image manually
- Go to your Website Builder editor and select the Image component containing the image you want to edit.
- Click Edit image.
- Click the pencil icon in the top left corner of the grey menu that appears.
- Edit the image using the editing options available and click Save.
- A copy of the original image has been saved to My images. It is located in the folder "onewebmedia" on your web space.
Editing options for the manual editor
You have the following editing options available:
Make it look better
Improve how your image looks. Adjust size and brightness, and add filters or focus points to fit your site better.
- Transform - Adjust the shape of your image to a preset or custom build and rotate or mirror it to make it fit perfectly on your site.
- Filters - Add colour filters to your image to change the tone and style. Choose from preset filters and then customize these to your taste.
- Adjust - Adjust, among others, your image's contrast, saturation and gamma. You can refine it by adjusting exposure, shadows, sharpness, and more.
- Focus - Focus on a specific part of your image while the rest is blurred.
Add styling and decorations
Not satisfied with just an image? Use style elements to make your pictures stand out.
- Text - Add a text box on top of the image, and choose a colour, font, size and background.
- Text design - Add text labels to your image, for example, a "SALE" label. You can choose from several designs and adjust size and colour.
- Stickers - Add emoticons, hearts or stars to your image, or highlight certain bits with arrows.
- Brush - Use a brush to draw shapes or lines on your image. Click twice on a colour to get more options.
- Frames - Add borders and frames to your image, make it look like a slide, or add an art deco frame.
- Overlays - Add effects to your image with an overlay. Make it look like metal or wood or all gold and sparkly with a grain overlay.
Use the AI image editor
Before you start using the AI editor, it might be good to know that you have a set number of AI edits to use. This number represents the total number of edits available for use across all image components on your site. Your plan determines the number of edits, with higher plans offering more.
1 AI edit is used every time you click the Generate button or click one of the three quick action buttons. You can see how many AI edits you have left in the counter on the bottom-left side below the field.
Here's how to use the AI image editor:
- Go to your Website Builder editor and select the Image component containing the image you want to edit.
- Click Edit with AI in the tab above or below the component.
A new window with the AI editor will open. You can use it in two ways:
- Write your own prompt describing what you want to change.
- Use one of the quick actions available via the buttons over the main field. The three quick actions are these:
- Boost resolution: Automatically enhances the image's pixel resolution, making it appear sharper.
- Auto improve: Applies some automatic corrections to the image to enhance brightness, contrast, saturation, and details. It'll make the image look clearer and more vibrant.
- Remove background: Cuts out objects and replaces the background with a transparent screen.
If you want to use one of the three quick actions, click the button, and the action will be executed, applying the change to your image. If you want to add a custom prompt, then write what you would like in the field and click Generate.
Once you're satisfied with your image, click Use this version to exit the editor and use the image on your site.
Save and publish your site to make the image appear on your live website.
Related articles: