How can we help you today?

Introducing Inline Design Elements Feature for ShortPoint Visual Builder and Wireframe 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. 


Adding Inline Design Element from the text editing options


TABLE OF CONTENTS


Before we begin

  • You have the ShortPoint SPFx Visual Builder 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:

  1. Button
  2. Link
  3. Tooltip
  4. Popover
  5. Abbreviation
  6. Dropcap
  7. Label
  8. Emphasis
  9. Icon


All these Design Elements, and one new - Emoticons (10), you will now be able to insert directly from the text editor:


List of the inline Design Elements in 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
Default Inline Design Elements options: TooltipInline 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 Visual Builder

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:


Accessing EasyPass Active Mode


Click the cog wheel icon to open the Text Design Element settings:


Cog icon: Settings of the Text Design Element


Switch to the Content tab:


Switching to Content tab


Click the ShortPoint icon to open the inline Design Element options from the text editor:


Clicking the ShortPoint icon to expand inline Design Elements options


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:


Adding Link Design Element, clicking Apply


That's it. Your inline Design Element is now added. Do not forget to click the check-mark button to save the changes:


Check-mark button highlighted


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


Activating inline text editor in Visual Builder


Click the ShortPoint icon to open the inline Design Element options from the text editor:


Clicking the ShortPoint icon to expand inline Design Elements options


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:


Adding Link Design Element, clicking Apply


That's it. Your inline Design Element is now added. 


Result: inline Design Element is added


You can continue editing the Text Design Element or click outside it to exit the EasyPass Active Mode.


  • In Wireframe Builder


Click the cog wheel icon to open the Text Design Element settings:


Clicking cog wheel 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:


Content tab and Link inline Design Element are highlighted


 Configure all the necessary settings and click Apply:


Configuring the Link Inline Design Element, clicking 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.


Update button highlighted


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:

Example of dynamic items mapping for inline Design Elements


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 Visual Builder Beta version 8.0.16.xx, the inline Design Elements are fully migrated if you are moving to Visual Builder. 


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 Visual Builder 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 Visual Builder.
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:

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 17 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