The Image Scroll Widget allows you to display tall images that can be scrolled either by hovering over them or through manual scrolling. This is ideal for showcasing images with significant height on your website.
Activate the widget
This widget is part of the aThemes Addons for Elementor plugin. To activate it, go to your admin area, visit the aThemes Addons dashboard, search for the widget, and click on the switch to activate it. It will now be available in your Elementor interface.
Widget options
Image section
- Image: Choose the image to display.
- Image Size: Set the size of the image.
- Height: Adjust the height of the container for the scrolling image.
- Link: Add a link to the image, so it redirects to a URL when clicked.
Overlay section
- Show Overlay: Toggle to show or hide an overlay on the image.
- Overlay Element: Choose to display text or an icon on the overlay.
- Overlay Text: Enter the text to be displayed on the overlay, if text is selected as the overlay element.
Settings section
- Direction: Select the scroll direction (Left to Right, Right to Left, Top to Bottom, Bottom to Top).
- Trigger Type: Choose between “Hover” or “Mouse scroll” to trigger the image scroll.
- Speed: Set the speed of the scroll animation when “Hover” is selected as the trigger type.
Style tab
Customize the appearance of your image scroll under this tab. You can adjust various styling options to ensure the widget matches your website’s design and branding perfectly.
Wrapper Style
- Border Radius: Set the border radius for the image container.
- Border: Customize the border style, width, and color for both normal and hover states.
- Box Shadow: Apply box shadow to the image container for normal and hover states.
Overlay Style
- Overlay Color: Set the color for the overlay.
- Text Color: Choose the color of the overlay text.
- Icon Color: Select the color for the overlay icon.
- Text Size: Adjust the size of the overlay text.
- Icon Size: Set the size of the overlay icon.
These style options ensure that your image scroll looks professional and integrates seamlessly with your site’s overall design.
Usage tips
- Use high-quality, vertically oriented images for the best effect.
- Experiment with different scroll directions and trigger types to create an engaging user experience.
- Utilize the overlay feature to add additional context or call-to-action elements to your images.
Conclusion
The Image Scroll Widget is a powerful tool for displaying tall images in a visually appealing way. With extensive customization options, you can tailor the appearance and functionality to match your website’s design and provide an engaging user experience.