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:
- Premium Addons for Elementor installed and activated. Image Scroll is part of the free plugin, so a PRO license is not needed for this widget.
- The widget enabled in the Premium Addons dashboard, otherwise it will not appear 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
The Image Settings section holds the image and the frame it moves inside.
- Image: the image that scrolls. Dynamic tags are supported, so the image can come from a custom field.
- Image Resolution: which registered thumbnail size WordPress loads. Full by default. Drop it to a smaller size if your source file is much larger than the frame.
- Image Height: the height of the visible frame in px, em or vh. 300px by default, and it takes separate values per device.
- Link: makes the whole image clickable. Turning it on adds Link/URL, where you pick URL to type a custom address or Existing Page to search your published posts and pages by title.
Mask Image Shape
Mask Image Shape crops the image to a shape you supply instead of the default rectangle.
- Mask Image: the shape, uploaded as a PNG. The image shows through the opaque parts of the PNG and is hidden everywhere the PNG is transparent.
- Mask Size: Contain fits the whole shape inside the frame. Cover scales the shape until it fills the frame, which crops it if the ratios differ.
- Mask Position: where the shape sits. Cover gives you nine positions. Contain gives you Center Center, Top Center and Bottom Center, because the shape already spans the frame in one axis.
- Image Shadow: opens a popover with Color, Horizontal, Vertical and Blur. The shadow follows the outline of the mask, not the rectangle around it.
Label
The Label section adds a line of text to the widget, and it arrived in Premium Addons 4.11.98. If your panel has no Label section, update the plugin.
- Enable Label: switches the label on.
- Text: what the label says. Dynamic tags are supported. An empty value renders nothing, even with the switcher on.
- Position: Above Image, Below Image, or Over Image. Over Image is the default and puts the label on top of the image itself.
- Horizontal Alignment: pushes the label Left, Center or Right, per device.
- Vertical Alignment: Top, Middle or Bottom, per device. It only applies when Position is Over Image, since the other two positions sit outside the frame.
- Offset X and Offset Y: nudge the label away from where the alignment put it, in px, % or em, per device. Both are limited to Over Image.
Colors, typography and spacing for the label live in the Style tab, covered further down.
Image Scroll Advanced Settings
Advanced Settings controls the movement itself.
- Direction: Vertical or Horizontal.
- Image Fit: Fill stretches the image to the frame, Cover keeps its ratio and crops the overflow. Horizontal direction only.
- Trigger: Hover moves the image while the pointer is over it. Mouse Scroll ties the movement to the page scroll position, so the image travels as the visitor scrolls past it.
- Reverse Direction: flips which end the image starts from. Available with the Hover trigger.
- Speed: how many seconds one full travel takes. 3 by default. Also Hover only, because the scroll trigger takes its pace from the visitor.
- Icon: shows a small icon over the image to hint that it moves. Icon Size sets its size in px or em, 30px by default.
- Overlay: dims the image until the visitor hovers it. The color comes from the Style tab.
Check the demo page to see the icon and the overlay on a live layout.
Styling Image Scroll Widget
Image
- Icon Color: fill color of the scroll hint icon. Appears when Icon is on.
- Overlay Color: color of the overlay. Appears when Overlay is on.
- Opacity: image opacity, with separate Normal and Hover values.
- CSS Filters: blur, brightness, contrast, saturation and hue, again per state.
- Blend Mode: how the image blends with what sits behind it. Ten modes, including Multiply, Screen, Overlay and Luminosity.
Container
The container is the frame around the image. Every option here has a Normal and a Hover value.
- Border: border type, width and color. Set the type to None for no border.
- Border Radius: one radius value applied to all four corners.
- Advanced Border Radius: takes a full CSS radius string, for shapes a single value cannot produce. Switching it on replaces Border Radius. Get the radius value from here.
- Box Shadow: shadow on the container.
Label
This section only appears once Enable Label is switched on.
- Color: text color of the label.
- Typography: font family, size, weight, line height and letter spacing.
- Background: classic or gradient background behind the label text.
- Border: border type, width and color.
- Border Radius: per corner, per device.
- Padding: space between the text and the label background, per device.
- Margin: space between the label and the image, per device.
Come & Join the Community
Feel free to join our Facebook group and subscribe to our YouTube channel to keep up with our newest features, improvements, and helpful video tutorials.
