Try ShortPoint nowIn this article, we'll walk you through how to add Quick Links in ShortPoint using the Quick Links Design Element. Whether you prefer to jump right into the interactive tutorial or follow our easy step-by-step guide below, you'll be ready in no time to give your SharePoint Online pages quick and easy access to your top resources.
TABLE OF CONTENTS
- Prerequisites
- What Is a Quick Link?
- Interactive Tutorial
- Step-by-step Tutorial
- Quick Links Features
- Quick Links Design Element Sample Designs
- Frequently Asked Questions
Prerequisites
- You must have the ShortPoint SPFx version 8.6.2.0 or later installed in your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
What Is a Quick Link?
Looking for a simple way to give your users quick access to their favorite resources? With ShortPoint SPFx version 8.6.2.0 and later, you can easily add Quick Links to your SharePoint pages. This handy feature lets users jump straight to the sites or pages they need with just one click, making navigation faster and more efficient.
The Quick Links Design Element is super easy to customize! You can quickly edit its content, including the title, links, and even add icons to make everything look just how you want. This flexibility lets you create a personalized navigation experience on your SharePoint page, helping users easily access their favorite resources with just a click.
And the best part? No matter how many resources you have, there's no limit to the number of Quick Links you can add to your SharePoint pages. This means you can easily create a personalized and efficient navigation experience, helping your users quickly access all their important sites, documents, and external websites.
There are plenty of fun styling options for you to play with! You can easily adjust colors, styles, and layouts to perfectly match the look and feel of your SharePoint site, making your Quick Links web part not only functional but also visually appealing.
Now that you know what a Quick Link is, let's dive into how you can easily add Quick Links to your SharePoint pages and help your users quickly access their favorite resources.
Interactive Tutorial
Start the interactive tutorial to see exactly how to add Quick Links in ShortPoint with ease! This hands-on guide will help you quickly learn how to insert and customize Quick Links on your SharePoint Online pages.
NOTETo learn more about the features you can customize for Quick Links, check out Quick Links Features.
Step-by-step Tutorial
Follow along with this detailed guide to start adding Quick Links to your SharePoint pages with ease. Whether you're looking to quickly add links to important documents, team sites, or external websites, this step-by-step tutorial will walk you through the process in edit mode, helping you create a smooth and efficient navigation experience for your users.
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 Quick Links Design Element
- Choose where you want to add Quick Links and click the plus icon:
- Use the search box to look for Quick Links and click it:
Step 3: Edit content
- Go to the Items tab.
- Select the cogwheel icon:
- Customize the content according to your preferences.
- Click the back icon:
- Repeat the same steps if you need to add more steps.
NOTEYou can also connect the Quick Links Design Element to external or internal sources to create dynamic content. To learn how, check out ShortPoint Connect: Basic Tutorial.
Step 4: Customize the Design
- Go to the Design tab.
- Customize the look of the Quick Links according to your preferences.
- Go to the Advanced tab.
- Modify its look even further.
- Once satisfied, click the green check mark.
NOTETo learn more about the features you can customize for Quick Links, check out Quick Links Features.
Step 5: Save
- Click the eye icon to see your page in real-time:
- Save your changes:
That's it! You've successfully learned how to add quick links in SharePoint. Now, your users can easily access all their top resources right from your SharePoint page, making navigation faster and more convenient than ever.
Quick Links Features
Here are the handy options you'll find in the Quick Links Settings window that make customizing your Quick Links web part a breeze:
A. Items Tab
The Items tab is your go-to spot for adding new quick links and organizing the content inside each quick link. Here, you’ll find handy options to add, rearrange, duplicate, edit, or remove links, making it super easy to customize your SharePoint page navigation just the way you want it.
 | Add New | allows you to add a new item. |
 | Drag icon | allows you to rearrange the items. |
 | Duplicate icon | allows you to copy an item. |
 | Cogwheel icon | allows you to edit the content of an item. See the table below to see the options you can find inside. |
 | Trash icon | allows you to remove an item. |
