How to Customize the Label Design Element

This article will detail the two ways you can insert the Label Design Element into your SharePoint page. Follow the option that best suits your needs.

TABLE OF CONTENTS

• Prerequisite
• Interactive Tutorial
• Step-by-step Tutorial
  • Option 1: Using the Library of Design Elements
    • Step 1: Edit the ShortPoint Web Part
    • Step 2: Insert the Label Design Element
    • Step 3: Add content
    • Step 4: Customize the Label’s Design
    • Step 5: Save
  • Option 2: Using the Rich Text Editor
    • Step 1: Edit the ShortPoint Web Part
    • Step 2: Insert the Label Design Element
    • Step 3: Customize the Label
    • Step 4: Save
• Label Features
  • Label Settings Window
    • A. Content tab
    • B. Design tab
    • C. Custom CSS Tab
  • Label Rich Text Editor Options

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

Start the interactive tutorial to learn the two ways you can customize the Label Design Element:

NOTECheck out Label Features to see the options you can customize.

Step-by-step Tutorial

There are two ways to customize the Label Design Element. Follow the option you want to use:

Option 1: Using the Library of Design Elements

ShortPoint has a library of Design Elements that ShortPoint Designers can add to their page. Follow along to learn how to insert the Label Design Element using this option:

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 Label Design Element

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

Step 3: Add content

• Add a Label Content.

Step 4: Customize the Label’s Design

• Navigate to the Design tab.
• Customize the look of the Label according to your preference.
• Once satisfied, click the green check mark.

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

Step 5: Save

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

• Click Save to apply all your changes.

Option 2: Using the Rich Text Editor

Label is an Inline Design Element. This means that you can also insert it into your SharePoint page using the Rich Text Editor. Follow the steps to learn how to access it:

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 Label Design Element

NOTEThe Rich Text Editor can be accessed in Design Elements with text editing features. This includes the Text Design Element and content-holder Design Elements like Alert, Tab, Panel, etc.

• Hover over the Text, double-click, and highlight the text you want to turn into a Tooltip.
• Click the ShortPoint icon.

• Select the Show label icon.

Step 3: Customize the Label

• Customize the look of the Label according to your preferences.
• Click Apply.

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

Step 4: Save

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

• Click Save to apply all your changes.

Label Features

Below are the options you can find in the Label Settings window and the Rich Text Editor:

Label Settings Window

These are the options you will find if you used Option 1 to add the Label Design Element:

A. Content tab

The Content tab allows you to edit the content inside the Label. 

B. Design tab

The Design tab allows you to customize the look of the Label Design Element. 

	Stroke	when enabled, the Label will change to Stroke style.
	Badge	when enabled, the Label will change to Badge style.
	Color	allows you to change the color of the Label. You can do so by [1] writing the HEX code, [2] using the drop-down, or [3] using the color picker.

C. Custom CSS Tab

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

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

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

Label Rich Text Editor Options

These are the options you will find if you used Option 2 to add the Label Design Element:

	Label Content	allows you to edit the content inside the Label.
	Stroke	when enabled, the Label will change to Stroke style.
	Badge	when enabled, the Label will change to Stroke style.
	Color	allows you to change the color of the Label.

That’s it! Start using the Label Design Element on your SharePoint pages now.

Related articles: 

• How to Customize the Vimeo Video Design Element
• How to Customize the Textshow Design Element
• How to Customize the Frame Design Element