Adding Filters, Styles, and Opacity to Images in Smart Builder

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

1. Navigate to the Appstab on the left-hand side of Smart Builder.
2. Search and locate the Styled Images App.
3. Click the plus button next to Styled Images to install the app.
4. A window will appear, where you may choose a Styled Images section template.
   
   • See our documentation for more on Section Templates.
5. 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. 

1. Click the image placeholder within the Styled Images section.
2. From the buttons that appear, click the pen icon   to launch the Image Properties settings:
   
   
3. 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 article: Adding Images & Videos to Smart Builder.
4. 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.

1. Single-click your image within the Styled Images section.
2. Click the Image Styles icon:
   

The image effects include Border, Overlay, Filter, and Decoration styles. 

Border Effect

From the Image Styles window, select Border from the Effect drop-down menu.

Here, you will notice a few border options:

Staggered

Adds two staggered borders around the image.  

Cut-out

Applies a cut-out effect to the image, while adding a frame to the image. 

Glowing

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:

Overlay Effect

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:

Solid Overlay

Add a solid color overlay. Select a color from the color picker, and adjust the opacity as needed. 

Gradient Overlay

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:

Filter Effect

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:

Decoration Effect

From the Image Styles window, select Decoration from the Effect drop-down menu.

Here, you will notice a few decoration options: 

Box Shadow

Applies a shadow behind the image to give it more depth.  

Shape

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. 

Reflection

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.