COGWHEEL ICON OPTIONS
 | Icon | allows you to choose the icon to be shown. |
 | Title | allows you to add a title. |
 | Link URL | allows you to add a clickable link. |
 | Linking Option | allows you to specify how the link will be opened. You can choose from the following:
|
B. Design Tab
The Design tab is where you can have fun customizing how your Quick Links look and feel! Here, you’ll find options to change the style, size, alignment, and colors to perfectly match your SharePoint page. Whether you want a sleek, professional vibe or something more vibrant, this tab lets you tailor the Quick Links web part to fit your site’s unique style and make navigation even easier for your users.
SETTINGS
 | Style | allows you to choose the style of the Quick Links. |
 | Size | allows you to choose the size of the Quick Links. |
 | Alignment | allows you to change the alignment of the content. |
 | Color | allows you to modify the primary color of the Quick Links. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker. |
 | Color Mode | allows you to choose from Light or Dark color mode. |
 | Apply Random Colors | when enabled, random colors will be applied to each quick link. |
C. Advanced Tab
The Advanced tab is where you can take your Quick Links Design Element customization to the next level! Here, you’ll find options to fine-tune the look and feel of your Quick Links, from adjusting spacing and margins to tweaking colors and roundness. These settings help you create a polished and professional navigation experience that fits perfectly with your SharePoint page’s style. Plus, you can make your Quick Links responsive so they look great on any device. It’s all about giving you full control to design quick links that not only work well but also look amazing!
SPACING
 | Margin Top | allows you to adjust the top margin value in px, %, or em. |
 | Margin Right | allows you to adjust the right margin value in px, %, or em. |
 | Margin Bottom | allows you to adjust the bottom margin value in px, %, or em. |
 | Margin Left | allows you to adjust the left margin value in px, %, or em. |
SETTINGS
 | Space Between Items | allows you to modify the spaces between each quick link. |
 | Text Color | allows you to modify the text color of the Quick Links. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker. |
 | Roundness | allows you to adjust the roundness value of the Quick Links. |
 | Make Quick Links Responsive | when enabled, the Quick Links will cover its entire horizontal space. |
D. Custom CSS Tab
The Custom CSS tab is your playground for adding a personal touch! Here, you can use your own CSS, HTML, and JavaScript code to fully customize the Quick Links Design Element. This means you have complete control over your quick links on your SharePoint page, making it truly yours and perfectly suited to your organization's style.
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.
Quick Links Design Element Sample Designs
Get inspired with these sample Quick Links designs, crafted just for you by our expert designers to help you customize your SharePoint sites with style and ease!
Quick Links Design 1
This sample Quick Links design offers a clean and modern look that's both stylish and user-friendly. The unique icon overlays add an extra touch of visual appeal, making it easy for users to quickly navigate and access their important SharePoint sites and resources with just a click.
Quick Links Design 2
This design brings a lively and colorful vibe to your quick links, making navigation more enjoyable. It highlights the icons prominently, allowing users to quickly spot and access their favorite SharePoint sites and resources with ease.
Quick Links Design 3
This design puts the spotlight on the icons, giving your quick links a fresh and fun circle-shaped look. It’s a great way to make your SharePoint navigation more visually appealing and user-friendly, helping users easily find and access their favorite sites and resources.
Frequently Asked Questions
What are the prerequisites for using the ShortPoint Quick Links element?
To get started with this awesome Quick Links feature, make sure you have ShortPoint SPFx version 8.6.2.0 or later installed in your SharePoint environment. Plus, you'll need an active license as a ShortPoint Designer to unlock all the customization options and easily add quick links to your SharePoint pages.
What kind of customizations are available in the ShortPoint Quick Links element?
The Quick Links Design Element offers a variety of easy-to-use customization options across different tabs to help you tailor your SharePoint navigation perfectly, including its content, style, and Custom CSS. For more details, you can refer to the features section of this article.
Can ShortPoint Quick Links use data from external or internal sources?
Absolutely! The ShortPoint Quick Links Design Element lets you connect to both internal and external data sources, making it super easy to create navigation. This feature is perfect for keeping your SharePoint sites organized and up-to-date, especially when managing a large number of quick links.
Related articles:
