Introducing Inline Design Elements Feature for ShortPoint Page Builder

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
• What are Inline Design Elements?
• Interactive Tutorial
• Step-by-step Tutorial
  • Option 1. Using the Content tab
    • Step 1: Open the Settings Window
    • Step 2: Insert an Inline Design Element
    • Step 3: Apply and Insert
  • Option 2. Using the Inline Text Editor
    • Step 1: Activate inline text editing
    • Step 2: Insert the Inline Design Element
    • Step 3: Apply

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:

• How to Map the Items for the Inline Design Elements inside the Connected Text Design Element
• Text Editing Experience in ShortPoint Page Builder Live Mode and Grid Mode
• Migrating into ShortPoint Page Builder Live Mode
• ShortPoint Page Builder Live Mode: Known Issues and Limitations