Try ShortPoint nowLooking for a way to highlight words in SharePoint? This guide walks you through using the Highlighted Text Design Element to create beautiful text highlights and customize your SharePoint page with ease.
TABLE OF CONTENTS
- Prerequisites
- What Is the Highlighted Text Design Element?
- Interactive Tutorial
- Step-by-step Tutorial
- Highlighted Text Features
- Practical Use Cases for the Highlighted Text Design Element
- Frequently Asked Questions
- What is the Highlighted Text Design Element in SharePoint?
- Can I customize the appearance of highlighted text?
- Is it possible to link highlighted text to other resources?
- Do I need coding skills to use the Highlighted Text Design Element?
- Can I control who sees the highlighted text on my SharePoint page?
- What are the prerequisites for using the Highlighted Text Design Element?
- How can I further customize the Highlighted Text Design Element?
Prerequisites
- You must have the ShortPoint SPFx version 8.8.0.0 or later installed in your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
What Is the Highlighted Text Design Element?
You can get started with the Highlighted Text Design Element starting from ShortPoint SPFx version 8.8.0.0 onwards.
It allows you to showcase beautiful and fun text highlights on your SharePoint page. You'll be able to customize all content inside.
You also get to control every aspect of the design, including font size, style, and different colors, to achieve the perfect look for your SharePoint site.
Interactive Tutorial
Click Get Started to easily add highlighted words and text highlights to your SharePoint page:
NOTETo learn more about the features you can customize for Highlighted Text, check out Highlighted Text Features.
Step-by-step Tutorial
Learn how to highlight words in SharePoint using the Highlighted Text Design Element. These visual text highlights make your SharePoint page even more engaging for your users. This will allow you to highlight multiple words and customize the highlight color and font size for a vibrant look.
Step 1: Edit the ShortPoint Web Part
- Go to the SharePoint page you want to use and click Edit.
- Close the Toolbox:
- Click the Edit properties icon:
Step 2: Insert the Highlighted Text Design Element
- Choose where you want to add the Highlighted Text and click the plus icon:
- Use the search box to look for Highlighted Text and click it:
Step 3: Customize the Content
- Go to the Content tab.
- Customize the content of the Highlighted Text according to your preferences.
NOTETo learn more about the features you can customize for Highlighted Text, check out Highlighted Text Features.
Step 4: Customize the Design
- Go to the Design tab.
- Customize the look of the Highlighted Text according to your preferences.
- Go to the Advanced tab.
- Modify the design even further.
- Once satisfied, click the green check mark.
NOTETo learn more about the features you can customize for Highlighted Text, check out Highlighted Text Features.
Step 5: Save
- Click the eye icon to see your page in real-time:
- Save your changes:
Congratulations! You've successfully created highlighted words in SharePoint. With this text highlighter tool, you can easily captivate and capture your page viewers’ attention. By customizing the highlight color and font size, you can make your SharePoint page more engaging and visually appealing.
Highlighted Text Features
Want to tailor your highlighted words? You'll find plenty of useful settings in the Highlighted Text Settings window to help you showcase your selected text exactly the way you envision.
A. Content Tab
The Content tab is where you can edit the content inside the Highlighted Text Design Element. Here are the options you can tweak:
SETTINGS
 | Text Before | allows you to modify the content before the highlighted text. |
 | Highlighted Text | allows you to change the content to be highlighted. |
 | Text After | allows you to modify the content after the highlighted text. |
LINK
 | Link | allows you to link the text to an internal or external source. |
 | Linking Option | allows you to choose how the link will be opened. |
B. Design Tab
The Design tab is where you get to have fun customizing the look and feel of your text highlights. Here are the options you can modify:
HIGHLIGHT
 | Style | allows you to choose the highlighted text style you prefer. You can choose from 9 styles. |
 | Text Color | allows you to change the primary color of the text. You can change the color by [1] typing the HEX code, [2] using the drop-down, or [3] using the color picker. |
 | Highlighted Text Color | allows you to change the color of the highlighted text. You can change the color by [1] typing the HEX code, [2] using the drop-down, or [3] using the color picker. |
 | Highlight Color | allows you to change the color of the highlight. You can change the color by [1] typing the HEX code, [2] using the drop-down, or [3] using the color picker. |
 | Enable Gradient | when enabled, a gradient effect will be applied. |
TEXT
 | Text Size | allows you to adjust the size of the text. |
 | Font weight | allows you to choose from Bold, Regular, or Medium. |
 | Text Alignment | allows you to modify the alignment of the text. You can choose from Left, Right, or Center. |
