How can we help you today?

How to Customize the Image Design Element in Live Mode

This article will demonstrate how to insert and customize the Image Design Element in Live Mode.


Sample Image Design Element



Prerequisites



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:


file picker


Option 2: Using Image URL


Copy the URL of your image and paste it into the Image field:


paste url


Step 3: Customize the Image


Adjust the [1] Width and [2] Height of the image:


Width and Height


(Optional) Add a Color Overlay by using the drop-down or the color picker:


Color overlay

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:


green check mark


Then, click Save:


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:


Design tab


SETTINGS

ImageImage
allows you to choose the image to display on your page.
Use Different Images for Tablets and Mobile DevicesUse Different Images for Tablets and Mobile Devices
allows you to choose a different image to display for tablets and mobile devices.
Panoramic ViewPanoramic view
allows you to have an interactive image interface. Find more about this in Panoramic Settings for ShortPoint Image Design Element.


SIZE


Full width
Full Width 
allows you to stretch the image to fill the container's width, regardless of the original image’s width.
WidthWidth
allows you to manually adjust the width of the image in px, %, or em.

Height
Heightallows you to manually adjust the height of the image in px, %, or em.
Enable Advanced Width/ Height SettingsEnable Advanced Width/Height Settings
allows you to set the minimum and the maximum width and height of your image.


COLOR OVERLAY

Color overlayColor Overlay
allows you to add a color overlay to your image.
Color transparency Color Transparency 
allows you to customize the transparency of the color you chose.


LINKING

LinkLinkallows you to link the image to a different page.
Linking optionsLinking 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 RenderingImage 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:


Spacing tab


CUSTOM PADDING


Padding Top
Padding Top
allows you to customize the top padding of the image.
Padding RightPadding Right
allows you to customize the right padding of the image.
Padding LeftPadding Left
allows you to customize the left padding of the image.
Padding BottomPadding Bottom
allows you to customize the bottom padding of the image.
Apply different padding for Tablet DevicesApply different padding for Tablet Devices
allows you to customize the paddings of the image for tablets.
Apply different padding for Mobile DevicesApply different padding for Mobile Devicesallows you to customize the paddings of the image for mobile devices.


CUSTOM MARGIN

Margin TopMargin Top
allows you to customize the top margin of the image.
Margin RightMargin Right
allows you to customize the right margin of the image.
Margin LeftMargin Left
allows you to customize the left margin of the image.
Margin BottomMargin Bottom
allows you to customize the bottom margin of the image.
Apply different margin for Tablet DevicesApply different margin for Tablet Devicesallows you to customize the margins of the image for tablets.
Apply different margin for Mobile DevicesApply 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.

Custom CSS tab


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:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 54 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more