ElementsKit’s Content Ticker widget for Elementor lets you display recent posts, latest news, and more in a stylish way. The widget gives you the option to show either the website posts or custom content on the ticker.

Read this documentation to learn how to use the Elementor Content Ticker widget of ElementsKit.

Step 1: Get Content Ticker in Elementor #

To get the content ticker on your WordPress website, first, enable the ElementsKit Content Ticker widget, then open the Elementor editor and drag & drop the widget to the design area.

Enable Content Ticker widget #

To enable the Content Ticker widget:

1. Navigate to ElementsKit > Widgets.
2. Find the Content Ticker from the list and enable the widget.
3. Click on the SAVE CHANGES.

Drag and Drop the widget #

After that, drag and drop the ElementsKit Content Ticker widget into the Elementor editor.

Step 2: Configure the content ticker in Elementor #

Now you can configure the ticker title, content, and ticker settings of the widget.

Ticket Title #

1. Show Title: First, enable the ticker title. Then you’ll have other options available to customize the title.
2. Title Style: Choose a style for the ticker title from the given options.

3. Title Text: Enter a text for the title.
4. Enable Pointer: You can show a pointer along with the ticker title.
5. Icon: Or, you can show an icon alongside the title.

[Note: Pointer and Icon are alternative options. When you enable the pointer, the icon won’t be available, and vice versa.]

6. Position: Set the position of the pointer/icon. You can set the position to “Before” or “After” the pointer/icon.
7. Enable Separator: You can also show a separator with the ticker title.

Ticker Content / Query #

In this section, you get to Select Content type.

• Content-Type: Post

To show your website posts on the ticker.

1. Content Select: Set to “Post”.
2. Content Count: Set the number of posts to show.
3. Title Trim: Limit the text character number for the post title displayed in the ticker.
4. Description Trim: Limit the text character number for the post description displayed in the ticker. (description can be enabled from Settings).
5. Select Content by: You can choose to show the post in the following ways:
   • Recent Post: Show the recent posts on your website.
   • Selected Post: Show the selected post. You can select the posts in the “Search & Select” field.
   • Category Post: Show posts by category. Add categories in the “Select Categories” field.
6. Order: Set the order of the content to descending order (DESC) or ascending order (ASC).

• Content-Type: Custom

To show custom content on the ticker.

1. Content Select: Set to “Custom”.
2. ADD ITEM: You can add content items.

3. Content Title: Enter the content title for the ticker.
4. Content Description: Add a description for the ticker content.
5. Choose Image: Add an image to show on the ticker content.
6. Link: Enter a URL to link any web page to the content.

Settings #

You can configure the ticker settings in this section.

1. Show Image: Decide whether you want to show the feature image of the content on the ticker.
2. Image Size: You can change the image size on the ticker content.
3. Enable Shadow: You can enable the shadow that appears on the left and right end of the ticker content.
4. Show Description: You can show the description of the content in the ticker.

5. Effect: Choose the animation effect style from the following options: Default, Fade, Marquee, and Typing.

When you select the Marquee effect, we recommend you increase the Animation Speed for better visibility.

6. Direction: Set the direction to i. Horizontal scrolling or ii. Vertical scrolling.

[Note: Direction is Not Available for Marquee effect]

7. Animation Speed: You can change and adjust the speed of the animation effect.

[Note: Animation Speed is Not Available for Typing effect]

8. Autoplay: You can enable the autoplay for content ticker. 

If enabled, set the Dealy time (interval between to change the content).

[Note: Autoplay is Not Available for Marquee effect]

9. Reverse Direction: If you enable this option, the ticker will scroll in the Left To Right direction. Otherwise, the ticker direction is Right To Left.

10. Grab Cursor: Users can slide the ticker content by grabbing them with their mouse cursor.

[Note: Grab Cursor is Not Available for Marquee effect]

11. Show Arrow: Enable the arrow to navigate the ticker content manually. If you show the arrows, choose a Left Arrow Icon and a Right Arrow Icon.

Step 3: Customize the content ticker style #

You can customize the Elementor content ticker under the style tab.

Wrapper #

1. Direction: Choose the position of the ticker title and arrows.
   1. Normal: Ticker title is on the left and arrow on the right.
   2. Reverse: Ticker title is on the right and arrow on the left.

2. Wrapper Padding: You can adjust the top and bottom padding for the entire content ticker section.

Ticker Title #

1. Width: Adjust the Width of the ticker title section.
2. Alignment: Select the Alignment of the icon and text in the ticker title.
3. Pointer Options/ Icon Option: You can change the Size, Space between the title and pointer/icon, and the color of the pointer/icon.

4. Typography: Choose the Typography for the title text.
5. Padding: Adjust the Padding of the ticker title.
6. Border Radius: Adjust the Border Radius of the ticker title.
7. Text Color: Choose the Text Color.
8. Background: Choose the ticker title Background.
9. Icon: Choose an Icon of the ticker title.

[Note: You can choose separate Text colors, Background colors, and Icon colors for Normal and Hover states.]

10.  Separator Option: If you enable the separator for the ticker title, you can change its style like Width, Height, and Color.

Ticker Content #

1. Alignment: Select the Alignment of the ticker content.
2. Margin: Adjust the right and left margins of the ticker content.
3. Padding: Adjust the padding of the content.
4. Title Color: Choose a Title Color for the ticker content.
5. Title Hover Color: Select a color to appear when the content title has hovered.
6. Title Typography: Set the Typography of the content title text.
7. Description Color: You change the color of the content description.
8. Description Typography: Set the typography of the description text.

Image #

If you enable the “Show Image” option in the Settings section, then the image will appear with content.

1. Adjust the Width and Height of the image.
2. Select a Border Type for the image.
3. Adjust the Border Radius.
4. Set the Margin for the content image.

Arrow #

If you enable the “Show Arrows” feature, arrows will appear on the ticker.

1. Arrow Position: Set the arrow position to the left or right of the ticker.
2. Width: Adjust the Width of the arrows.
3. Height: Adjust the Height of the arrows.
4. Space Between: Adjust the space between the two arrows.
5. Icon Color: You can choose the arrow icon color.
6. Background Color: Choose an arrow background color.
7. Border Type: Select a border type. Also can select the width and color of the border.
8. Border Radius: Adjust the Border Radius for the arrows.

Like the Content Ticker widget, ElementsKit comes with hundreds of advanced elements for Elementor. Get ElementsKit and use those elements to build WordPress websites with full of features.