How can we help you today?

How to Customize the Image List Design Element in Live Mode

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


Image list template


TABLE OF CONTENTS


Prerequisites



Step-by-step Tutorial

Follow the steps below to learn how to customize the Image List Design Element:


Step 1: Insert the Image List Design Element


Get Started on the interactive video below to learn how to insert the Image List Design Element using Live Mode:




NOTE: Check out ShortPoint Basics: How to Insert a ShortPoint Design Element in Live Mode for more details.



Step 2: Add Content to the Image List


Go to the Items tab (1), and click the cogwheel icon (2). 


Items tab and cogwheel


Add a Title (1),  a Subtitle (2), and a Description (3).


Title, subtitle and description


Add an Image (1) and a Link (2). 


Image and Link


Choose the Image Placement.


Image Placement

Once satisfied, click the back icon to customize other items on the Image List.


back icon


Repeat the same steps for the other items. 


Repeat steps


(Optional) Click Add New to add new items.


Add New


(Optional) Click the Trash icon to delete an item.


Trash icon


(Optional) Click the Duplicate icon to duplicate an item.


Duplicate icon


(Optional) Drag and drop to arrange the order of the items. 


Drag and drop


Step 3: Customize the Image List


Go to the Design tab. Choose the Theme color (1) and adjust the Image size (2).


Theme color and Image size


Customize the Image Shape, Separator, Separator Color, and Separator Size.


other customization



Step 4: Insert and Save


Once satisfied, click the green checkmark


green checkmark


Click Save.


save button


Then, click Republish.


Republish button


Image List Features


There are many ways to customize the features of the Image List 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
Theme colorTheme Color
customizes the main color of your Image List. 
Image sizeImage size
adjusts the size of the image in px.
Image shapeImage shapechoose the shape of the image from Square, Circle, Tall, and Wide.
SeparatorSeparator adds a separator in between items. You can choose from Line and None.
Separator colorSeparator color customizes the color of the separator.
Separator sizeSeparator size 
customizes the size of the separator.
Horizontal viewHorizontal View
display items horizontally.
Maximum Items per rowMax Items Per Rowcustomize the number of items per row.



  • IMAGE SETTINGS
Image PlacementImage Placement 
choose the placement of the image from Default, Cover the area, Show entire image, and Actual size.
Enable advanced image settingsEnable Advanced Image Settings
turn on the advanced settings for the image.
Image Horizontal PositionImage Horizontal Position
choose the horizontal position of the image from left, right, or center.
Image Vertical PositionImage Vertical Position
choose the vertical position of the image from top, bottom, or center.
Image RepeatImage Repeat

repeats the image. Choose from Default, Repeat, Don’t Repeat, Repeat Horizontally, and Repeat Vertically.



B. Items tab


The Items tab allows you to duplicate, delete, configure content, and add new items. It has the following options:


Items tab


  • ITEMS ACTION ICONS

Duplicate
Duplicate 
duplicates the item selected.

Cogwheel
Cogwheel
opens a new window that allows you to edit the content of each item. See the table below for the cogwheel icon settings.
TrashTrashdeletes the item selected.
Add NewAdd New
 adds a new item.

Drag and Drop
allows you to re-arrange the position of the item.


  • COGWHEEL ICON SETTINGS
titleTitle
add item title.
SubtitleSubtitle 
add item subtitle.
DescriptionDescriptionadd item description.
ImageImageadd an image to an item.
LinkLinkadd a link to redirect users who click on an item.
Image PlacementImage Placement
edits the placement of an image. Choose from default, left, center, or right.
Enable advanced image settingsEnable advanced image settings 

turn on the advanced settings for the image.
Image Horizontal PositionImage Horizontal Position
choose the horizontal position of the image from left, right, or center.

Image Vertical Position
Image Vertical Positionchoose the vertical position of the image from top, bottom, or center.
Image repeatImage Repeatrepeats the image. Choose from Default, Repeat, Don’t Repeat, Repeat Horizontally, and Repeat Vertically.



C. Advanced Tab


This tab allows you to further customize the Image List Design Element. Below are the options available:


Advanced tab


  • MISCELLANEOUS
Text alignmentText alignment
choose the alignment of the text from Default, Justify, Center, Left, or Right.
Vertical AlignmentVertical alignmentchoose the vertical alignment of the text from Default, Top, Middle, or Bottom.
SpacingSpacingchoose the spacing between text from Default, Fat, Thin, or None.


  • IMAGE STYLES

No Image style
No Image Stylecustomize what you want ShortPoint to do when there is no icon associated with an item. You can choose from Letter, None, Empty, and Icon.  
Default imageDefault imageadd a default image for all items.
Image hover effectImage hover effect choose an effect once the mouse hovers over the image. You can choose from None, Zoom, Color, and Color and Zoom.
Image locationImage location
choose the location of the image. Choose from Default, Left, and Right.
Image colorImage color 
choose the color for the icons.


  • TITLE STYLES
Title Text sizeTitle text size
adjust the size of the title.
Bold TitleBold title enable bold title.
Title colorTitle color choose the color of the title.

Title hover color
Title hover color 
choose the color of the title when a mouse hovers over it.


  • SUBTITLE STYLES
Subtitle text sizeSubtitle text size
adjust the size of the subtitle.

Subtitle color
Subtitle colorchoose the color of the subtitle.
Subtitle locationSubtitle location
choose whether to show the subtitle at the top or bottom of the title.



  • DESCRIPTION STYLES
Description colorDescription Color choose the color of the description.
Description max linesDescription max linescustomize the maximum lines of description to show.



  • ITEMS BACKGROUND STYLES

Item background color
Item background color
choose the color of the background.

Item background hover color
Item background hover color customize the color of the background when a mouse hovers over it.


  • LINK SETTINGS

Linking options
Linking optionsspecify the behavior of the link including:
  • Default (link will be opened in the same window), 
  • LightBox (link will be opened in the lightbox), 
  • New window (link will be opened in the new tab), and 
  • Dialog (link will be opened in the dialog window).

Link style
Link Stylechoose the style of the link from Default, Title, and Link.
Link textLink Textadd the text for the link.



D. Custom CSS Tab


This tab allows you to use your own CSS, HTML, and Javascript code to customize the Image List Design Element. 


NOTE: Check out our support article on How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial) to know more about Custom CSS. 


Custom CSS tab


NOTE: The Visibility and Connect tabs are currently not available in Live Mode.




Congratulations! You can now start customizing your Image List Design Element in Live Mode.



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 63 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