Images are another element of a webpage that adds interest and improves user understanding and experience. Let us go over how you can work with Images in SP Page Builder.

How to Add an Image

Open the Addons Panel by clicking on the Addons button on the Sidebar or using the plus icon found within a Row. Scroll to the Media section and drag & drop the Image addon where you want to place it on your canvas.

Image Settings

Next, it’s time to choose the Image you want to add from the Media Manager and customize it. Open Image Settings by clicking on the image icon from the inline editor to find these options.

Choose Image: Opens the Media Manager from where you can select the image you want to use.

Image URL: If the image you want is online, you can simply paste its URL into the text field beside the Upload button.

Upload: Also opens Media Manager and from here you can click on the Upload Files option to upload your Image.

Alt Text: Add an alternative text to your Image. 

Width: Set the Image’s width. Use the range slider to increase or decrease the value or enter a number into the text field beside it.

Height: Set the Image’s height. Use the range slider to increase or decrease the value or enter a number into the text field beside it.

Radius: Use this option to round the edges of the Image. Increasing it will give you rounder edges and decreasing it will give you sharper edges. 

Click on the Expansion icon and unlock the padlock to specify the radius for each corner differently.

After adding the Image, the panel will look as shown above. An Image Thumbnail will replace the Choose Image button.

Replace: Hover over the Thumbnail to find the Replace button which will open the Media Manager

Clear: Click on this button to remove this image and add another one.

Image Shapes

Enable the Image Shapes option to access the list of available shapes. Simply click on each shape to apply it to your desired image.

Effects (Color, Opacity)

The Effects options property applies graphical effects to the image element. For example, we can apply a blur effect to an image, a black an white filter, or change properties like contrast, saturation etc. When the filter property values contain multiple functions, the filters are applied in order. You may combine any number of functions to manipulate the rendering. 

Enable the Effects option to apply color filter effects to your images. Once enabled, adjust the intensity of each effect by dragging left or right. Alternatively, input values directly into the corresponding boxes for precise adjustments. 

Note: The filter property (Effects) is not supported in Internet Explorer or Edge 12.

Title

You can also give your Image a Title. Go to the Title tab on the Image Settings to access this option. 

Title: Enter the text for the Title.

HTML Element: Set the HTML element hierarchy as H1, H2, H3, etc.

Position: Set the position as top or bottom.

Top Margin: Set the top margin of your Title.

Bottom Margin: Set the bottom margin of your Title.

You can further customize your Title’s style using the options from the Color and Typography menus on the Title tab. For more information check out their dedicated documentation.

Link Settings

To link your image to a page, head over to Link Settings from the inline editor. Here you can choose between the options URL, Menu, and Page.

Open in Lightbox: Enable this option to open this image within a Lightbox.

URL: Choose this option to add an outbound link or link using a URL.

Menu: Choose this option if you want to link to a Menu Item from this website. Select the one you want to link to from the following dropdown list.

Pages: Choose this option if you want to link to a Page from this website. Select the one you want to link to from the following dropdown list.

Open in New Tab: Open the added link in a new tab.

No Follow: Enable to tell search engines to ignore this link.

Alignment

To adjust the Text Block’s Alignment, click on its icon on the inline editor. Alignment options include Left, Center, and Right.