SHADOWS
 | Shadow Enabled | when enabled, a shadow will be added to the Highlighted Text. |
 | Vertical Distance | allows you to modify the vertical distance value of the shadow. This option is only available when Shadow Enabled is turned on. |
 | Horizontal Distance | allows you to modify the horizontal distance value of the shadow. This option is only available when Shadow Enabled is turned on. |
 | Blur | allows you to add and control the blur effect for the shadow. This option is only available when Shadow Enabled is turned on. |
 | Color | allows you to choose the color of the shadow. You can change the color by [1] typing the HEX code, [2] using the drop-down, or [3] using the color picker. This option is only available when Shadow Enabled is turned on. |
C. Connect Tab
The Connect tab allows you to link the Design Element to SharePoint sources (List, Document Library, News, etc.) and other external sources (Microsoft Graph API, Teams, Outlook, etc.). For more details about ShortPoint Connect, check out Basic Tutorial: How to Establish Seamless SharePoint Connection with ShortPoint Connect.
D. Visibility Tab
The Visibility tab allows you to specify who can see the Design Element and what type of devices it can be shown on. For more details, check out How to Use the ShortPoint Visibility Feature for Effective SharePoint Access Management.
E. Advanced Tab
The Advanced tab allows you to customize the appearance of the highlighted words further. Below are the options you can modify:
SETTINGS
 | Container Width | allows you to adjust the container width value. |
SPACING
 | Margin Top | allows you to adjust the top margin of the text. |
 | Margin Bottom | allows you to adjust the bottom margin of the text. |
F. Custom CSS Tab
This tab lets you add your own custom touch to the Highlighted Text Design Element using custom CSS, HTML, and JavaScript. This gives site owners and designers greater control over how the highlighted text will look.
NOTECheck out our support article on How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial) to know more about Custom CSS.
Practical Use Cases for the Highlighted Text Design Element
The Highlighted Text Design Element in ShortPoint offers versatile applications to enhance your SharePoint page and improve user engagement. Here are some practical use cases to consider:
- Emphasizing Important Announcements: Use the highlight option to draw attention to critical updates, deadlines, or company news, making sure key information is clearly visible to all users.
- Enhancing Navigation with Linked Highlights: By adding links through the Content tab, you can create highlighted words that serve as quick access points to related documents, resources, or external websites, improving the overall user experience.
- Branding and Theming: Customize the highlight color, font size, and style to align with your corporate branding, ensuring a consistent look across your intranet web page.
- Call to Action (CTA) Highlights: Make CTAs stand out by using vibrant highlight colors and distinct font styles, encouraging users to take desired actions such as signing up for events or accessing training materials.
- Accessibility Enhancements: Utilize the Design Element’s customization features to create visible, easy-to-read highlights that comply with accessibility standards, benefiting all users, including those relying on screen readers.
- Section Headers and Key Terms: Highlight section titles or important phrases within content to improve readability and help users quickly locate relevant information on lengthy pages.
These use cases demonstrate how the Highlighted Text Design Element can be a powerful tool to create visually appealing and functional text highlights that enrich your SharePoint intranet.
Frequently Asked Questions
What is the Highlighted Text Design Element in SharePoint?
The Highlighted Text Design Element is a feature in ShortPoint SPFx that allows you to easily highlight words and create visually appealing text highlights on your SharePoint page. It provides customization options for font size, highlight color, and style to enhance your intranet design.
Can I customize the appearance of highlighted text?
Yes! The Design tab lets you tailor the highlight color, text color, font size, and even apply gradient effects. The Advanced tab offers additional options such as shadows, margins, and icon styles to make your highlighted text stand out on your SharePoint page.
Is it possible to link highlighted text to other resources?
Absolutely. The Content tab includes a Link option where you can add internal or external links to your highlighted text, enhancing navigation and user engagement within your SharePoint intranet.
Do I need coding skills to use the Highlighted Text Design Element?
No coding is required. ShortPoint provides a no-code site builder experience, enabling users to create and customize highlighted words and other design elements easily.
Can I control who sees the highlighted text on my SharePoint page?
Yes, using the Visibility tab, you can specify which users, groups, or devices can view specific highlighted items on your SharePoint page, helping you deliver personalized content.
What are the prerequisites for using the Highlighted Text Design Element?
You must have ShortPoint SPFx version 8.8.0.0 or later installed and an active ShortPoint Designer license. This ensures you have access to all the latest features for text highlighting and intranet customization.
How can I further customize the Highlighted Text Design Element?
For advanced users, the Custom CSS tab allows adding custom CSS, HTML, or JavaScript to tailor the highlighted words beyond default settings, offering full control over the design and functionality.
Related articles:
- How to Create SharePoint Headers Using the Heading Design Element
- How to Place SharePoint Buttons Next to Each Other Using the Dual Button Design Element
- How to Create a SharePoint Hero Section Using the Hero Caption Design Element
- How to Create a Spinning Text Effect in SharePoint Using the Rotating Text Design Element
- How to Add Lottie Animation in SharePoint Using the Lottie Design Element
How to Create a Timeline in SharePoint Sites Using the Timeline Design Element
