How can we help you today?

Text Editing Experience in ShortPoint Visual Builder and Wireframe Builder

In this article we will show you the new text editing experience in Visual Builder and Wireframe Builder.


TABLE OF CONTENTS


This article is for you if

  • You have to the ShortPoint SPFx Visual Builder version 8.0.x.xx or later.
  • You use Office 365 (SharePoint Online) or SharePoint 2019 environment.

General

Text Design Element - a builder block for the rich text content


All rich text contents inside the existing Design Elements are converted to the Text Design Elements after the migration.


In Visual Builder and Wireframe Builder the Text Design Element is now being used as a building block, and it replaced the rich text content.


Note: To know more about migration to Visual Builder, check our solution article Migrating into ShortPoint Visual Builder.

Using inline Design Elements inside the text content


Inline Design Elements are not fully supported: you cannot use them in between two text content parts. Check this solution article for more details: Known Issue: Inline Design Elements are Not Fully Supported in Visual Builder and Wireframe Builder.


For the new content, inline Design Elements be added directly from the text editor options of the Text Design Element. Please continue here to know more: Introducing Inline Design Elements Feature for Visual Builder and Wireframe Builder


Non-licensed users: editing information in content-holder Design Elements


The text content in content-holder Design Elements can be changed after the license expiration. You can freely edit the Text Design Element: change the font, background and text colors, update the linked text etc.


The content-holder Design Elements are:

  • Column
  • Accordions
  • Alert
  • Animate
  • Background
  • Frame
  • Info
  • List
  • Panel
  • Tabs
  • Templates
  • TOC Content
  • Toggles
  • Well


For example, if you have a Panel Design Element with the text content inside:


1. You will not be able to change the Panel settings (title, subtitle, style, icon etc.).

2. You will be able to change the Panel text content - Text Design Element(s) inside it.


Visual Builder mode
Panel title and Text content inside it: Visual Builder mode
Wireframe Builder mode
Panel title and Text content inside it: Wireframe Builder mode




Adding text content to content-holder Design Elements


Visual Builder


When you add the content-holder Design Element inside the column, a Text Design Element with some dummy text content will be added by default:


Text Design Element with default dummy text



Wireframe Builder


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

Switch to the Content tab. Click inside the content area and add the text. 

A Text Design Element will be added by default:


Text Design Element is added as a result


Editing text content


Visual Builder


In Visual Builder you can edit the text content in an EasyPass Active mode and in an inline edit mode.


  • EasyPass Active mode


Activate the EasyPass Active mode for the Text Design Element and open its settings by clicking the cog wheel icon.


EasyPass Active mode and settings window


Customize the text content using the Text editing options.


Note: Check our solution article to know more about Visual Builder EasyPass feature.

  • Inline edit mode


Double click inside the Text Design Element to open the Inline Froala Editor and start editing the text on the fly:


Entering inline text editor


You will not see the display action and borders for the Text Design Element after entering inline edit mode. 

Customize the text content using the Text editing options.


To exit the inline edit mode and hide the Froala editor, click outside the borders of the Text Design Element:


Exiting the inline edit mode


Wireframe Builder


In Wireframe Builder you will be able to edit the text content as separate Text Design Elements or enter an inline edit mode in the Content tab for the content-holder Design Elements.


  • Edit text content in Text Design Element settings


Hover over the existing Text Design Element and click the cog wheel icon to open the settings:


Open the Text Design Element settings with cog icon


The Content tab will open. Add and customize the text content using the Text editing options


  • Inline edit mode for content-holder Design Elements


You can open the settings of the content-holder Design Element and edit the text content from the Content tab directly, using the inline edit mode.


Hover over the existing content-holder Design Element and click the cog wheel icon to open the settings:


Open content-holder Design Element settings


Switch to the Content tab:


Switch to Content tab


Double click inside the content area. The inline Froala editor will appear at the top:


Access inline text editor


Customize the text content using the Text editing options.


Text editing options


Design tab (Visual Builder) / Settings tab (Wireframe Builder) 


Visual BuilderWireframe Builder
Design tab (Visual Builder)Settings tab (Wireframe Builder)


Use the Design tab in Visual Builder or Settings tab in Wireframe Builder to set:

  • Style. 
    • Text Color. Apply text color for the whole content.
      Note: This color could be overwritten using editor colors in the Content tab.
    • Text Alignment. Align the whole text content to left, right, center or justify the alignment.

  • Shadows. Use this feature to add or change the shadow of your text.
    • Shadow Preset. Choose the shadows style from the drop-down of this option.
    • Vertical Distance. Use the slider button to adjust the vertical distance between the text and its shadow.
    • Horizontal Distance. Use the slider button to adjust the horizontal distance between the text and its shadow.
    • Blur. If you want to make your text blur, this option is for you. Use the slider button to set the desired level of blur.
    • Shadow Color. You may change the shadow color with this option. Simply choose it from the drop-down menu of this option or click the color icon to open the color picker to have a wider range of color options.

  • Line Settings.
    • Line Height. Set the spacing between the text lines. Simply use the slider button to adjust the lines' height.
    • Letter Spacing. Set the spacing between the letters. Simply use the slider button to adjust the letter spacing.

  • Link Styles.
    • Link Color. Set the color for all your unvisited links.
    • Link Hover Color. If you would like to apply some different color to the link when you hover over it, simply choose it from the drop-down. 
    • Link Visited Color. If you would like to apply some different color to the visited link, simply choose it from the drop-down.

      Note: the default colors that are set for the links are as following: link color - blue, link hover color - blue underlined, link visited color - light violet. 

