How to Use 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 widget, it is just a matter of dragging and dropping. As you see in the screenshot above.


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.

Now, I’m going to show the sections of the Content Tab and how they work behind the widget.

Image

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 icon(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.

Also, you can go for the rest switcher buttons

Badge

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 badge. See the screenshot.


Style Tab

Now, let’s work with Style Tab. The tab will easily have you style the web content (text, image, video, etc.) of the page you require to design. 

Styling with the tab in Elementor will always give you a fantastic experience.

Let’s have a look.

Image

Simply, go to the Style tab > Image > and adjust the Transition Duration.

Caption

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.

Normal:

Hover:

Badge

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

Video Assist

At the end of this documentation, I hope you’ve noticed what is Panel Scroll Image widget 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.


About Selim Rana

Selim Rana is the Founder of BdThemes - the company behind Element Pack Pro! He is a Software Engineer passionate about WordPress and Elementor.


Enjoy Black Friday Exciting Deals Right Now. Grab The Deals Before The Time Ends!

Day
Hour
Min
Sec