Text Editing Experience in ShortPoint Page Builder Live Mode and Grid Mode

In this article we will show you the new text editing experience in Live Mode and Grid Mode.

Note: ShortPoint Page Builder Live Mode was formerly known as Visual Builder and Grid Mode was formerly known as Wireframe Builder.

TABLE OF CONTENTS

• This article is for you if
• General
  • Text Design Element - a builder block for the rich text content
  • Using inline Design Elements inside the text content
  • Non-licensed users: editing information in content-holder Design Elements
• Adding text content to content-holder Design Elements
  • Live Mode
  • Grid Mode
• Editing text content
  • Live Mode
    • EasyPass Active mode
    • Inline edit mode
  • Grid Mode
    • Edit text content in Text Design Element settings
    • Inline edit mode for content-holder Design Elements
• Text editing options
  • Design tab (Live Mode) / Settings tab (Grid Mode)
  • Content tab
    • Basic formatting options
    • Additional formatting options
    • Inline Design Elements
  • Spacing tab
  • Visibility tab
  • Custom CSS tab

This article is for you if

• You have to the ShortPoint SPFx 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 Live Mode and Grid Mode 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 Live Mode, check our solution article Migrating into ShortPoint Page Builder Live Mode.

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 Live Mode and Grid Mode.

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 Live Mode and Grid Mode

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.

Live Mode

Grid Mode

Adding text content to content-holder Design Elements

Live Mode

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:

Grid Mode

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:

Editing text content

Live Mode

In Live Mode 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.

Customize the text content using the Text editing options.

Note: Check our solution article to know more about Live Mode 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:

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:

Grid Mode

In Grid Mode 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:

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:

Switch to the Content tab:

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

Customize the text content using the Text editing options.

Text editing options

Design tab (Live Mode) / Settings tab (Grid Mode) 

Live Mode	Grid ModeBuilder

Use the Design tab in Live Mode or Settings tab in Grid Mode 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.

Live Mode	Grid Mode

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

Live Mode:

Grid Mode:

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

Live Mode:

Grid Mode:

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 Fonts, Fonts.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:

Live Mode:

Grid Mode:

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

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.

Live Mode	Grid Mode

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 Live Mode. Please, set them using the ShortPoint Page Builder Grid Mode.  

Live Mode	Grid Mode

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.

Live Mode	Grid Mode

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

Related articles:

• Introducing ShortPoint Page Builder Live Mode
• Live Mode Feature: EasyPass
• Live Mode: Known Issues and Limitations
• Known Issue: Inline Design Elements are Not Fully Supported in the ShortPoint Page Builder Live Mode and Grid Mode
• Expectations from ShortPoint Page Builder Live Mode Beta Release