Want to add eye-catching scrolling image effects to your website? The Image Scroll widget in aThemes Addons for Elementor lets you display images with smooth scroll animations, complete with overlay options and multiple direction controls.
In this guide, we’ll walk you through how to use the Image Scroll widget in aThemes Addons for Elementor.
Before you get started, make sure you’ve installed and activated the aThemes Addons plugin on your WordPress site along with Elementor. For premium widgets, ensure aThemes Addons Pro is also installed and active.
Activating the Widget
Go to your WordPress admin dashboard and navigate to the aThemes Addons dashboard. Search for the Image Scroll widget and toggle it on to activate it.
Exploring Widget Options
Configuring the Image Section
The Image section includes the following options:
- Image – Choose the image you want to display with the scroll effect.
- Image Size – Select the size of the image.
- Height – Set the container height for the scrolling image.
- Link – Add a redirect URL so visitors navigate to a specific page when clicking the image.
Configuring the Overlay Section
The Overlay section includes the following options:
- Show Overlay – Toggle the overlay on or off.
- Overlay Element – Choose between displaying text or an icon as the overlay element.
- Overlay Text – Enter the text to display on the overlay.
Configuring the Settings Section
The Settings section includes the following options:
- Direction – Set the scroll direction: Left to Right, Right to Left, Top to Bottom, or Bottom to Top.
- Trigger Type – Choose between Hover or Mouse Scroll to control how the scroll animation starts.
- Speed – Adjust the scroll animation speed when using the Hover trigger type.
Customizing the Style Tab
The Style tab lets you customize the appearance of the Image Scroll widget.
Styling the Wrapper
The Wrapper style section includes the following options:
- Border Radius – Round the corners of the image container.
- Border – Set the border style, width, and color for normal and hover states.
- Box Shadow – Add a box shadow effect for normal and hover states.
Styling the Overlay
The Overlay style section includes the following options:
- Overlay Color – Set the background color of the overlay.
- Text Color – Choose the color for the overlay text.
- Icon Color – Choose the color for the overlay icon.
- Text Size – Adjust the size of the overlay text.
- Icon Size – Adjust the size of the overlay icon.
Following Usage Tips
- Use high-quality vertically oriented images for the best scrolling effect.
- Experiment with different scroll directions and trigger types to find the best fit for your design.
- Use the overlay to add context or a call-to-action over the image.
- Optimize your images for web performance to keep page load times fast.
That’s it! You’ve successfully learned how to use the Image Scroll widget in aThemes Addons for Elementor to create engaging scrolling image effects on your site.
Next, would you like to display client or partner logos in a rotating carousel? Check out our guide on using the Logo Carousel widget to learn more.