Content tab


Use the Content tab to open the text editor and modify separate text parts.


Visual Builder
Wireframe Builder
Content tab and text editing options: Visual Builder
Content tab and text editing options: Wireframe Builder

 

Basic formatting options


You can make your text bold (1), italic (2), underlined (3) and strike-through (4), clear the formatting (5), make the text an ordered (6) or unordered (7) list, change its alignment (8) and font-size (9).


Visual Builder:

Basic text formatting options in Visual Builder


Wireframe Builder:

Basic text formatting options in Wireframe Builder


Additional formatting options


There are additional formatting options: color of the text (1a) and its background (1b), font family (2), paragraph format (3), capitalized text (4).


Visual Builder:

Additional text formatting options in Visual Builder


Wireframe Builder:

Additional text formatting options in Wireframe Builder


Color

Change the color of the text (1a) or the color of text background (1b). You can go with:


  • ShortPoint Colors: presents the colors set up in your Theme Builder.

           Note: text/background color will be synced with the one set in TB and updated along with it.

  • Other Colors: suggests other popular colors.

  • HEX color: you can use a HEX color code here to find the exact color you need. 

Font Family

Change the font of the text with this feature.


If you have any custom fonts, previously added to the Theme Builder (check these articles on how to add custom fonts from Google FontsFonts.com, Adobe Typekit, or manually), they will be displayed in the list of the fonts. Simply choose it from the drop down menu.


Paragraph format

Change the format of your text paragraphs using this feature. 

If you set some parameters (color, line spacing etc.) for the Headings in your Theme Builder (Fonts and Typography > Headings), and then apply it to the paragraph of your text, it will be in the same format. Same as with colors, changing the Headings settings in the Theme Builder, will automatically adjust your text paragraphs settings in the Text Design Element.


Info:You will not see the right colors applied for your headings in the Preview mode (this is a known issue to be fixed). However, colors will be changed after you save the page.

Capitalized text

Use the All Caps or Small Caps icons to make all text capitalized or small-capitalized accordingly.


Code view

Use this option to update the HTML code of your Text Design Element. You will be using this option if you would like to design your text with the custom-built snippets, that you can apply in the Custom CSS of the Text Design Element.  


Idea: Check how to use the custom-built snippets: Creative Custom CSS snippets for Text Design Element.

Inline Design Elements


You can also add inline Design Elements straight from the text editor. 


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 can now insert from the text editor:


Visual Builder:

Inline Elements options: Visual Builder


Wireframe Builder:

Inline Elements options: Wireframe Builder


Note: To know more about inline Design Elements feature, continue to our solution article: Introducing Inline Design Elements Feature for ShortPoint Visual Builder and Wireframe Builder.

Spacing tab


Use the Spacing tab to change the inner spacing (padding) and outer spacing (margin) for the text content of your Design Element on different devices.


Visual Builder
Wireframe Builder
Spacing tab: Visual BuilderSpacing tab: Wireframe Builder


There are following spacing options available:

  • Custom Padding. Set the inner spacing of the text content.
    By default, the padding values are set in px (pixels), but you may as well use the percentage, %. Simply type the desired spacing for the top, bottom, left and right sides.

  • Custom Margin. Set the outer spacing of the text content.
    By default, the margin values are set in px (pixels), but you may as well use the percentage, %. Simply type the desired spacing for the top, bottom, left and right sides.


Note: To know more about setting the spacing, check our solution article: Managing Paddings and Margins for ShortPoint Design Elements.

Visibility tab


Control who you want the Text Design Element to be visible to using the Visibility tab as well as select the devices on which it will be displayed.


Visibility settings are coming soon to Visual Builder. Please, set them using the Wireframe Builder 


Visual Builder
Wireframe Builder
Visibility tab: Visual Builder
Visibility tab: Wireframe Builder


Note: To know more about setting the visibility, check our solution article: Managing Visibility of ShortPoint Design Elements.

Custom CSS tab


Use your own custom CSS code if you need more customization for your text or add custom-built snippets.


Visual Builder
Wireframe Builder
Custom CSS tab: Visual BuilderCustom CSS tab: Wireframe Builder


Note: Check more about the Custom CSS tab here: Custom CSS Tab for ShortPoint Design Elements.

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