How to Customize the Abbreviation Design Element

This article will demonstrate how to add the Abbreviation Design Element to your SharePoint page and how to customize it.

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Option 1: Using the Library of Design Elements
    • Step 1: Edit the ShortPoint Web Part
    • Step 2: Insert the Abbreviation Design Element
    • Step 3: Add content
    • (Optional) Step 4: Add additional content
    • Step 5: Save
  • Option 2: Using the Rich Text Editor
    • Step 1: Edit the ShortPoint Web Part
    • Step 2: Insert the Abbreviation Design Element
    • Step 3: Customize the Abbreviation
    • Step 4: Save
• Abbreviation Features
  • Abbreviation Settings Window
    • A. Content tab
    • C. Custom CSS Tab
  • Abbreviation Rich Text Editor Options

Prerequisites

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

Interactive Tutorial

Start the interactive tutorial to learn the two ways you can customize the Abbreviation Design Element:

NOTECheck out Abbreviation Features to see the options you can customize.

Step-by-step Tutorial

Follow the option that best suits your needs:

Option 1: Using the Library of Design Elements

ShortPoint has a library of Design Elements that ShortPoint Designers can add to their page. Follow along to learn how to insert the Abbreviation Design Element using this option:

Step 1: Edit the ShortPoint Web Part

• Go to the SharePoint page you want to use and click Edit.

• Click the ShortPoint tag.
• Select the pencil icon.

Step 2: Insert the Abbreviation Design Element

• Click the plus icon.
• Use the search box to look for Abbreviation and click it.

Step 3: Add content

• Add a Title.
• Add Content. This will appear when the user hovers over it.
• Once satisfied, click the green check mark.

NOTECheck out Abbreviation Features to see the options you can customize.

(Optional) Step 4: Add additional content

NOTEYou can add additional content after the Abbreviation.

• Click the plus icon.
• Use the search box to look for Text and click it.
• Add additional content.
• Once satisfied, click the green check mark.
• Repeat Steps 3 and 4 if you wish to add more Abbreviations.

Step 5: Save

• Then, click the eye icon to see your page in real-time.

• Click Save to apply all your changes.

Option 2: Using the Rich Text Editor

Abbreviation is an Inline Design Element. This means that you can also insert it into your SharePoint page using the Rich Text Editor. Follow the steps to learn how to access it:

Step 1: Edit the ShortPoint Web Part

• Go to the SharePoint page you want to use and click Edit.

• Click the ShortPoint tag.
• Select the pencil icon.

Step 2: Insert the Abbreviation Design Element

NOTEThe Rich Text Editor can be accessed in Design Elements with text editing features. This includes the Text Design Element and content-holder Design Elements like Alert, Tab, Panel, List etc.

• Hover over the Text, double-click, and highlight the text you want to turn into an Abbreviation.
• Click the ShortPoint icon.

• Select the Show abbreviation icon.

Step 3: Customize the Abbreviation

• Add a Title.
• Click Apply.

NOTECheck out Abbreviation Features to see the options you can customize.

Step 4: Save

• Then, click the eye icon to see your page in real-time.

• Click Save to apply all your changes.

Abbreviation Features

Below are the options you can find in the Abbreviation Settings window and the Rich Text Editor:

Abbreviation Settings Window

These are the options you will find if you used Option 1 to add the Abbreviation Design Element:

A. Content tab

The Content tab allows you to edit the content inside the Abbreviation. It has the following options:

	Title	allows you to add the abbreviation.
	Content	allows you to add the abbreviation meaning.

C. Custom CSS Tab

This tab allows you to use your own CSS, HTML, and Javascript code to customize the Abbreviation Design Element. 

NOTECheck out our support article on How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial) to know more about Custom CSS.

NOTEThe Connect and Visibility tabs are currently unavailable in Live Mode.

Abbreviation Rich Text Editor Options

These are the options you will find if you used Option 2 to add the Abbreviation Design Element:

	Title	allows you to add the abbreviation.
	Content	allows you to add the abbreviation meaning.

That’s it! Start using the Abbreviation Design Element on your SharePoint pages now.

Related articles:

• How to Customize the Text Design Element
• How to Customize the Button Design Element
• How to Customize the Label Design Element