How can we help you today?

How to Customize the Simple List Design Element in Live Mode

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


Simple list template


TABLE OF CONTENTS


Prerequisites


Step-by-step Tutorial

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


Step 1: Insert the Simple List Design Element


Select 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 Content to the Simple List


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


Items tab and cogwheel


Add a Title (1) and a Subtitle (2).


Title and subtitle


(Optional) Add a Description (1) and a Link (2). 

Description and Link


Once satisfied, click the back icon to customize other items on the Simple 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


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


Drag and drop


Step 3: Customize the Simple List


Go to the Design tab and choose the Theme color.


Theme color


(Optional) Add a Separator (1) and customize the Separator Color (2) and Separator Size (3).


Separator, Separator color, and separator size


Step 4: Insert and Save


Once satisfied, click the green checkmark


Green checkmark


Click Save.


Save


Then, click Republish.


Republish


Simple List Features


There are many ways to customize the features of the Simple 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



Theme colorTheme Color
customize the main color of your Simple List. All colors are available on ShortPoint Colors page.
SeparatorSeparator 
adds a separator in between items. You can choose from Line and None.
Separator colorSeparator color
customize the color of the separator.
Separator sizeSeparator size
customize the size of the separator.
Horizontal ViewHorizontal Viewdisplay items horizontally.
Maximum Items Per rowMax Items Per Row
 customize the number of items per row.



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
DuplicateDuplicate
duplicates the item selected.
CogwheelCogwheel
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.
SubtitleSubtitleadd item subtitle.
DescriptionDescriptionadd item description.
LinkLink
add a link to redirect users who click on an item.




C. Advanced Tab


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


Advanced tab


  • MISCELLANEOUS
Text alignmentText Alignment
set how the list item text is aligned on your page. Choose between justified, left, center, or right alignment options.
SpacingSpacingcontrol the overall spacing between list items.


  • TITLE STYLES
Title text sizeTitle text size
set the size of the list item Title in pixels, em, or percentage. The size is set to 1em by default.
Bold titleBold titleset the item Title in bold format.
Title colorTitle color
modify the color of the item Title text. This is set to the primary color of your color palette by default.
Title hover colorTitle hover color 

customize the item Title color when your mouse is over it. This is set to a lighter version of the Title color by default.


  • SUBTITLE STYLES
Subtitle text sizeSubtitle text size
set the size of the list item Title in pixels, em, or percentage. The size is set to be smaller than the Title size.
Subtitle colorSubtitle colormodify the color of the item Subtitle text. This is set to the primary color of your color palette by default.
Subtitle locationSubtitle location
set the location of the item Subtitle. Choose between above the Title or below it.


  • DESCRIPTION STYLES

Description Color
Description colormodify the color of the item Subtitle text. This is set to the primary color of your color palette by default.
Description max linesDescription max linesset the maximum lines of text of the Description to show in the list. This is set to show all text by default with no line limit.


  • LINK SETTINGS
Linking OptionsLinking options 
select how item links will be opened. This is set to launch within the current window by default. You can choose between opening the link in a new window, a lightbox, or a dialog window.
Link StyleLink style choose how users will access the link. By default, the Title of the item will be the link. You can choose to display your preferred Link text as the link by selecting the link option.
Link textLink text
set what text will show as a link on your list. This is set to “Read More” by default.


  • ITEMS BACKGROUND STYLES
Item background colorItem background color
set the background color of your list items. This is set to the primary color of your color palette by default.
Item background hover colorItem background hover color
customize the background color of an item when your mouse is over it. This is set to the primary color of your color palette by default.



D. Custom CSS Tab


This tab allows you to use your own CSS, HTML, and Javascript code to customize the Simple 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 Simple 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