How to Use the Post Marquee Widget in Elementor?

What is the Post Marquee widget?

The Post Marquee widget is a dynamic tool for displaying your blog posts or other custom post types in a continuous, scrolling banner. This is a highly effective way to showcase recent articles, featured content, or a curated list of posts, immediately capturing visitor attention and increasing engagement on your website.

Common use case

A common use case for the Post Marquee widget is to create a news ticker-style display on a blog’s homepage or at the top of an archive page. This allows you to highlight your latest or most important posts in a compact, eye-catching format that encourages users to click and read more.

Additional use cases

• Displaying a list of posts from a specific category on a relevant landing page.
• Creating a “Featured Author” section that scrolls through their most recent articles.
• Highlighting trending or most-read posts in a subtle sidebar marquee.

Requirements

• Have Elementor Pro installed and activated.
• Have the WooCommerce plugin installed and activated.
• Make sure you have products added to your WooCommerce store.
• You need the Marquee Addons Pro plugin installed and activated on your website.
• You can find detailed installation instructions in our dedicated installation guide.
• Make sure that this addon is enabled so you can find it in the Elementor editor.
• Marquee Addons works only with the Elementor Page Builder plugin, so you will need to have it installed and activated as well.

Add the widget

To add the Post Marquee widget to your page:

1. Navigate to the page where you want to add the widget.
2. In the Elementor editor, search for “Post Marquee” in the widget panel.
3. Drag and drop the widget onto your page.
4. The widget will automatically populate with a scrolling display of your posts.

Video

See a video demonstrating the widget in action.

Settings for the Post Marquee widget

Content tab

Layout: Choose how your cards display in Elementor—Carousel or Marquee—and fine-tune spacing, speed, and direction. For the full walkthrough, read How to Use Marquee & Carousel Layout Controls in Elementor using Marquee Addons Pro.

Contents

1. Posts Per Marquee: Set the number of posts to display at a time.
2. Card Width: Adjust the width of each post card.
3. Image Position: Choose the position of the featured image within the card.
4. Image Resolution: Set the resolution of the featured image.
5. Image Ratio: Set the aspect ratio of the featured image.
6. Image Width: Control the width of the featured image.
7. Lazy Load: Enable this to load images only when they enter the viewport, improving page performance.
8. Title Length: Set a character limit for the post title.
9. Title HTML Tag: Choose the HTML tag for the title (e.g., H1, H2, H3).
10. Excerpt: Show or hide the post excerpt.
11. Excerpt Length: Set a character limit for the post excerpt.
12. Meta Data: Select which metadata to display (e.g., Date, Comments).
13. Separator Between: Customize the separator between meta data items.
14. Read More: Show or hide the “Read More” button.
15. Read More Text: Customize the text for the “Read More” button.
16. Open in new window: Enable this to open post links in a new browser tab.

Query

1. Post Type: Select the design layout style for each post displayed in the marquee.
2. Include/Exclude: Filter posts by categories, tags, authors, or other taxonomies.
3. Date: Filter posts by a specific date range.
4. Order By: Choose the order of posts, such as “Date,” “Title,” or “ID.”
5. Order: Set the order to ascending (ASC) or descending (DESC).
6. Query ID: Give your query a custom unique ID to allow for server-side filtering.

Marquee Options

1. Marquee: Toggle the marquee scrolling effect on or off.
2. Show Vertical: Enable this for vertical scrolling instead of horizontal.
3. Reverse: Reverse the direction of the scroll.
4. Pause on Hover: Pause the marquee when the user hovers over it.
5. Drag to Scroll: Allow users to manually drag the marquee to scroll.
6. Speed: Adjust the scrolling speed of the marquee.
7. Show Edge Shadow: Add a subtle shadow effect to the edges of the marquee.
8. Marquee on Scroll: A toggle to enable or disable the marquee animation on scroll.
9. On Hover: Select a hover effect to apply when users interact with a post or card

Style tab

Box

1. Alignment: Set the horizontal alignment for the entire widget content.
2. Border Width: Set the width of the border around the post box.
3. Border Radius: Adjust the corner radius of the post box.
4. Padding: Set the padding inside the post box.
5. Content Padding: Set padding specifically for the content area.
6. ( Normal/Hover)
   • Box Shadow: Apply a box shadow effect to the box for depth.
   • Background Color: Set the background color for the post box.
   • Border Color: Set the color of the border.

Image

1. Border Radius: Add rounded corners to the image.
2. Spacing: Add space between post image and heading.
3. Normal/Hover
   • CSS Filters: Apply visual effects like blur, brightness, or saturation to the images.

Content

1. Title
   • Color: Set the text color for the title.
   • Typography: Customize the typography for the title.
   • Text Stroke: Add a stroke effect to the title text.
   • Spacing: Set the spacing below the title.
2. Meta
   • Color: Set the text color for the metadata.
   • Separator Color: Set the color of the separator between meta data items.
   • Typography: Customize the typography for the metadata.
   • Spacing: Adjust the spacing below the metadata.
3. Excerpt
   • Color: Set the text color for the excerpt.
   • Typography: Customize the typography for the excerpt.
   • Spacing: Adjust the spacing below the excerpt.
4. Read More
   • Color: Set the text color for the “Read More” link.
   • Typography: Customize the typography for the “Read More” link.
   • Spacing: Adjust the spacing below the “Read More” link.

Advanced tab

The Advanced tab provides a comprehensive set of controls that are common to most Elementor widgets, allowing for refined design and responsiveness. Here you can adjust the widget’s Layout (e.g., positioning, Z-index), apply engaging Motion Effects (like scrolling effects or entrance animations), customize its Background, add Borders and Box Shadows, apply Masks for unique shapes, control Responsive visibility across devices, add custom HTML Attributes, and inject Custom CSS for bespoke styling. 

Frequently Asked Questions (FAQ)

Can I change the direction of the scrolling posts?

Yes. In the Marquee Settings section of the Content tab, you can use the Reverse control to change the scrolling direction.

---

How do I control the speed of the post marquee?

The scrolling speed can be adjusted in the Content tab. Within the Marquee Settings, you will find a Speed control that allows you to set how fast or slow the posts move across the screen.

---

Is it possible to stop the marquee animation when a user hovers over it?

Yes, simply enable the Pause on Hover option in the Marquee Settings section of the Content tab.