Upgrade the look of your images in Smart Builder without using CSS or third-party image editing tools.
This article will explain how to add custom filters, overlays, borders, & stylized backgrounds to images within a section using the Styled Images App in Smart Builder.
Installing the Styled Images App
- Navigate to the Appstab on the left-hand side of Smart Builder.
- Search and locate the Styled Images App.
- Click the plus button next to Styled Images to install the app.
- A window will appear, where you may choose a Styled Images section template.
- See our documentation for more on Section Templates.
- Once selected, the Styled Images section will appear in Smart Builder:
Updating Images in the Styled Images Section
Follow these steps to upload your own images and replace the existing image placeholders within the section template.
- Click the image placeholder within the Styled Images section.
- From the buttons that appear, click the pen icon to launch the Image Properties settings:
- Upload an image from the Image Library, drag & drop an image from your PC, or search through images in Unsplash or Pexels.
- To learn more, see the following articles: Uploading Images to Smart Builder and Adding Images from Unsplash or Pexels to Smart Builder.
- The image will appear in Smart Builder. Continue these steps to replace the remaining images in the section:
Adding Image Effects
Once you've uploaded the images, you can add a variety of custom filters, overlays, borders, & stylized backgrounds.
- Single-click your image within the Styled Images section.
- Click the Image Styles icon:
The image effects include Border, Overlay, Filter, and Decoration styles.
From the Image Styles window, select Border from the Effect drop-down menu.
Here, you will notice a few border options:
Adds two staggered borders around the image.
Applies a cut-out effect to the image, while adding a frame to the image.
Adds a rainbow-colored border to the image.
Each border option includes Settings that you can adjust to change the color, aspect ratio (the ratio of its width and height), or width of the border.
To view these settings, scroll down to the bottom of the Image Styles window:
From the Image Styles window, select Overlay from the Effect drop-down menu.
Overlays allow the option to add layers to your image. The Overlay Options are:
Add a solid color overlay. Select a color from the color picker, and adjust the opacity as needed.
Add a gradient color overlay, adjust the opacity as needed, and adjust which two colors to include in the gradient transition. You can also change the direction of the gradient:
Select from a variety of built-in filters to add to your images. To adjust the strength or opacity of each filter, scroll down to the bottom of the Image Styles window:
From the Image Styles window, select Decoration from the Effect drop-down menu.
Here, you will notice a few decoration options:
Applies a shadow behind the image to give it more depth.
Add a unique circle, square, or grid shape around the edges of the image, to add a more abstract appearance. You can adjust the shape color, opacity, or tilt to the shape.
Adds a reflection behind the image to apply more depth.
To adjust the settings of each Decoration option, scroll down to the bottom of the Image Styles window:
Be sure to Save and Publish your page when you're happy with these changes.