How can we help you today?

How to Customize the Ticker Design Element

This article will walk you through the process of customizing the Ticker Design Element and its basic features.


Ticker Design Element



Prerequisite

  • You have the latest version of ShortPoint SPFx installed on your SharePoint environment.
  • You are a ShortPoint Designer with an active license.

Step-by-step Tutorial


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:



Ticker Features

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:


Design tab



Title

Titleallows you to modify the main title of the Ticker

Style


Style
allows you to customize the Ticker Style. You can choose from Border or Solid.

Size


Size
allows you to change the size of your Tickers. You can choose from Normal, Medium, Large, or Huge.
ColorColor
allows you to customize the color background of your Ticker.
SpeedSpeed
allows you to control how fast the Ticker items transition from one to another. You can choose from Fast, Medium, or Slow.
Text ColorText Color
allows you to customize the text color of the items on your Ticker.
TransitionTransition 
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 tab


ITEMS ACTION ICONS

Cogwheel iconCogwheelopens a new window that allows you to edit the content of each item. See the table below for the cogwheel icon settings.
Duplicate iconDuplicate
duplicates the item selected.
TrashTrashdeletes the item selected.
Add NewAdd New
adds a new item.
Drag and DropDrag and Drop
allows you to re-arrange the position of the item.


COGWHEEL ICON SETTINGS

TitleTitleadd item title.
LinkLinkadd a link to redirect users who click on an item.
Linking optionsLinking 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: 


Advanced tab


TEXT COLOR

TitleTitle allows you to customize the text color of the Ticker Title.
ItemsItems
allows you to customize the text color of the items in your Ticker.


BACKGROUND COLOR

Title background colorTitle background colorallows you to change the title background color.
Title hover colorTitle hover colorallows you to apply a different color to the ticker's title when you hover over it.
Item background colorItem background color allows you to change the items' background color.
Item hover colorItem hover color
allows you to apply different colors to the tickers' items when you hover over them.



D. Custom CSS Tab


This tab allows you to use your own CSS, HTML, and Javascript code to customize the Ticker Design Element. 


NOTE: Checkout our support article on How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial) to learn more about Custom CSS.

Custom CSS tab


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.


Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 60 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more