Try ShortPoint nowThis article will showcase the customizing options available for the Info Design Element.
TABLE OF CONTENTS
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 Info Design Element:
NOTECheck out Info 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 Info 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 Info Design Element
- Click the plus icon.
- Use the search box to look for Info and click it.
Step 3: Add content
- Add Content.
- Click the cross icon and look for the icon you want to use.
NOTECheck out our Icons page to see all the icons you can use.
Step 4: Customize the Info’s design
- Navigate to the Design tab.
- Customize the Info according to your preferences.
- Once satisfied, click the green check mark.
NOTECheck out Info Features to learn more about the OOTB options you can customize.
Step 5 (Optional): Add a Design Element inside the Info
NOTEInfo is a content-holder Design Element. This means that you can add any other Design Element inside it.
- Hover over the Info tag and click it.
- Click the blue plus icon.
- Select the Design Element you want to display inside the Info.
- 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.
Info Features
Below are the options you can find in the Info Settings window:
A. Content tab
The Content tab allows you to customize the content of the Info. It has the following options:
 | Content | allows you to add content inside the Info. The content field also has a Rich Text Editor. Check out the table below to see its editing features. |
 | Icon | allows you to choose the icon you want to display. NOTE: Check out our Icons page to see all the icons you can use. |
The Rich Text Editor allows you to customize how your text will appear on your page. It has the following options:
| 1 | Bold | makes the format of the text Bold |
| 2 | Italic | makes the format of the text Italic |
| 3 | Underline | makes the format of the text Underline |
| 4 | Text Color | allows you to change the color of your text |
| 5 | Font Family | allows you to change the font of your text. If you have any custom fonts, previously added to the Theme Builder, check these articles on how to add custom fonts from Google Fonts, Fonts.com, Adobe Typekit, or manually. They will be displayed in the list of fonts. |
| 6 | Font Size | allows you to change the size of your text |
| 7 | Paragraph Format | allows you to specify the heading of the text |
| 8 | Undo | allows you to undo your last action |
| 9 | Redo | allows you to redo your last action |
| 10 | More Rich | opens more options in the Rich Text Editor |
| 11 | Background Color | allows you to add a background color to the text |
| 12 | Strikethrough | allows you to add a strikethrough to your text |
| 13 | Clear Formatting | clears the formatting of the text selected |
| 14 | Ordered List | allows you to create an ordered list using numbers |
| 15 | Unordered List | allows you to create an unordered list using bullet points |
| 16 | Align | allows you to change the alignment of the text |
| 17 | All Caps | capitalizes the selected text |
| 18 | Small Caps | turns the selected text into small letters |
| 19 | Code View | allows you to edit the text in code view |
| 20 | Insert Link | allows you to insert a link |
| 21 | Insert Table | allows you to insert a table |
| 22 | Insert Video | allows you to insert a video |
| 23 | Insert Image | allows you to insert an image |
The Rich Text Editor also has ShortPoint Inline Design Elements. You can see them by clicking the ShortPoint icon:
It has the following options:
| 1 | Button | allows you to insert a button |
| 2 | Link | allows you to insert a link |
| 3 | Tooltip | allows you to insert a tooltip |
| 4 | Popover | allows you to insert a popover |
| 5 | Abbreviation | allows you to add an abbreviation |
| 6 | Dropcap | allows you to show drop-cap |
| 7 | Label | allows you to add a label |
| 8 | Emphasis | allows adding emphasis |
| 9 | Icon | allows you to add an icon |
| 10 | Emoticon | allows you to add an emoticon |
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 customize the look of the Info. It has the following options:
 | Color | allows you to modify the color of the Info. You can change the color by [1] typing the color HEXcode, [2] using the drop-down, or [3] choosing a color using the color picker. |
 | Close Button | When enabled, this will add a close button in the upper-right-hand corner of the Info Design Element. |
C. Custom CSS Tab
This tab allows you to use your own CSS, HTML, and Javascript code to customize the Info 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 tab is currently unavailable in Live Mode.
Congratulations! You can now effectively use the Info Design Element on your SharePoint page.
Related articles:
