How can we help you today?

How to customize the ShortPoint Text Design Element in Live mode


This article will demonstrate how to customize the Text Design Element and expound on each of its editable features. 


Sample Text Design Element



Prerequisite

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

Step-by-step tutorial


Follow the steps below to learn how to customize the Text Design Element:


Step 1: Insert the Text Design Element


Click Get Started to start the interactive video:




NOTE: Check out ShortPoint Basics: How to Insert a Design Element on your page to learn more about inserting elements.

Step 2: Edit the content


Click Get Started for an interactive tutorial on how to edit the content:



NOTE: Check out Text Features to learn more about the options you can edit in the Rich Text Editor.

Step 3: Customize the Text Design Element


Click the Text tag and select the cogwheel icon to open the Settings window:


Cogwheel icon


In the Design tab, you can customize the appearance of your text according to your preference. For this guide, we will change the [1] Text Alignment and [2] Shadow Preset:


Text alignment and shadow preset


NOTE: Check out Text Features to learn more about the tabs you can use to customize your Text Design Element.

Step 4: Insert and Save


Click Get Started to start the interactive tutorial:



Text Features


A. Rich Text Editor


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:


Rich Text Editor


  1. Undo - allows you to undo your last action
  2. Redo - allows you to redo your last action
  3. Bold - makes the format of the text Bold
  4. Italic - makes the format of the text Italic
  5. Underline - makes the format of the text Underline
  6. Text Color - allows you to change the color of your text
  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.
  8. Font Size - allows you to change the size of your text
  9. Paragraph Format - allows you to specify the heading of the text
  10. More Rich - opens more options in the Rich Text Editor
  11. Background Color - allows you to add a background color to the text
  12. Strikethrough - allows you to add a strikethrough to your text
  13. Clear Formatting - clears the formatting of the text selected
  14. Ordered List - allows you to create an ordered list using numbers
  15. Unordered List - allows you to create an unordered list using bullet points
  16. Align - allows you to change the alignment of the text
  17. All Caps - capitalizes the selected text 
  18. Small Caps - turns the selected text into small letters
  19. Insert Link - allows you to insert a link
  20. Insert Table - allows you to insert a table
  21. Insert Video - allows you to insert a video
  22. 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:


ShortPoint icon


It has the following options:


Inline Design Elements


  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


NOTE: Check out Introducing Inline Design Elements Feature for ShortPoint Page Builder Live Mode and ShortPoint Page Builder Grid to learn more about Inline Design Elements.

B. Design tab


The Design tab contains settings you can apply to the Text Design Element:


Design Tab


STYLE

Text ColorText Color
allows you to change the text color for the whole content. This color could be overwritten by the color you select in the Rich Text Editor.
Text AlignmentText Alignmentallows you to apply text alignment for the whole content. The alignment could be overwritten by the alignment you select in the Rich Text Editor.


SHADOWS

Shadow PresetShadow Preset
allows you to customize the style of the text shadow.
Vertical DistanceVertical Distance
allows you to customize the vertical distance of the shadow.

Horizontal Distance
Horizontal Distanceallows you to customize the horizontal distance of the shadow.
BlurBlurallows you to add a blur to the text.

Shadow Color
Shadow Color
allows you to customize the color of the shadow.


LINE SETTINGS


Line height
Line Height allows you to customize the spacing between the lines of your text.

Letter Spacing
Letter Spacingallows you to customize the spacing of each letter.


LINK STYLES

Link Color


Link Color
allows you to customize the color of the link.

Link Hover Color
Link Hover Colorallows you to customize the color of the link when you hover over it.

Link Visited Color
Link Visited Color
allows you to customize the color of the link when you click it.

C. Spacing tab


The Spacing tab allows you to customize the paddings (inner spacing) and margins (outer spacing) of the text. It has the following options:


Spacing tab


CUSTOM PADDING

Padding TopPadding Top
allows you to customize the top padding of the text.
Padding RightPadding Rightallows you to customize the right padding of the text.
Padding LeftPadding Left
allows you to customize the left padding of the text.

Padding Bottom
Padding Bottom
allows you to customize the bottom padding of the text.
Apply Different padding for Tablet DevicesApply different padding for Tablet Devicesallows you to customize the padding for tablet devices.
Apply Different padding for Mobile DevicesApply different padding for mobile Devices
allows you to customize the padding for mobile devices.


CUSTOM MARGIN

Margin TopMargin Top
allows you to customize the top margin of the text

Margin Right
Margin Right
allows you to customize the right margin of the text
Margin LeftMargin Left
allows you to customize the left margin of the text
Margin BottomMargin Bottomallows you to customize the bottom margin of the text
Apply Different margin for Tablet DevicesApply different margin for Tablet Devicesallows you to customize the margins for tablet devices
Apply Different margin for Mobile DevicesApply different margin for mobile Devices
allows you to customize the margins for mobile devices


NOTE: By default, the padding and margin values are set in px (pixels). However, you can change the value to % (percent). Simply type the desired spacing for the top, bottom, left, and right sides.

D. Custom CSS


The Custom CSS tab allows you to add your own CSS, HTML, and Javascript code to customize the Text Design Element. 


NOTE: Check out How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial) to learn more about Custom CSS.


Custom CSS tab


NOTE: The Connect and Visibility tabs are currently not available in Live Mode. Switch to Grid Mode to access these tabs.

That’s it! You now know the features you can edit for the Text Design Element. Enjoy exploring them on 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 32 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