How to Customize the Note Design Element

This article will demonstrate how to customize the Note Design Element and list all its features.

TABLE OF CONTENTS

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

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

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

Step 3: Customize the content

• (Optional) Add a Title.
• Add Content.

Step 4: Customize the Note’s design

• Navigate to the Design tab.
• Select the Color of the Note.
• Once satisfied, click the green check mark.

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

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

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

• Hover over the Note tag and click it.

• Click the blue plus icon.

• Select the Design Element you want to display inside the Note.
• 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.

Note Features

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

A. Content tab

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

	Title	allows you to add a Title to the Note.
	Content	allows you to add content inside the Note. The content field also has a Rich Text Editor. Check out the table below to see its editing features.

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 choose the color of the Note. 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 Note 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. 

Congratulations! You now know all the customization options available when you use the Note Design Element.

Related articles:

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