What is the Image Marquee widget?
The Image Marquee widget is a dynamic and visually appealing tool for displaying images in a continuously scrolling loop. It allows you to transform a static gallery into an engaging, animated marquee, making it perfect for showcasing a list of logos, client images, or product visuals in a sleek and modern way. This widget is an excellent solution for adding motion and a professional touch to your website’s design.
Common use case
A common use case for the Image Marquee widget is to create a “Brands We Work With” or “Our Partners” section on a homepage. By using this widget, a business can display the logos of its partners in a continuous, non-intrusive scrolling banner. This immediately adds social proof and credibility without taking up valuable page real estate or requiring users to interact with a slider.
Additional use cases
- Showcasing client logos: Display logos of companies you have worked with.
- Highlighting sponsors: Create a scrolling banner of event or project sponsors.
- Featured products: Animate a selection of product images on a landing page.
- Team members: Display team photos in a fun, scrolling format on the “About Us” page.
Requirements
- You need the Marquee Addons Pro plugin installed and activated on your website.
- You can find detailed installation instructions in our dedicated installation blog post.
- 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 powerful Image Marquee widget to your Elementor-powered website, follow these simple steps:
- Navigate to the Elementor editor.
- Search for the Image Marquee widget.
- Drag the widget to your desired location on the page.
Video
See a video demonstrating the widget in action.
Settings for the Image Marquee widget
The Image Marquee widget offers extensive customization options categorized into three main tabs: Content, Style, and Advanced.
Content tab
Images:
- Images: Click the
+icon to select and add images from your media library. A tip suggests using a maximum of 20 images for best performance. - Link: Choose to link the images to a Custom URL, a Media File, or select None to disable linking.
- Caption: Set a caption for the images, if needed.
- Lazy Load: Toggle this option to enable or disable lazy loading for the images.
- Gap: Adjust the spacing between each image in the marquee.
Marquee Options:
- Show Vertical: Toggle this option to switch between horizontal and vertical scrolling.
- Reverse: Toggle to change the direction of the scrolling animation.
- Pause On Hover: Enable this to stop the animation when a user’s cursor hovers over the marquee.
- Speed: Control the speed of the animation.
- Show Edge Shadow: Toggle this to add a subtle shadow effect to the edges of the marquee.
Style tab
Image:
- Alignment: Set the horizontal and vertical alignment of the images.
- Width: Set a fixed width for the images.
- Height: Set a fixed height for the images.
- CSS Filters: Apply visual effects such as Blur, Brightness, Contrast, Saturation, and Hue to your images.
- Border Type: Add a border to the images.
- Border Radius: Adjust the corner radius of the images.
Advanced tab
The Advanced tab provides a comprehensive set of controls that are common to most Elementor widgets. 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. This widget also includes a specific Marquee Custom CSS section, allowing for even more granular control over its unique animation properties.
Frequently Asked Questions (FAQ)
Can I change the direction of the scrolling images?
Yes. In the Marquee Options section of the Content tab, you can use the Reverse control to change the scrolling direction.
How do I control the speed of the image marquee?
The scrolling speed can be adjusted in the Content tab. Within the Marquee Options, you will find a Speed control that allows you to set how fast or slow the images 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 Options section of the
