Try ShortPoint nowThis article will show you an overview of ShortPoint Inline Design Elements, including what it is and how to use it on your SharePoint pages.
TABLE OF CONTENTS
- Before we begin
- What are Inline Design Elements?
- Video Tutorial
- Step-by-step Tutorial
Before we begin
- You have the latest version of ShortPoint SPFx installed on your SharePoint environment.
- You are a ShortPoint Designer with an active license.
What are Inline Design Elements?
Inline Design Elements are Design Elements you can insert using the rich text editor. By using it, you can turn a simple line of text into a functional element that can add value to how your content is presented. For example, you can transform a text into a button or a link, or even add abbreviations and emphasis.
There are 10 Inline Design Elements available:
 | Button | allows you to turn a text into a button. Check out How to Customize the Button Design Element to learn more about its features. |
 | Link | allows you to turn a text into a link. Check out How to Customize the Link Design Element to learn more about its features. |
 | Tooltip | allows you to add a tooltip to a text. Check out How to Customize the Tooltip Design Element to learn more about its features. |
 | Popover | allows you to add a popover to a text. Check out How to Customize the Popover Design Element to learn more about its features. |
 | Abbreviation | allows you to add an abbreviation to a text. Check out How to Customize the Abbreviation Design Element to learn more about its features. |
 | Dropcap | allows you to add a dropcap to a text. Check out How to Customize the Dropcap Design Element to learn more about its features. |
 | Label | allows you to add a label to a text. Check out How to Customize the Label Design Element to learn more about its features. |
 | Emphasis | allows you to emphasize a text. Check out How to Customize the Emphasis Design Element to learn more about its features. |
 | Icon | allows you to add an icon to a text. Check out How to Customize the Icon Design Element to learn more about its features. |
 | Emoticons | allows you to add an emoticon. |
Video Tutorial
Watch the video below to get an overview of ShortPoint’s text editing experience and how to insert Inline Design Elements:
Step-by-step Tutorial
There are three ways to insert Inline Design Elements into your page. Follow the option that best fits your needs:
Option 1. Using the Inline Text Editor
Click Get Started to start the interactive tutorial:
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: Activate Inline Text Editing
- Hover over the Text and double-click inside.
Step 3: Insert the Inline Design Element
- Select the text you would like to turn into an Inline Design Element.
- Click the ShortPoint logo to open the inline Design Element options from the text editor.
- Select the Inline Design Element you want to use.
Step 4: Apply
- Customize the look of the Inline Design Element according to your needs.
- Once satisfied, click Apply.
Step 5: Save
- Click the eye icon to see your page in real-time.
- Click Save to apply your changes.
NOTEYou can also use the Inline Text Editor to insert Inline Design Elements into Content-holder Design Elements including Alert, Panel, Tabs, etc.
Option 2. Using the Settings Window
Start the interactive tutorial to insert Inline Design Elements using the settings window:
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: Open the Settings Window
- Click the Text Design Element tag to access the EasyPass Active Mode.
- Click the cogwheel icon to open the Design Element settings.
Step 3: Insert an Inline Design Element
- Switch to the Content tab.
- Select the text you would like to turn into an Inline Design Element.
- Click the ShortPoint logo to open the inline Design Element options from the text editor.
- Choose the Inline Design Element you want to use.
Step 4: Apply
- Customize the look of the Inline Design Element according to your needs.
- Once satisfied, click Apply.
Step 5: Save
- Click the green check mark to apply your changes.
- Click the eye icon to see your page in real-time.
- Click Save.
Option 3. Using Grid Mode
Go through the interactive tutorial to learn how to insert Inline Design Elements in Grid Mode:
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: Switch to Grid Mode
- Click the Switch to Grid Mode icon.
Step 3: Edit the Design Element
- Hover over the Text and click the cogwheel icon.
Step 4: Insert an Inline Design Element
- Switch to the Content tab.
- Select the text you would like to turn into an Inline Design Element.
- Click the ShortPoint logo to open the inline Design Element options from the text editor.
- Choose the Inline Design Element you want to use.
Step 5: Apply
- Customize the look of the Inline Design Element according to your needs.
- Once satisfied, click Apply.
- Click Preview to see how the Inline Design Element will look on your page.
- Click Update.
Step 6: Save
- Click the eye icon to see your page in real-time.
- Click Save to apply your changes.
That's it. Your Inline Design Element is now added. You can now use Inline Design Elements on your own SharePoint pages.
NOTE If your Text Design Element is dynamically connected to a SharePoint List / Library, you can use items mapping for the Inline Design Elements. To learn how to do this, check out How to Map the Items for the Inline Design Elements inside the Connected Text Design Element.
Related articles:
