How to Customize the Link Design Element

This article will demonstrate how to customize the Link Design Element and identify its features.

TABLE OF CONTENTS

• Prerequisite
• Interactive Tutorial
• Step-by-step Tutorial
  • Option 1: Using the Library of Design Elements
    • Step 1: Edit the ShortPoint Web Part
    • Step 2:Insert the Link Design Element
    • Step 3: Add Link content
    • Step 4: Customize the Link design
    • Step 5: Save
  • Option 2: Using the Rich Text Editor
    • Step 1: Edit the ShortPoint Web Part
    • Step 2: Insert the Link Design Element
    • Step 3: Customize the Link
    • Step 4: Save
• Link Features
  • Link Settings Window
    • A. Content tab
    • B. Design tab
    • C. Custom CSS Tab
  • Link Rich Text Editor Options

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 the two ways you can 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 option that best fits your needs:

Option 1: Using the Library of Design Elements

ShortPoint has a library of Design Elements that ShortPoint Designers can add to their page. Follow along to learn how to insert the Link Design Element using this option:

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, customize the content of the Link.

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.
• Customize the look of the Link according to your preferences.
• Once satisfied, click the green check mark.

NOTECheck out Link Features to learn more about the OOTB options you can customize.

Step 5: Save

• Then, click the eye icon to see your page in real-time.

• Click Save to apply all your changes.

Option 2: Using the Rich Text Editor

Link is an Inline Design Element. This means that you can also insert it into your SharePoint page using the Rich Text Editor. Follow the steps to learn how to access it:

Step 1: Edit the ShortPoint Web Part

• Go to the SharePoint page you want to use and click Edit:

• Select the ShortPoint tag.
• Select the pencil icon.

Step 2: Insert the Link Design Element

NOTEThe Rich Text Editor can be accessed in Design Elements with text editing features. This includes the Text Design Element and content-holder Design Elements like Alert, Tab, Panel, etc.

• Hover over the Text, double-click, and highlight the text you want to turn into a Link.
• Click the ShortPoint icon.

• Select the Show link icon.

Step 3: Customize the Link

• Modify the content and the look of the Link according to your needs.
• Then, click Apply.

NOTECheck out Link Features to learn more about the OOTB options you can customize.

Step 4: Save

• 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 and the Rich Text Editor:

Link Settings Window

These are the options you will find if you used Option 1 to add the Link Design Element:

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. Check out our Icons page to see the list of icons available.

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. Check out Linking Options to learn more about it.

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.

Link Rich Text Editor Options

These are the options you will find if you used Option 2 to add the Link Design Element:

	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. You can check out our Icons page to see the list of icons you can use.
	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. Check out Linking Options to learn more about the options under the Linking Option drop-down.

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