Try ShortPoint nowNOTEThis Design Element is still in development and will be released soon.
This article will demonstrate how to use Quick Links and describe all its key features.
TABLE OF CONTENTS
Prerequisites
- You must have the ShortPoint SPFx version 8.6.0.0 or later installed in your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
What Is Quick Links?
Need a new way to go to your top resources? Starting from ShortPoint SPFx version 8.6.0.0 or later, you can now use Quick Links to do so. This gives way for your users to quickly access the site or page they need with a single click.
The Quick Links Design Element is easily customizable. You can edit its content, including the title, the links, and even icons, as you need.
To top it off, even if you have tons of resources, you will not be limited. You can add as many Quick Links as you want on your SharePoint pages.
Tons of stylistic options are also available for you to explore. You can adjust colors, styles, and layouts to match the theme of your SharePoint site.
Interactive Tutorial
Start the interactive tutorial to learn how to customize the Quick Links Design Element:
NOTETo learn more about the features you can customize for Quick Links, check out Quick Links Features.
Step-by-step Tutorial
Follow the detailed guide below to start using Quick Links:
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: Add content
- Go to the Items tab.
- Click Add New to add a Step:
- 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 Style
- Select the Quick Links style you want to use.
Step 5: Customize the Design
- Go to the Design tab.
- Customize the look of the Quick Links according to your preferences.
- 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 6: Save
- Click the eye icon to see your page in real-time:
- Save your changes:
That's it! You now have easy access to top resources on your SharePoint page using Quick Links.
Quick Links Features
Below are the options you can find in the Quick Links Settings window
A. Style Tab
The Style tab allows you to choose the style of the Quick Links.
B. Items Tab
The Items tab allows you to add new items and organize the content inside the Quick Links. It has the following options:
 | 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:
|
C. Design Tab
The Design tab allows you to customize how the Quick Links will look. It has the following options:
SETTINGS
 | Size | allows you to choose the size of the Quick Links. |
 | Alignment | allows you to change the alignment of the content. |
 | Space Between Items | allows you to modify the spaces between each Step in px, %, or em. |
 | Show Subtle Icon | when enabled, the subtle icon at the top-right corner will be shown. |
 | Main 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. |
 | Secondary Color | allows you to modify the secondary 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. |
 | 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. |
BACKGROUND SETTINGS
 | Roundness | allows you to adjust the roundness value of the Quick Links. |
 | Icon Background | when enabled, a rounded background behind the icons will be shown. |
 | Icon Background Color | allows you to modify the icon background 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. |
 | Icon Background Roundness | allows you to adjust the roundness value of the icon background. |
D. Advanced Tab
The Advanced tab allows you to customize the margin values around the Quick Links Design Element. It has the following options:
 | 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. |
E. Custom CSS Tab
This tab allows you to use your own CSS, HTML, and JavaScript code to customize the Quick Links 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.
Related articles:
