Try ShortPoint nowThis article will demonstrate how to insert and customize the Image Design Element in Live Mode.
Prerequisites
- You have the latest version of ShortPoint SPFx installed for your environment
- You are a ShortPoint Designer with an active license
Step-by-step Tutorial
Follow the steps below to learn how to customize the Image Design Element:
Step 1: Insert the Image Design Element
Click Get Started to start the interactive tutorial:
NOTE: Check out ShortPoint Basics: How to Insert a ShortPoint Design Element in Live Mode for more details.
Step 2: Add an image
There are several ways to add your image:
Option 1: Using File Picker
In the Design tab, click the folder icon and select the image you want to add from the file picker:
Option 2: Using Image URL
Copy the URL of your image and paste it into the Image field:
Step 3: Customize the Image
Adjust the [1] Width and [2] Height of the image:
(Optional) Add a Color Overlay by using the drop-down or the color picker:
NOTE: Check out Image Features to see other customizable features you can use.
Step 4: Insert and Save
Once you are satisfied with how your image looks, click the green checkmark:
Then, click Save:
Image Features
There are many ways to customize the features of the Image Design Element. In the settings window, you will find the following tabs:
A. Design Tab
You can modify the default design of the element in the Design Tab. Below are the settings you can configure:
SETTINGS
 | Image | allows you to choose the image to display on your page. |
 | Use Different Images for Tablets and Mobile Devices | allows you to choose a different image to display for tablets and mobile devices. |
 | Panoramic view | allows you to have an interactive image interface. Find more about this in Panoramic Settings for ShortPoint Image Design Element. |
SIZE
 | Full Width | allows you to stretch the image to fill the container's width, regardless of the original image’s width. |
 | Width | allows you to manually adjust the width of the image in px, %, or em. |
 | Height | allows you to manually adjust the height of the image in px, %, or em. |
 | Enable Advanced Width/Height Settings | allows you to set the minimum and the maximum width and height of your image. |
COLOR OVERLAY
 | Color Overlay | allows you to add a color overlay to your image. |
 | Color Transparency | allows you to customize the transparency of the color you chose. |
LINKING
 | Link | allows you to link the image to a different page. |
 | Linking Options | allows you to choose how you want the link to be opened. For more information about linking options, check out Types of Linking Options in Page Builder Elements. |
PERFORMANCE
 | Image Lazy Rendering | when toggled on, the image will not be loaded until the user scrolls to the image location. |
B. Spacing Tab
This tab allows you to change the inner spacing (padding) and outer spacing (margin) of your image on different devices. Below are the options you can customize:
CUSTOM PADDING
 | Padding Top | allows you to customize the top padding of the image. |
 | Padding Right | allows you to customize the right padding of the image. |
 | Padding Left | allows you to customize the left padding of the image. |
 | Padding Bottom | allows you to customize the bottom padding of the image. |
 | Apply different padding for Tablet Devices | allows you to customize the paddings of the image for tablets. |
 | Apply different padding for Mobile Devices | allows you to customize the paddings of the image for mobile devices. |
CUSTOM MARGIN
 | Margin Top | allows you to customize the top margin of the image. |
 | Margin Right | allows you to customize the right margin of the image. |
 | Margin Left | allows you to customize the left margin of the image. |
 | Margin Bottom | allows you to customize the bottom margin of the image. |
 | Apply different margin for Tablet Devices | allows you to customize the margins of the image for tablets. |
 | Apply different margin for Mobile Devices | allows you to customize the margins of the image for mobile devices. |
C. Custom CSS Tab
This tab allows you to use your own CSS, HTML, and Javascript code to customize the Image Design Element.
NOTE: Check out our support article on How to Insert Custom CSS into Page Builder Element? (Basic Tutorial) to know more about Custom CSS.
NOTE: The Connect and Visibility tabs are currently not available in Live Mode.
Congratulations! You now know how to customize the Image Design Element. You can now add awesome images to your page.
Related articles:
