How can we help you today?

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

  • 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.

Inline Design Elements

There are 10 Inline Design Elements available:


ButtonButtonallows you to turn a text into a button
LinkLinkallows you to turn a text into a link

popover
Tooltipallows you to add a tooltip to a text
popoverPopoverallows you to add a popover to a text

Abbreviation
Abbreviationallows you to add an abbreviation to a text
DropcapDropcapallows you to add a dropcap to a text
labelLabelallows you to add a label to a text
emphasisEmphasisallows you to emphasize a text

Icon
Iconallows you to add an icon to a text
emoticonEmoticonsallows 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:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 22 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more