When you want an image to scroll, the Scroll Image widget will come up with some rich features. But, something can be newer and harder. You should read the documentation below to have a good start.
So, let’s dive into the documentation.
To Insert Widget
Inserting the widget is just a matter of dragging and dropping. As you see in the screenshot above, drag the Elementor Scroll Image widget inside your page.
Using the content tab, you’ll be able to make a layout of a particular part of a website. And in this regard, some handy sections in the tab will assist you a lot in designing the Scroll Image widget.
Now, I’m going to show the sections of the Content Tab and how they work behind the widget.
To begin with, come to the Image section > subsection, Choose Image > and choose an image from the Image library.
Second thing is to adjust Image Size, Width, and Min Height with the option of adding Caption and Link.
In addition, you can add icons (Link, Plus, Zoom) to the link as well as you will be able to set Link Icon Position.
Select Image Scroll, this option will let you determine the image scroll position(Bottom Top, Top-Bottom, Left Right, Right Left).
Look at the switcher buttons i.e. Image Framing, Link Icon On Hover, and Badge.
Especially, if you enable the Image Framing switcher button, you’ll be able to use a few frames such as Desktop, Safari, Chrome, etc. for the image scrolling.
Go to the Content tab > Image > activate Badge switcher button > then, go to the Badge section.
After enabling the Badge Switcher button, you will find a section named Badge which will allow you to manage the badge for the pictures of scrolls. See the screenshot.
Now, let’s work with the Style Tab. The tab will easily have you style the web content (text, image, video, etc.) of the page you require to design with the Scroll Image widget.
Styling with the tab in Elementor will always give you a fantastic experience.
Let’s have a look.
Simply, go to the Style tab > Image > and adjust the Transition Duration.
Come to this section and set alignment with Background color and Text color, Border Type, Border Radius, Padding, Margin, and Typography.
Here, under the two modes Normal and Hover. You’ll be able to style the Icon. As following.
In this section, you might add Text color, Background type, Color, and most importantly Image as background on the Scroll Image widget.
At the end of this documentation, I hope you’ve noticed what is Panel Scroll Image widget is and how it works for you. Watch the video inserted above. If you want to discover what more is possible to do using this one, you can visit the demo page.
[Note- on-site video link]