Table Of Contents

Scroll Image widget

How to Use Scroll Image Widget

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 Scroll Image 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.

Content Tab

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.


scroll image 2 - BdThemes

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.

scroll image 3 - BdThemes

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.


scroll image 4 - BdThemes

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.

Style Tab

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.


scroll image 5 - BdThemes

Come to this section and set alignment with Background color and Text color, Border Type, Border Radius, Padding, Margin, and Typography.

Icon Style

Here, under the two modes Normal and Hover. You’ll be able to style the Icon. As following.


scroll image style 1 - BdThemes


scroll image style 2 - BdThemes


scroll image style 3 - BdThemes

In this section, you might add Text color, Background type, Color, and most importantly Image as background on the Scroll Image widget.

Video Assist

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]

Need any assistance? Call Us: +880 1700 55 95 95 | © Copyright 2022 All Rights Reserved by BdThemes
Be cool in Summer with up to 40% OFF on our products | Coupon: SUMMERSALE

Ready to buy our Products?

Don’t miss Powerful Elementor plugins; the Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit and over 2000+ ready templates for professional web design.

Changed your Mind?

Please Suggest us how to improve

Up to 40% OFF

Grab the best summer deal and enjoy awesome Elementor web design tools in your hands now! This is a limited-time offer so get it before time runs out.