Try ShortPoint nowIn 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.
Note: ShortPoint 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
- Available Inline Design Elements
- How to add inline Design Element from the text editor
- Advanced settings. Mapping for the inline Design Elements
- Important: Migrating pages that have inline Design Elements
Before we begin
- You have the ShortPoint SPFx version 8.0.x.xx or later.
- You use Office 365 (SharePoint Online) or SharePoint 2019 environment.
- You are a ShortPoint user with an active license.
Available Inline Design Elements
ShortPoint has 9 inline Design Elements in total. These are:
- Button
- Link
- Tooltip
- Popover
- Abbreviation
- Dropcap
- Label
- Emphasis
- Icon
All these Design Elements, and one new - Emoticons (10), you will now be able to insert directly from the text editor:
The inline Design Elements settings will have all the same fields available for the configuration. For example,
Default Inline Design Elements options | Inline Design Element options from the text editor |
| Tooltip | |
 |  |
How to add inline Design Element from the text editor
In the edit mode, locate the Text Design Element within which you would like to add the inline Design Element. Then, proceed accordingly:
In Live Mode
There are two ways of adding an inline Design Element in the Text Design Element:
Option 1. From the Content tab
Click the Text Design Element tag to access the EasyPass Active Mode:
Click the cog wheel icon to open the Text Design Element settings:
Switch to the Content tab:
Click the ShortPoint icon to open the inline Design Element options from the text editor:
Select the text you would like to convert, and choose the relevant option of the inline Design Element (in our example, we are choosing Link). Configure all the necessary settings and click Apply:
That's it. Your inline Design Element is now added. Do not forget to click the check-mark button to save the changes:
Option 2. From the inline text editor
Double click inside the Text Design Element to activate the inline text editing. Select the text part you would like to turn into an inline Design Element. The text editor options will appear:
Click the ShortPoint icon to open the inline Design Element options from the text editor:
Choose the relevant inline Design Element from the text editor (in our example, we are choosing Link). Configure all the necessary settings and click Apply:
That's it. Your inline Design Element is now added.
You can continue editing the Text Design Element or click outside it to exit the EasyPass Active Mode.
In Grid Mode
Click the cog wheel icon to open the Text Design Element settings:
The Content tab will open. Select the text part you would like to turn into an inline Design Element, and choose the relevant option of the inline Design Element from the text editor options. For example, we are choosing Link inline Design Element:
Configure all the necessary settings and click Apply:
That's it. Your inline Design Element is now added. You can continue editing the Text Design Element or click Update to save the changes.
Advanced settings. Mapping for the inline Design Elements
If your Text Design Element is dynamically connected to a SharePoint list/library or other connection source, you can use the items mapping for the inline Design Elements, that are inside the Text.
Here is how it may look like:
Note: To know more about mapping for the inline Design Elements, continue here: How to Map the Items for the Inline Design Elements inside the Connected Text Design Element.
Important: Migrating pages that have inline Design Elements
Starting with the ShortPoint Page Builder Live Mode Beta version 8.0.16.xx, the inline Design Elements are fully migrated if you are moving to Live Mode.
Important note: You will no longer have your inline Design Elements in between the text parts, moved to the next Row, as it was with the ShortPoint Page Builder Live Mode Beta 8.0.1.xx and earlier. More details about it can be found here: Known Issue: Inline Design Elements are Not Fully Supported in the Live Mode. Make sure to switch your ShortPoint SPFx version to 8.0.16.xx or later to get the inline Design Elements migration improvements, so that the pages with inline Design Elements are migrated smoothly. Continue to this article to know more about upgrading to Beta: ShortPoint SPFx Sandbox Mode Feature. Beta version is available.
Related articles: