1. Home
  2. Docs
  3. Post Elements
  4. Content Ticker

Content Ticker EA Element

Content Ticker EA widget helps you to design a beautiful ticker and gives you the freedom to display ‘Dynamic’ or ‘Custom’ contents as your headlines. Besides, this element also gives you the flexibility to add nice transition effects & add personalized styling to all the features. Here in this tutorial, you’re going to learn how to use the Content Ticker element into Elementor Page Builder. So let’s get straight into it:


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Content Ticker Element

 

 

»Content

 

Ticker Settings

⇒Ticker Type: You can use the dropdown menu to choose a ‘Ticker Type’. Select either ‘Dynamic’ or ‘Custom’ Ticker type. You will be able to configure the ‘Ticker’ based on your chosen type.

⇒Tag Text: Change the headline of your Content Ticker by modifying the ‘Tag Text’ field.

 

Dynamic Content Settings

If you select the Ticker Type as Dynamic, then customize the following items:

⇒Source: You can select any of these 2 as your source: Post or Page.

→Other Options: After selecting the source, you have the flexibility to show only certain posts based on the tags, authors & categories. If you want, you can even exclude certain posts or pages as well. Besides, you can set the number of contents that you want to display on your Content Ticker as well. You can also sort out the contents as well by modifying ‘Order’ & ‘Order By’ options.

 

Custom Content Settings

If you select the Ticker Type as Custom, then customize the following items:

⇒Adding the Custom Contents: With Custom Content, you can easily insert your own contents and insert a link to them if you wish to. When you move the mouse over the content, you will be able to view the link. Simply click on the ‘+ Add Item’ button to insert more custom contents.

Animation Settings

⇒Effect: Select a transition effect.

⇒Visible Items: Add the number of visible items on the content ticker.

⇒Items Gap: Customize the gap between the items manually for different dimensions.

⇒Slider Speed: Set the slider speed, duration of transition between slides (in ms)

⇒Autoplay: Enable/disable the autoplay of slider.

⇒Autoplay Speed: Set the autoplay speed.

⇒infinite Loop: Enable/disable the infinite loop of the slider.

⇒Grab Cursor: Show/hide grab cursor when you hover over the slider

⇒Navigation:

→Arrows: Enable/disable the navigation arrows.

→Direction: Customize the navigation direction either left or right.

Unable To Use or Found Bugs?

⇒Need Support: Are you in need of a feature that’s not available in our plugin or got some bugs? Feel free to do a Support request.


»Style

 

Ticker Content

⇒Background Color: Add a custom ticker content background color and customize the opacity.

⇒Text Color: Add a custom ticker content text color and customize the opacity.

⇒Text Hover Color: Add a custom ticker content text color for both normal and hover view.

⇒Typography: Set the typography options for the ticker content.

⇒Padding: Set the padding value for the top, right, bottom and left around the ticker content for different dimensions. You can link the values together or customize them individually.

 

Tag Style

⇒Background Color: Add a custom background color to the tag and customize the opacity.

⇒Color: Add a custom color and customize the opacity.

⇒Typography: Set the typography options for the ticker tag.

⇒Padding: Set the padding value for the top, right, bottom and left around the tag for different dimensions. You can link the values together or customize them individually.

⇒Margin: Set the margin value for the top, right, bottom and left around the tag for different dimensions. You can link the values together or customize them individually.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the tag for different dimensions.

 

Arrow

⇒Choose Prev Arrow: Choose the previous arrow either from the font awesome icon library or upload an SVG image.

⇒Choose Next Arrow: Choose the next arrow either from the font awesome icon library or upload an SVG image.

⇒Arrow Size: Customize both arrow size manually for different dimensions.

⇒Align Left Arrow: Customize the left arrow alignments.

⇒Align Right Arrow: Customize the right arrow alignments.

⇒Background Color: Add a custom background color to the arrow icons and customize the opacity for both normal and hover view.

⇒Color: Add a custom color to the arrow icons and customize the opacity for both normal and hover view.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the arrow for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the arrow border.

⇒Border Radius: Increasing the border-radius will add circular corners to the container around the arrow. You can adjust the border-radius in pixels, % or em.

⇒Padding: Set the padding value for the top, right, bottom and left around the arrow for different dimensions. You can link the values together or customize them individually.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of Content Ticker Element.


Was this article helpful to you? Yes No

How can we help?