How to Use Image Scroll Widget
Elementor Image Scroll Widget has been developed and created for Elementor Page Builder. Now, you are about to give your images brand new interactivity.
By using Image Scroll Widget for Elementor Page Builder, you will be able to display part of your image and make the rest appear using vertical or horizontal scroll. In addition, you will have the ability to choose whether if you want the scroll moves with mouse hover or with mouse scroll.
Requirements:
- You will need Premium Addons PRO plugin installed and activated on your website.
- Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
- Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.
Image Scroll Widget Settings
Here, you will be find some useful controls like:
- Image Upload
- Image Size
- Image Height with Responsive Controls
- Enable/Disable Image’s Link
Give your images a new shape using the NEW Mask Image Shape option.
- Mask Image Shape: activate/deactivate the mask image shape option.
- Mask Image: Upload the image, needs to be in PNG format.
- Mask Size: Contain or Cover the current image.
- Mask Position: Select the mask position on the image.
- Mask Shadow: Add a shadow to the mask shape.
Image Scroll Advanced Settings
When you land to the Advanced Settings, you will be able to choose the scrolling direction whether if you want it “Vertical” or “Horizontal”. In addition, you will have the ability to reverse the scrolling direction in both vertical and horizontal scroll by switching on the “Reverse Direction” option, but please be noted that this option works only when you select “Hover” as a trigger choice. For “Horizontal”, you have also the size of image fill or cover.
Scrolling speed value control is here too! Here you can add the speed value that suits you.
Grab user attention by enabling/switching on the “Icon” option. Please check the demo page to be able to see how it actually looks.
Last but not least, you can add an overlay color to your images as it will appear only on the normal/non-hover mode until you hover on it by mouse.
Styling Image Scroll Widget
We have included unique customization options for both image and container such as:
Image
- Icon Color.
- Overlay Color.
- Normal and Hover CSS Filter Controls.
- Opacity.
Container
This part contains customization options for the container itself in both normal and hover mode such as:
- Border Type
- None “If you don’t want to add a border to your image”
- Solid
- Double
- Dotted
- Dashed
- Groove
- Border Radius
- Box Shadow
- Advanced Border Radius: Apply custom radius values for Elementor Image Scroll widget container. Get the radius value from here.
- Border Radius: Insert border radius values.
