Image Scroll Widget Tutorial

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
Elementor Image Scroll Widget Image Settings
Elementor Image Scroll Widget Image Settings

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.
Elementor Image Scroll Widget Mask Settings
Elementor Image Scroll Widget Mask Settings

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.

Elementor Image Scroll Widget Advanced Settings
Elementor Image Scroll Widget Advanced Settings

Scrolling speed value control is here too! Here you can add the speed value that suits you.

Elementor Image Scroll Widget Trigger Settings
Elementor Image Scroll Widget Trigger Settings

Grab user attention by enabling/switching on the “Icon” option. Please check the demo page to be able to see how it actually looks.

Elementor Image Scroll Widget Scroll Icon
Elementor Image Scroll Widget Scroll Icon

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.
Elementor Image Scroll Widget Scroll Image Style
Elementor Image Scroll Widget Scroll Image Style

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.
Elementor Image Scroll Widget Scroll Image Style Options
Elementor Image Scroll Widget Scroll Image Style Options

Related Docs:

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 20+ Elementor Widgets Totally Free of charge.