How to Customize the Lead Design Element

This article will expound on how to use the Lead Design Element and its features.

TABLE OF CONTENTS

• Prerequisite
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2:Insert the Lead Design Element
  • Step 3: Add Content
  • Step 4: Customize the Lead’s Design
  • Step 5: (Optional) Add Text Design Element
  • Step 6: Save
• Lead 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 Lead Design Element:

NOTECheck out Lead 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 Lead 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 Lead Design Element

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

Step 3: Add Content

• Add Lead Content.

Step 4: Customize the Lead’s Design

• Navigate to the Design tab.
• Customize the look of the Lead Design Element according to your preference.
• Once done, click the green check mark.

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

Step 5: (Optional) Add Text Design Element

NOTEYou have the option to insert regular Text after your Lead content. Follow along to learn how.

• Click the plus icon.
• Use the search box to look for Text and click it.
• Edit the content and the look of the Text Design Element according to your needs.
• Once satisfied, click the green check mark.

Step 6: Save

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

• Click Save to apply all your changes.

Lead Features

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

A. Content tab

The Content tab allows you to add Lead Content.

B. Design Tab

The Design tab allows you to customize the look of the Lead Design Element. Below are the options you can modify:

	Color	allows you to change the font color of the Lead content. You can do so by [1] writing the HEX code, [2] using the drop-down, or [3] using the color picker.
	Bold	when enabled, the text will be in bold style.

C. Custom CSS Tab

This tab allows you to use your own CSS, HTML, and Javascript code to customize the Small 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 Connect and Visibility tabs are currently unavailable in Live Mode.

That’s it! You can now start showcasing Lead content on your SharePoint pages.

Related articles:

• How to Customize the Popover Design Element
• How to Customize the Label Design Element
• How to Customize the Note Design Element
• How to Customize the Tooltip Design Element