How to Customize the List Design Element

This article will showcase the customizing options available for the List Design Element. 

TABLE OF CONTENTS

• Prerequisite
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2:Insert the List Design Element
  • Step 3: Edit the content
  • Step 4: Customize the List’s design
  • Step 5 (Optional): Add a Design Element inside the List
  • Step 6: Save
• List Features
  • A. Content tab
  • B. Design tab
  • C. Custom CSS Tab

Prerequisite

• You have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You are a ShortPoint Designer with an active license.

Interactive Tutorial

Click Get Started to learn how to customize the List Design Element:

NOTECheck out List Features to learn more about the OOTB options you can customize.

Step-by-step Tutorial

Follow the steps below for a detailed guide on how to customize the List Design Element:

Step 1: Edit the ShortPoint Web Part

• Go to the SharePoint page you want to use and click Edit.

• Click the ShortPoint tag.
• Select the pencil icon.

Step 2:Insert the List Design Element

• Click the plus icon.
• Use the search box to look for List and click it.

Step 3: Edit the content

• Edit the content according to your preference.
• Click the cross icon to remove the default icon and look for the Icon you want to display.

NOTECheck out our Icons page to see all the icons you can add to your SharePoint page.

Step 4: Customize the List’s design

• Navigate to the Design tab.
• (Optional) Toggle on No Divider.
• Once satisfied, click the green check mark.

NOTECheck out List Features to learn more about the OOTB options you can customize.

NOTEYou can also create dynamic lists. Check out ShortPoint Connect: Basic Tutorial to learn more.

Step 5 (Optional): Add a Design Element inside the List

NOTEList is a content-holder Design Element. This means that you can add any other Design Element inside it.

• Hover over the List tag and click it.

• Click the blue plus icon.

• Select the Design Element you want to display inside the List.
• Customize the selected Design Element according to your preference.
• Click the green check mark once satisfied.

Step 6: Save

• Then, click the eye icon to see your page in real-time.

• Click Save to apply all your changes.

List Features

Below are the options you can find in the Icon Settings window:

A. Content tab

The Content tab allows you to customize the content of the List. It has the following options:

	Content	allows you to add content inside the List. The content field also has a Rich Text Editor. Check out the table below to see its editing features.
	Icon	allows you to modify the design of the bullet points.

NOTECheck out our Icons page to see all the icons you can add to your SharePoint page.

The Rich Text Editor allows you to customize how your text will appear on your page. It has the following options:

The Rich Text Editor also has ShortPoint Inline Design Elements. You can see them by clicking the ShortPoint icon:

It has the following options:

NOTECheck out Introducing Inline Design Elements Feature for ShortPoint Page Builder Live Mode and ShortPoint Page Builder Grid to learn more about Inline Design Elements.

B. Design tab

The Design tab allows you to remove the divider between each bullet point in the List.

C. Custom CSS Tab

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

NOTECheck out our support article on How to Insert Custom CSS into a ShortPoint Design Element (Basic Tutorial) to know more about Custom CSS.

NOTEThe Visibility and Connect tabs are currently unavailable in Live Mode.

Congratulations! You can now make the most out of the List Design Element.

Related articles:

• How to Customize the Frame Design Element
• How to Customize the Icon Design Element
• How to Customize the YouTube Video Design Element