This article will demonstrate how to customize the Link Design Element and identify its features.
TABLE OF CONTENTS
Prerequisite
- You have the latest version of ShortPoint SPFx installed on your SharePoint environment.
- You are a ShortPoint Designer with an active license.
Interactive Tutorial
Click Get Started to learn how to customize the Link Design Element:
NOTECheck out Link Features to learn more about the OOTB options you can customize.
Step-by-step Tutorial
Follow the steps below for a detailed guide on how to customize the Link Design Element:
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 Link Design Element
- Click the plus icon.
- Use the search box to look for Link and click it.
Step 3: Add Link content
- In the Content tab, add a Title.
- Add a Link.
- (Optional) Choose an Icon.
NOTECheck out Link Features to learn more about the OOTB options you can customize.
Step 4: Customize the Link design
- Navigate to the Design tab.
- Choose the Color of your Link.
- Choose your preferred Linking Option.
- Once satisfied, click the green check mark.
NOTECheck out Linking Options to learn more about the options under the Linking Option drop-down.
Step 5: Save
- Then, click the eye icon to see your page in real-time.
- Click Save to apply all your changes.
Link Features
Below are the options you can find in the Link Settings window:
A. Content tab
The Content tab allows you to modify the content of the Link. It has the following options:
Title | allows you to modify the title of the Link. | |
Link | allows you to modify the link to which a user will be redirected. | |
Icon | allows you to customize the icon of the Link. |
B. Design tab
The Design tab allows you to customize the style of the Link Design Element. It has the following options:
Color | allows you to customize the color of the Link. By default, it is set to the primary color of your SharePoint page. | |
Linking Option | allows you to choose how the Link opens. You can choose from Light Box, New Window, and Dialog. |
NOTECheck out Linking Options to learn more about the options under the Linking Option drop-down.
C. Custom CSS Tab
This tab allows you to use your own CSS, HTML, and Javascript code to customize the Link 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 Visibility and Connect tabs are currently unavailable in Live Mode.
That’s it! You can now start customizing the Link Design Element on your SharePoint pages.
Related articles:
- How to Customize the Tabs Design Element
- How to Customize the Accordions Design Element
- How to Customize the Slideshow Design Element