Text Editing Experience in ShortPoint

This article will give you an overview of the text editing experience in ShortPoint. 

TABLE OF CONTENTS

• Prerequisites
• What is the Text Design Element?
• Video Tutorial
• Adding the Text Design Element
• Adding text content to content-holder Design Elements
• Editing text content
• Editing text content after license expiration
• Text Editor Features

Prerequisites

• You have the latest version of ShortPoint SPFx installed on your environment.
• You must be a ShortPoint Designer with an active license.

What is the Text Design Element?

The Text Design Element is a ShortPoint Design Element that allows you to add text to your SharePoint pages. You can customize its color, font, style, and many more using the Text Editor.

NOTE All rich text content inside existing Design Element will be converted to Text Design Element after migration. To know more about migration to Live Mode, check out Migrating into ShortPoint Page Builder Live Mode.

Video Tutorial

Watch the video below to see ShortPoint’s editing experience and the features it offers:

Adding the Text Design Element

Click Get Started to learn how to insert the Text Design Element on your page:

NOTE Check out How to Customize the Text Design Element to learn more about the features you can customize.

Adding text content to content-holder Design Elements

Content-holder Design Elements are design elements that hold content inside. These elements include Column, Accordions, Alert, Animate, Background, Frame, Info, List, Panel, Tabs, Templates, TOC Content, Toggles, and Well. Start the interactive tutorial below to learn how to add text inside content-holder Design Elements:

Editing text content

Check out the interactive tutorial below to learn how to edit text:

NOTE If you experience any issues while using Inline Design Elements, check out Known Issue: Inline Design Elements are Not Fully Supported in Live Mode and Grid Mode.

Editing text content after license expiration

Check the interactive experience below to see what will happen to the text editing feature after license expiration:

Text Editor Features

The Text Design Element has a Rich Text Editor that allows you to customize how your text will appear on your page. It has the following options:

1. Bold - makes the format of the text Bold
2. Italic - makes the format of the text Italic
3. Underline - makes the format of the text Underline
4. Text Color - allows you to change the color of your text
5. Font Size - allows you to change the size of your text

When you click the More Text icon in the Rich Text Editor, it allows you to access more text formatting options. Check out the options available below:

1. Background Color - allows you to add a background color to the text
2. Strikethrough - allows you to add a strikethrough to your text
3. All Caps - capitalizes the selected text 
4. Paragraph Format - allows you to specify the heading of the text
5. Paragraph Style - allows you to choose the style of the paragraph. You can choose from Gray, Bordered, Spaced, or Uppercase.
6. Clear Formatting - clears the formatting of the text selected
7. Font Family - allows you to change the font of your text. 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 fonts.

When the Align icon is selected, it allows you to customize the alignment style. Below are the options available:

1. Align Left - changes the alignment of the text to the left
2. Align Center - changes the alignment of the text to the center
3. Align Right - changes the alignment of the text to the right
4. Align Justify - changes the alignment to justified style

When the List icon is clicked, it allows you to turn the text into a list. It has the following options:

1. Unordered List - allows you to customize the style of unordered lists. 
2. Ordered List - allows you to customize the style of ordered lists.

If the More Rich icon is selected, it opens more options in the Rich Text Editor. It has the following options:

1. Code View - shows the text in code view
2. Insert Link - allows you to insert a link
3. Insert Table - allows you to insert a table
4. Insert Video - allows you to insert a video
5. Insert Image - allows you to insert an image

The Rich Text Editor also has ShortPoint Inline Design Elements. You can see them by clicking the ShortPoint icon. It has the following options:

1. Button - allows you to insert a button
2. Link - allows you to insert a link
3. Tooltip - allows you to insert a tooltip
4. Popover - allows you to insert a popover
5. Abbreviation - allows you to add an abbreviation
6. Dropcap - allows you to show drop-cap
7. Label - allows you to add a label
8. Emphasis - allows adding emphasis
9. Icon - allows you to add an icon
10. Emoticon - allows you to add an emoticon

NOTECheck out Introducing ShortPoint Inline Design Elements to learn more about what an Inline Design Element is and how to use them.

That’s it! You now have an overview of the ShortPoint text editing experience. Try it out on your SharePoint page now.

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