How can we help you today?

Known Issue: Inline Design Elements are Not Fully Supported in the Visual Builder

Please note: this article is old and dedicated to ShortPoint Visual Builder Beta early versions. Starting with ShortPoint SPFx 8.0.16.xx version, the inline Design Elements are being migrated smoothly when switching to Visual Builder. 

Make sure to upgrade your ShortPoint version to 8.0.16.xx and later. Continue to these solution articles:


Inline Design Elements are not fully supported in the Visual Builder. You may notice this while migrating your pages into Visual Builder.


In this article, we will explain how you can adjust your contents after the migration.


TABLE OF CONTENTS


This article is for you if

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

Issue


If you have an inline Design Element in between two text parts, after the page migration, it will appear on a new line between two Text Design Elements. This is how it will look like:


  • In the edit mode of a content-holder Design Element, Content tab:


Content tab with 2 text parts and inline Design Element in between


  • In the Wireframe Builder:


Wireframe Builder mode with 2 text parts and inline Design Element in between


  • In the Visual Builder:


Visual Builder mode with 2 text parts and inline Design Element in between


  • In the view mode:


View mode with 2 text parts and inline Design Element in between


Note:
ShortPoint has 9 inline Design Elements in total. These are: Abbreviation, Button, Dropcap, Emphasis, Icon, Label, Link, Popover, Tooltip.

Reason


The inline Design Elements cannot be added in between other text parts in Visual Builder.


Solutions


There are two possible options on how to deal with the inline Design Elements, if you need to use them in the middle of the text:


  • Solution 1. Insert the inline Design Element from the text editor options of the Text Design Element


Select a part of the text and convert it to whatever inline Design Element you want. This way you can also update the migrated page content in case you need to have the inline Design Elements in between the text parts.


Convert the text part into an Inline Design Element


This is how it will look like:


Inline Design Element inside the Text content: edit mode


And in the view mode:


Inline Design Element inside the Text content: view mode


Note:
If you would like to know how to use the inline Design Elements inside the Text Design Element, please, continue to our solution article: Introducing Inline Design Elements Feature for Visual Builder and Wireframe Builder



  • Solution 2. Insert the inline Design Element on a new line


Another option is the default migration behavior: to add an inline Design Element on a new line, so it will appear between two Text Design Elements.


This is how it will look like:


Two Text Design Elements and inline Design Element in between: edit mode


And in the view mode:


Two Text Design Elements and inline Design Element in between: view mode


Please see the steps below:


Step 1: Add the first part of text to the Design Element's content


Edit the page. There are two ways of adding the text content:


  • Option 1. Add a Text Design Element inside the content-holder Design Element

Click the Insert button inside the content-holder Design Element:


Insert button inside content-holder Design Element


Select Text Design Element from the grid:


Text Design Element is selected from the Page Builder options


Inside the Content tab add the text content (1) and click Insert button (2):


Content tab: text is added, prompted to click Insert to add the Design Element


  • Option 2. From the Content tab of the content-holder Design Element


Open the settings of the content-holder Design Element by clicking the cog wheel icon:


Cog icon: Settings of the content-holder Design Element


Switch to the Content tab and add the first part of the text content you would like to have inside the content-holder Design Element:


Switch to Content tab and add the text


Click Update.


Update button


Note:

In both cases inserted text will still be added as a Text Design Element:


Text Design Element is added as a result


To learn more about the text editing experience in Wireframe Builder and Visual Builder, please check this solution article: Text Editing Experience in Visual Builder and Wireframe Builder.


Step 2: Insert the inline Design Element


Click the Insert button inside the content-holder Design Element:


Insert button for the content-holder Design Element


Select from the grid the inline Design Element you would like to use (for example, a Link):


Link Design Element is selected from the Page Builder options


Add the Design Element settings and click Insert once you are done:


Insert button


Step 3: Add the rest of the text to the Design Element's content


Repeat the Step 1 to add the rest of the text content after the inline Design Element.


This is how it will look like in Wireframe Builder mode:


Wireframe Builder view: two Text Design Elements and inline Design Element in between


Save and/or republish your page. 


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