This article will walk you through the process of customizing the Ticker Design Element and its basic features.
TABLE OF CONTENTS
- You have the latest version of ShortPoint SPFx installed on your SharePoint environment.
- You are a ShortPoint Designer with an active license.
Follow the steps below to learn how to customize the Ticker Design Element:
Step 1: Insert the Ticker Design Element
Click Get Started to start the interactive tutorial on how to insert design elements:
Step 2: Edit the Ticker content
Start the interactive tutorial to learn how to edit the Ticker’s content:
NOTE: You can also create dynamic Ticker content. Go to How to Connect a ShortPoint Ticker to a SharePoint List or Connection Type: RSS Feeds to learn how.
Step 3: Customize the Ticker’s Design
Begin the interactive tutorial to customize the Ticker’s design:
NOTE: Check out Ticker Features to learn more about the features you can customize.
Step 4: Insert and Save
Get started to learn how to insert and save the Ticker Design Element:
Below are the tabs you can use to customize the Ticker Design Element:
A. Design tab
The Design tab allows you to customize the design of the Ticker Design Element. It has the following options:
|Title||allows you to modify the main title of the Ticker|
|Style||allows you to customize the Ticker Style. You can choose from Border or Solid.|
|Size||allows you to change the size of your Tickers. You can choose from Normal, Medium, Large, or Huge.|
|Color||allows you to customize the color background of your Ticker.|
|Speed||allows you to control how fast the Ticker items transition from one to another. You can choose from Fast, Medium, or Slow.|
|Text Color||allows you to customize the text color of the items on your Ticker.|
|Transition ||allows you to modify how your Ticker moves. You can choose from Default or Slide-up.|
B. Items tab
The Items tab allows you to duplicate, delete, configure content, and add new items. It has the following options:
ITEMS ACTION ICONS
|Cogwheel||opens a new window that allows you to edit the content of each item. See the table below for the cogwheel icon settings.|
|Duplicate||duplicates the item selected.|
|Trash||deletes the item selected.|
|Add New||adds a new item.|
|Drag and Drop||allows you to re-arrange the position of the item.|
COGWHEEL ICON SETTINGS
|Title||add item title.|
|Link||add a link to redirect users who click on an item.|
|Linking Options||allows you to select how your link will open. Check out Linking Options to learn more about each option.|
C. Advanced tab
The Advanced tab contains more customizations to edit your Ticker Design Element. It has the following options:
|Title||allows you to customize the text color of the Ticker Title.|
|Items||allows you to customize the text color of the items in your Ticker.|
|Title background color||allows you to change the title background color.|
|Title hover color||allows you to apply a different color to the ticker's title when you hover over it.|
|Item background color||allows you to change the items' background color.|
|Item hover color||allows you to apply different colors to the tickers' items when you hover over them.|
D. Custom CSS Tab
NOTE: Checkout our support article on How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial) to learn more about Custom CSS.
NOTE: The Visibility and Connect tabs are currently not available in Live Mode.
That’s it! You now know how to customize the Ticker Design Element. Enjoy using this Design Element on your SharePoint pages.