Try ShortPoint nowWant to add quick links to your SharePoint page? With the ShortPoint Code Editor web part, you can easily do so! Follow the quick walkthrough or go through the in-depth steps to learn how to add quick links in SharePoint.
Quick Walkthrough
Here’s a quick guide on adding SharePoint quick links to your page:
1. Copy the code below:
<div class="quick-links">
<a href="https://shortpoint.com /*{Field1 - 1st Link}*/ " target="_blank">
<span class="material-icons">
home /*{Field2 - 1st Icon (search: fonts.google.com icons)}*/
</span>
</a>
<a href="https://shortpoint.com /*{Field4 - 2nd Link}*/ " target="_blank">
<span class="material-icons">
bolt /*{Field5 - 2nd Icon}*/
</span>
</a>
<a href="https://shortpoint.com /*{Field7 - 3rd Link}*/ " target="_blank">
<span class="material-icons">
group /*{Field8 - 3rd Icon}*/
</span>
</a>
<a href="https://shortpoint.com /*{Field10 - 4th Link}*/ " target="_blank">
<span class="material-icons">
warning /*{Field11 - 4th Icon}*/
</span>
</a>
<a href="https://shortpoint.com /*{Field13 - 5th Link}*/ " target="_blank">
<span class="material-icons">
flag /*{Field14 - 5th Icon}*/
</span>
</a>
</div>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|||||
.quick-links {
display: flex;
gap: 10px;
overflow: visible;
justify-content: center;
align-items: center;
}
.quick-links a {
height: 130px;
width: 130px;
border-radius: 16px;
background: #9CCFFF;
box-shadow: 0px 0px 8px 0px rgba(39, 51, 66, 0.25);
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
transition: box-shadow 0.5s;
}
.quick-links > a > span {
font-size: 50px /*{Field0 - Icons Size (Default: 50px)}*/;
}
.quick-links a:hover {
text-decoration: none;
box-shadow: 0px 0px 10px 0px rgba(39, 51, 66, 0.55);
}
.quick-links a:nth-child(1) {
color: #39566C;
background-color: #9CCFFF /*{Field3 - 1st Link Color (Default: 9CCFFF)}*/;
}
.quick-links a:nth-child(2) {
color: #39566C;
background-color: #A3FFAD /*{Field6 - 2nd Link Color (Default: A3FFAD)}*/;
}
.quick-links a:nth-child(3) {
color: #39566C;
background-color: #FFACEC /*{Field9 - 3rd Link Color (Default: FFACEC)}*/;
}
.quick-links a:nth-child(4) {
color: #39566C;
background-color: #F7FB82 /*{Field12 - 4th Link Color (Default: F7FB82)}*/;
}
.quick-links a:nth-child(5) {
color: #39566C;
background-color: #FFB9BA /*{Field15 - 5th Link Color (Default: FFB9BA)}*/;
}
|||||
/* For more icons: https://fonts.google.com/icons */2. Go to the SharePoint page you want to use and add the ShortPoint Code Editor web part.
3. Edit the ShortPoint Code Editor.
4. Click Import Code.
5. Customize the code by directly editing it or by using the Custom Fields.
6. Close the ShortPoint Code window.
7. Publish the page.
TABLE OF CONTENTS
Prerequisite
- You must already have the ShortPoint Code Web Part installed on your SharePoint page. To learn how to do this, check out How to Install ShortPoint Code Editor in SharePoint.
What is a Quick Link?
Quick Links are clickable words or buttons on your page that help your users navigate between different pages of your intranet. It’s especially helpful in site navigation, making it easier for your site viewers to find what they are looking for.
Step-by-step Tutorial
Follow the detailed guide below to learn how to add quick links to SharePoint:
Step 1: Copy Code
We’ve already prepared a quick links custom code you can use. Simply copy the code below to add it to your page:
<div class="quick-links">
<a href="https://shortpoint.com /*{Field1 - 1st Link}*/ " target="_blank">
<span class="material-icons">
home /*{Field2 - 1st Icon (search: fonts.google.com icons)}*/
</span>
</a>
<a href="https://shortpoint.com /*{Field4 - 2nd Link}*/ " target="_blank">
<span class="material-icons">
bolt /*{Field5 - 2nd Icon}*/
</span>
</a>
<a href="https://shortpoint.com /*{Field7 - 3rd Link}*/ " target="_blank">
<span class="material-icons">
group /*{Field8 - 3rd Icon}*/
</span>
</a>
<a href="https://shortpoint.com /*{Field10 - 4th Link}*/ " target="_blank">
<span class="material-icons">
warning /*{Field11 - 4th Icon}*/
</span>
</a>
<a href="https://shortpoint.com /*{Field13 - 5th Link}*/ " target="_blank">
<span class="material-icons">
flag /*{Field14 - 5th Icon}*/
</span>
</a>
</div>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|||||
.quick-links {
display: flex;
gap: 10px;
overflow: visible;
justify-content: center;
align-items: center;
}
.quick-links a {
height: 130px;
width: 130px;
border-radius: 16px;
background: #9CCFFF;
box-shadow: 0px 0px 8px 0px rgba(39, 51, 66, 0.25);
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
transition: box-shadow 0.5s;
}
.quick-links > a > span {
font-size: 50px /*{Field0 - Icons Size (Default: 50px)}*/;
}
.quick-links a:hover {
text-decoration: none;
box-shadow: 0px 0px 10px 0px rgba(39, 51, 66, 0.55);
}
.quick-links a:nth-child(1) {
color: #39566C;
background-color: #9CCFFF /*{Field3 - 1st Link Color (Default: 9CCFFF)}*/;
}
.quick-links a:nth-child(2) {
color: #39566C;
background-color: #A3FFAD /*{Field6 - 2nd Link Color (Default: A3FFAD)}*/;
}
.quick-links a:nth-child(3) {
color: #39566C;
background-color: #FFACEC /*{Field9 - 3rd Link Color (Default: FFACEC)}*/;
}
.quick-links a:nth-child(4) {
color: #39566C;
background-color: #F7FB82 /*{Field12 - 4th Link Color (Default: F7FB82)}*/;
}
.quick-links a:nth-child(5) {
color: #39566C;
background-color: #FFB9BA /*{Field15 - 5th Link Color (Default: FFB9BA)}*/;
}
|||||
/* For more icons: https://fonts.google.com/icons */Step 2: Add the ShortPoint Code Web Part
Go to the SharePoint page where you want to add the quick links and click Edit:
Click the close icon to leave the Toolbox:
Select the plus icon to add a web part:
Use the search bar to look for ShortPoint Code, or scroll down until you see the Advanced section. Click ShortPoint Code:
Step 3: Edit the ShortPoint Code Web Part
Click the Edit Properties icon:
Step 4: Paste the Code
Click Import Code:
You will get a pop-up asking if you want to overwrite the current code with the code in your clipboard. Click OK:
You will get a notice that the code was successfully imported from your clipboard. Click OK again:
Step 5: Edit the Code
There are two ways you can customize the code. Choose the option that fits your needs:
- The first way is to directly edit the code. To do this, click the field you want to customize, make your edits, and Save:
- The second way is using the Custom Fields. Simply fill in the details and you’ll see the changes you make in real time:
NOTECheck out Custom Field Features to see all the fields you can customize.
NOTEYou can use fonts.google.com/icons to search for icons you can use in the quick links. Simply go to fonts.google.com/icons, use the search bar to look for your desired icon, select it, copy its icon name, and paste it in any of the icon fields.
Step 6: Republish Page
Once satisfied, click the close icon to leave the ShortPoint Code window:
Click Republish once you’re ready to make your changes live:
Congratulations! You now know how to add quick links in SharePoint. Your users will now be able to navigate your pages easily through the customizable SharePoint quick links.
Custom Fields Features
Below are the fields you can find in the Custom Fields section:
 | Icons Size | allows you to customize the size of the icons inside the quick links. The default size is 50px. Make sure to add px after your desired number. Otherwise, it will not work as expected. |
 | 1st Link | allows you to customize the link on the 1st tile. |
 | 1st Icon | allows you to change the icon inside the 1st tile. You can use fonts.google.com/icons to search for the icon you want to add. |
 | 1st Link Color | allows you to change the background color of the 1st tile. Make sure to write the hex code of your desired color without "#". Otherwise, it will not work properly. |
 | 2nd Link | allows you to customize the link on the 2nd tile. |
 | 2nd Link Color | allows you to change the background color of the 2nd tile. Make sure to write the hex code of your desired color without "#". Otherwise, it will not work properly. |
 | 2nd Icon | allows you to change the icon inside the 2nd tile. You can use fonts.google.com/icons to search for the icon you want to add. |
 | 3rd Link | allows you to customize the link on the 3rd tile. |
 | 3rd Link Color | allows you to change the background color of the 3rd tile. Make sure to write the hex code of your desired color without "#". Otherwise, it will not work properly. |
 | 3rd Icon | allows you to change the icon inside the 3rd tile. You can use fonts.google.com/icons to search for the icon you want to add. |
 | 4th Link | allows you to customize the link on the 4th tile. |
 | 4th Link Color | allows you to change the background color of the 4th tile. Make sure to write the hex code of your desired color without "#". Otherwise, it will not work properly. |
 | 4th Icon | allows you to change the icon inside the 4th tile. You can use fonts.google.com/icons to search for the icon you want to add. |
 | 5th Link | allows you to customize the link on the 5th tile. |
 | 5th Link Color | allows you to change the background color of the 5th tile. Make sure to write the hex code of your desired color without "#". Otherwise, it will not work properly. |
 | 5th Icon | allows you to change the icon inside the 5th tile. You can use fonts.google.com/icons to search for the icon you want to add. |
Related articles:
- How to Add an X Post to a SharePoint Page
- How to Add an Instagram Post to a SharePoint Page
- How to Add a LinkedIn Post to a SharePoint Page
- How to Add a Viva Engage Feed to a SharePoint Page
- How to Embed a YouTube Video Playlist to a SharePoint Page
- How to Embed a Vimeo Video Playlist to a SharePoint Page
- How to Add a Stock Widget to a SharePoint Site
- How to Add Canva Designs to SharePoint
- How to Add an Online Digital Clock to a SharePoint Site
