Styling & Editing Images Directly in Smart Builder


Say you upload an image to Smart Builder and realize it needs a bit more finetuning.

Smart Builder offers built-in image controls that allow you to customize, edit, and stylize images, directly within the builder from the editing canvas, such as: 

  1. Cropping
  2. Resizing
  3. Finetuning, and 
  4. Adding Filters to your images. 

This article will explain how to edit your images directly in Smart Builder. 

First, you'll want to upload your image. See Adding Images & Videos to Smart Builder to learn how to upload images or how to access the Image Library in Smart Builder. 

Once you've added an image, you can edit it.

Launching the Edit Image Properties

  1. Single-click an image in Smart Builder.
  2. From the buttons that appear, click the pen icon to launch the Edit Image settings:
    Red arrow pointing to pen icon (Eidt Image) option.
  3. In the Edit Image settings pop-up, click the upload icon, and the Choose Image library will appear.
  4. Click one of the image control options from the right-hand side to launch the editing canvas:
    Gif demo of a user launching the 'Edit Image' options.

You can make edits to your image here within the editing canvas.

Cropping Images

Cropping images will remove any unwanted space or objects from your image. If you're looking to focus or frame on parts of the image, it's best to crop it:

Drag the corners of the image till you reach the desired size:
Gif demo of a user cropping the image to be smaller.

You can also Scale or Straighten the image as well.
Gif demonstration of the option to straighten (rotate) and scale the image in or out.

For a glossary, see the end of this article

Resizing Images

Resize your image & set custom width and height dimensions using the Resize property:

Gif demonstration of the option to resize the image based on width and height.

Finetuning Images

Adjust the brightness, contrast, saturation, and more for your image. Use the slider to increase or decrease the strength of the edit: 
Gif demonstration adjusting the brightness, contrast, saturdation, and more.

For example, moving the slider right (+) on the brightness setting will increase the brightness, and moving the slider left (-) will decrease the brightness.

For a glossary of each property, see the end of this article.

Filtering Images

Adding filters to an image can help enhance your image's tone, appearance, or contrast. There are a handful of filters to try out in the canvas: 
Gif demonstration showing how to add filters to the image.

Undo, Redo, or Reset Options

Click the arrow buttons at the top right-hand corner to undo or redo edits to the image.

To reset the image to its original state, click the reset button at the top left-hand corner:
Gif demonstration of the option to straighten (rotate) and scale the image in or out.

Adding the Image back to Smart Builder

When you're happy with the edits made to your image, you can re-add the image back into Smart Builder.

  1. Click the Save as New Image button at the top of the editing canvas:
    Annotated image of the Save a New Image button at the top of Smart Builder.
  2. The Image Library will appear
  3. Select the image you've just edited.
  4. Click the Choose Image button at the top; the image will appear in the Smart Builder.
    Gif demonstration of the edited image appearing back in Smart Builder.


Crop: Trim or remove excess or wanted space from your image.

Scale: Resizes the image by scaling in or out (zooming in or out). Increase the scale percentage to focus in or out.

Straighten: Rotates the image left or right to straighten it.

Brightness: Refers to the overall intensity or lightness of the image.

Contrast: Adjusting contrast helps you focus on different features of the image based on the amount of color/greyscale.

Saturation: Increases the overall hue or intensity of the colors in the image.

Exposure: Similar to brightness, exposure impacts how light or dark an image appears.

Temperature: Increases or decreases the warm or cool tones of the image.

Gamma: Adds or removes shadows from your image.

Clarity: Sharpens your image; the higher (+) the clarity, the sharper your image appears.

Vignette: Adds a darkened (+) or lightened (-) border around the edges of your image.