News Ticker Widget in the Elementor

Key Features of the Elementor News Ticker Widget

• Customizable News Ticker Layout: Easily adjust the layout and appearance to suit your site’s design and branding.
• Dynamic Content Filtering: Filter displayed posts by categories, taxonomies, or custom criteria for precise content delivery.
• Adjustable Display Options: Control the number of posts, sorting order, and date visibility for tailored content.
• Advanced Styling Options: Personalize colors, typography, backgrounds, borders, and more for every component of the widget.
• Responsive Design: Ensures your news ticker looks great on all devices, providing a seamless user experience.

What’s Needed?

To use the Elementor News Ticker Widget, you need:

• Elementor Free Version: The basic version of Elementor.
• Vertex Addons for Elementor: This free plugin includes the News Ticker widget and several other widgets and extensions.

Install and Activate the Elementor News Ticker Widget

To activate the Elementor News Ticker Widget, follow the steps in our Widget Activation Guide.

How to Configure the Elementor News Ticker Widget in Elementor

After activating the widget, navigate to the Elementor editor. From there, locate the News Ticker Widget under Vertex Addons in the widgets panel and drag it onto your page. You’ll see options organized into three main tabs: Content, Style, and Advanced.

Content Tab

In the Content tab, you’ll configure what content the News Ticker displays and customize basic settings.

1. News Ticker:
   • Title: Enter a title for the ticker, like “Latest News” or “Trending.” This text will appear at the beginning of the ticker.
   • Categories: Select specific categories to pull posts from, focusing the content on certain topics.
   • Taxonomy: Choose taxonomies if you want to display posts based on custom criteria. This is especially useful if your site uses custom post types.
2. Settings:
   • Number of Posts: Control how many posts the ticker displays at once. Limiting the number can create a more concise, readable ticker.
   • Sort: Set the sorting order as Ascending or Descending to decide whether newer or older posts display first.
   • Show Date: Toggle this option to show or hide the date next to each post title, allowing users to see when the content was published.

How to Style the Elementor News Ticker Widget

The Style tab provides options to adjust the appearance of each component in the News Ticker Widget.

Box Styling

1. Height: Set the height of the ticker box, ensuring it fits within your layout.
2. Box Border Radius: Adjust the border radius to give the ticker a rounded edge effect.

Head Styling

1. Background Color: Choose a background color for the ticker’s head section, helping it stand out on the page.
2. Text Color: Set the text color for the title or heading.
3. Typography: Customize the font family, size, weight, and other typography settings for the title.
4. Padding: Adjust the padding around the title text to control spacing.
5. Title/Meta Width: Set the width of the title and meta fields to ensure they align correctly within the ticker.

Title Styling

1. Background Color: Choose a background color for the post titles.
2. Text Color: Set the color of the text to ensure readability and style consistency.
3. Typography: Adjust typography settings, such as font family, size, and style, for the post titles.

Date Styling

1. Background Color: Set a background color for the date display, helping it visually separate from the title.
2. Text Color: Choose a color for the date text to match the overall theme.
3. Typography: Customize the font style, size, and weight for the date to improve readability.

Navigation Styling

1. Background Color: Set a background color for the navigation arrows or controls.
2. Text Color: Adjust the color of the navigation arrows for visibility.
3. Border Radius: Set a border radius to round the corners of the navigation buttons for a polished look.

Advanced Tab

The Advanced tab offers additional options that are common across all Vertex Addons widgets. These settings allow you to further fine-tune the widget’s behavior and design to align with the rest of your website.

• Custom Margin and Padding: Control the space around and within the widget.
• Z-Index: Adjust the stacking order of the widget in relation to other elements.
• CSS Classes: Add custom CSS classes to the widget for unique styling.

Final Outcome

After configuring your Elementor News Ticker Widget and adjusting the style, you will have an eye-catching, dynamic ticker displaying the latest news or blog posts. This widget’s versatility and customization options make it perfect for keeping your audience informed and engaged with the latest updates.