How to Customize the Gradient Text Design Element

NOTEThis Design Element is still in development and will be released soon.

This article will demonstrate how to use Gradient Text and describe all its key features.

TABLE OF CONTENTS

• Prerequisites
• What Is Gradient Text?
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Insert the Gradient Text Design Element
  • Step 3: Add content
  • Step 4: Customize the Style
  • Step 5: Customize the Design
  • Step 6: Save
• Gradient Text Features
  • A. Style Tab
  • B. Content Tab
  • C. Design Tab
  • D. Advanced Tab
  • E. Custom CSS Tab

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 Gradient Text?

Want an eye-catching way to engage your site viewers? Try the Gradient Text Design Element. Starting from ShortPoint SPFx version 8.6.0.0 or later, it adds a gradient effect to your usual text, creating a stunning visual effect.

You can easily modify the content inside Gradient Text. It has a Rich Text Editor that allow you to customize not only its content but also the color, font, size, and so much more.

You can also play around with its design and style. You can mix and match different colors, sizes, and even add a shadow effect.

Interactive Tutorial

Start the interactive tutorial to learn how to customize the Gradient Text Design Element:

NOTETo learn more about the features you can customize for Gradient Text, check out Gradient Text Features.

Step-by-step Tutorial

Follow the detailed guide below to start using Gradient Text:

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 Gradient Text Design Element

• Choose where you want to add Gradient Text and click the plus icon:

• Use the search box to look for Gradient Text and click it:

Step 3: Add content

• Go to the Content tab.
• Customize the content according to your preferences.

Step 4: Customize the Style

• Modify the style as you like.

NOTETo learn more about the features you can customize for Gradient Text, check out Gradient Text Features.

Step 5: Customize the Design

• Go to the Design tab.
• Customize the look of the Gradient Text according to your preferences.
• Once satisfied, click the green check mark.

NOTETo learn more about the features you can customize for Gradient Text, check out Gradient Text Features.

Step 6: Save

• Click the eye icon to see your page in real-time:

• Save your changes:

That's it! You now have a creative and eye-catching Gradient Text on your SharePoint page.

Gradient Text Features

Below are the options you can find in the Gradient Text Settings window 

A. Style Tab

The Style tab allows you to choose the style of the Quick Links. It has the following options:

	Style	allows you to choose the style of the Gradient Text.
	Gradient Color One	allows you to choose the color of the first gradient. You can pick a color by [1] writing a HEX code, [2] using the drop-down, or [3] using the color picker.
	Gradient Color Two	allows you to choose the color of the second gradient. You can pick a color by [1] writing a HEX code, [2] using the drop-down, or [3] using the color picker.

B. Content Tab

The Content tab allows you to modify the content of the Gradient Text. It has a Rich Text Editor that allows you to customize how your text will appear on your page. It has the following options:

	Bold	makes the format of the text Bold.
	Italic	makes the format of the text Italic.
	Underline	makes the format of the text Underline.
	Text Color	allows you to change the color of your text.
	More Text	opens additional options to use.
	Font Size	allows you to change the size of your text.
	Align	allows you to change the alignment of the text.
	List	allows you to create a list. It has to options: Unordered List and Ordered List.
	Background Color	allows you to add a background color to the text.
	Strikethrough	allows you to add a strikethrough to your text.
	All Caps	capitalizes the selected text.
	Small Caps	turns the selected text into small letters.
	Paragraph Format	allows you to specify the heading of the text.
	Paragraph Style	allows you to choose the style of the text. You can choose from Gray, Bordered, Spaced, or Uppercase.
	Clear Formatting	allows you to start from scratch and remove all the changes you've made.
	Font Family	allows you to change the font of your text. If you have any custom fonts, previously added to the Theme Builder, check these articles on how to add custom fonts from Google Fonts, Fonts.com, Adobe Typekit, or manually. They will be displayed in the list of fonts.

MORE RICH

	More Rich	opens more options in the Rich Text Editor.
	Code View	shows the text in code view.
	Insert Table	allows you to add a table.
	Insert Video	allows you to add a video.
	Insert Image	allows you to add an image.

INLINE DESIGN ELEMENTS

	ShortPoint icon	opens the options for Inline Design Elements.
	Show Button	allows you to insert a button.
	Show Link	allows you to insert a link.
	Show Tooltip	allows you to insert a tooltip.
	Show Popover	allows you to insert a popover.
	Show Abbreviation	allows you to add an abbreviation.
	Show Dropcap	allows you to show dropcap
	Show Label	allows you to add a label.
	Show Emphasis	adds emphasis to the text.
	Show Icon	allows you to add an icon.
	Show Emoticon	allows you to add an emoticon.

NOTECheck out Introducing Inline Design Elements to learn more about Inline Design Elements.

C. Design Tab

The Design tab allows you to customize how the Quick Links will look. It has the following options:

	Shadow Enabled	when enabled, a shadow will be added around the Gradient Text.
	Vertical Distance	allows you to adjust the vertical distance of the shadow in px or em.
	Horizontal Distance	allows you to adjust the horizontal distance of the shadow in px or em.
	Blur	allows you to adjust the blur effect of the shadow in px or em.
	Shadow Color	allows you to modify the color of the shadow. You can choose a color by [1] writing a HEX code, [2] using the drop-down, or [3] using the color picker.
	Line Height	allows you to adjust the line height.
	Letter Spacing	allows you to adjust the spacing between letters in px or em.

D. Advanced Tab

The Advanced tab allows you to customize the margin values around the Gradient Text 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 Gradient Text 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:

• How to Customize the Abbreviation Design Element
• How to Customize the Lead Design Element
• How to Customize the Small Design Element
• How to Customize the Search Box Design Element
• How to Customize the Image Boxes Design Element
• How to Customize the Icon Boxes Design Element