Image Editor

Please Note: Your plan may include the Image Editor functionality. Not all product plans have access to this element.

The Image Editor functionality is available for all elements that involve adding images (Gallery, Panel, Video Thumbnail, Blog Images, Banner, Slider, Block Background, etc.).

Accessing the Image Editor

  • To launch the Image Editor, click the Photo element:

  • The pop-up that opens will have two tabs: Image Library and Projects.

Uploading a New Photo

  • Click the Upload Image button to open the uploading dialog:

  • Drag and drop the image, or click Select a Photo to locate it on your computer:

  • The photo will be uploaded right away.

Editing an Image

  • Click the Image area to edit the photo.
  • In the tooltip that appears, click on the Replace icon:

  • Hover over the picture, and click the Edit button:

  • Switch between three suggested tabs to edit your image: Adjust, Filters, and Crop.
  • In the Adjust Settings tab, you can choose between several options: Light, Color, Miscellaneous, and Blur:

  • In the Filters Settings tab, you can select from a variety of filters and change the Intensity of the effect:

  • In the Crop Settings tab, select from the pre-made sizes or create a Custom Size for your photo:

  • Set the custom dimensions for the photo: Aspect Ratio, Width, and Height.

  • You can enable the Lock the Aspect Ratio option by checking the box below.
  • Click the Submit button to save changes.

Creating Merch

  • Hover over the image and click the Merch button:

  • Select the type of Merchandise from the dropdown.
  • Click Buy Merch to proceed:

  • The created merch will open in a separate tab for purchase.

Deleting a Photo

  • Hover over the Photo and click Delete:

  • Click the Delete button on the top:

  • Confirm your choice by clicking Yes on the pop-up that appears.

Adding Tags

  • Hover over the Photo and click the Tags button:

  • In the pop-up, create your tag, and click Enter to define the tag.
  • Click Submit to save the tag for a photo:

Searching Images by Tag

  • Click the search bar and type your tag as the search query:

  • Click on the Untagged Images button to view untagged images:

  • Click the Show All Images button:

You can upload a photo to your project by inserting its link:

  • Click the Upload Photos button:

  • Click the Use Image Link:

  • Paste the link in the search field below:

  • Click Save. The photo will be automatically displayed in the Site Editor.

Using Stock Photos

You can choose a photo from a Free Stock Photos collection:

  • Select the Stock Photos button:

  • Choose the desired image from the list or use the search bar.
  • You can sort stock photos by orientation and sort by relevance or newest:

  • Click the Use Image button:

Please Note: You can edit the photo before adding it to your website. Click the Edit button to proceed.

Creating a New Project

  • To switch to projects, select the Projects tab.
  • Click the Create New Project button:

  • Select an artboard size:

Customizing a Project

  • Base Layer Color. Click the Base Layer Color button to pick a color or enter a color HEX code and click Apply:

  • Base Layer Image: Click the Base Layer Image button to choose a previously uploaded image, use a stock photo, or upload a new image from your computer. You can also delete an image or adjust it using the provided options:

  • In this section, you can apply customization options: Tune, Light, Color, Miscellaneous, and Blur.

  • To use a filter, click the Filters button:

  • Resize: Click the Resize option to modify the size of your image. Choose from pre-defined sizes or create a custom size:

  • Click the Submit button.

Photo Library

To modify a Photo Library section, click the Photo item on the left:

Here, you can upload a photo from your computer or select a stock photo:

  • Click the Crop Photo button to crop the photo:

  • Set the custom dimensions for the picture by using the Aspect Ratio:

Text Section

To be able to modify the Text Section, select the Text item on the left:

  • Text Style. Customize text style by text color, alignments, letter spacing, line height, text box width, padding, text formatting, font, and text effects.

Downloading Image

  • Click the Download button to download the image on your computer/device:

  • The final image will be downloaded in the .png format.

Save and Use Image

Click the Save and Use button to save the changes and use the image on the website:

Layers Management

  • Add Layer. To add a layer, click the Add Layer dropdown and select Text or Photo in the dropdown list:

  • Delete Layer. If you want to delete a layer, select it and click on the trash icon at the bottom.

Related Articles