In this article, we will show you how to insert the inline Design Elements, such as Link or Abbreviation, right from the text editor options of the Text Design Element.
NoteShortPoint Page Builder Live Mode was formerly known as Visual Builder and Grid Mode was formerly known as Wireframe Builder.
TABLE OF CONTENTS
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 text editor options of the Text Design Element.
There are 10 Inline Design Elements available:
Button | allows you to turn a text into a button | |
Link | allows you to turn a text into a link | |
Tooltip | allows you to add a tooltip to a text | |
Popover | allows you to add a popover to a text | |
Abbreviation | allows you to add an abbreviation to a text | |
Dropcap | allows you to add a dropcap to a text | |
Label | allows you to add a label to a text | |
Emphasis | allows you to emphasize a text | |
Icon | allows you to add an icon to a text | |
Emoticons | allows you to add an emoticon |
Interactive Tutorial
Start the interactive tutorial to learn how to insert an Inline Design Element:
Step-by-step Tutorial
There are two ways to insert Inline Design Elements. Follow the option that best fit your needs:
Option 1. Using the Content tab
Step 1: Open the Settings Window
- Click the Text Design Element tag to access the EasyPass Active Mode.
- Click the cogwheel icon to open the Text Design Element settings.
Step 2: 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 3: Apply and Insert
- Once you are satisfied with how your Inline Design Element looks, click Apply.
- Then, click the green checkmark to apply all changes.
Option 2. Using the Inline Text Editor
Step 1: Activate inline text editing
- Double-click inside the Text Design Element to activate the inline text editing.
Step 2: 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 3: Apply
- Once you are satisfied with how your Inline Design Element looks, click Apply.
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: