Table Of Contents

How to use the Horizontal Scroller Widget using Element Pack Pro

The Horizontal Scroller widget is a handy feature presented by BDthemes and it is a part of the Element Pack Pro. It helps you showcase your items horizontally by scrolling.

Now, let’s learn how to use the Horizontal Scroller widget on your site.

Insert the widget

1 2 - BdThemes

First, you have to insert the widget in the text area. To do this, type Horizontal Scroller in the search area. Then, just drag and drop it on the page.

2 2 - BdThemes

Notice that, in the Horizontal Scroller section under the Content tab, there is an option to insert multiple items and to add the ID and Title of them.

Create the Horizontal Scroller layout

The Horizontal Scroller widget takes effect upon present section layouts. So, you have to create your target sections first before using the widget.

3 1 - BdThemes

Now, we are going to create the layout of the Horizontal Scroller. To do this, go to the edit section of the 1st item, then go to the Advanced tab, type ‘Section-01’ in the CSS ID field, and copy it.

4 1 - BdThemes

After that, go to the Horizontal Scroller section, go to the Content tab. Now, in the 1st item section, paste the CSS ID in the Section ID field, then type ‘Item 1’ in the Title field.

5 - BdThemes

Now, add more items by clicking on the Add Item button. Do the same procedure for the next items, just change the numbers like this.

6 1 - BdThemes

Now, go to the Advanced Settings, enable the Auto Fill and Dots switcher.

7 1 - BdThemes

After enabling them, you can see that there are two new switchers automatically enabled showing the result on the page. Notice that, only the 1st item label is showing on the page.

8 1 - BdThemes

Now, if you want to show all the item labels, you just have to disable the Label Only Active switcher. See the result on the page. You can set the position from the Position option.

Customize the Horizontal Scroller with the Style tab

9 - BdThemes

It’s time to customize the Horizontal Scroller. Go to the Style tab, see that there are two modes i.e.: Normal and Active in the Dots section. For the Normal mode, make the background color transparent from the Color option.

10 1 - BdThemes

After that, you can set a Border, change the Border color. Then, you can change the Label color.

11 1 - BdThemes

For the Active mode, you can change the Dots color, then add a border, change the border color, and change the label color as well.

12 1 - BdThemes

You can set the Dots position using the Offset scrollbar. For this, just go to the Normal mode option, then use the Offset scrollbar. Almost done. You just have to do a little to finish it up.

13 1 - BdThemes

You can control the scroller yourself. For this, go to the Content tab, disable the Autofill switcher in the Additional Settings. Don’t forget to update all the changes.

All done! You have successfully designed the Horizontal Scroller widget on your site.

Video Assist

You can watch this video on our Horizontal Scroller widget to get a hands-down experience on the widget. You can also visit the demo page for more examples. Hope you can use it on your own.

Need any assistance? Call Us: +880 1700 55 95 95 | © Copyright 2022 All Rights Reserved by BdThemes
AUTUMN Sales up to 60% Discount on our products | Coupon: AUTUMN

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 60% OFF

Purchase all our add-ons and make your website better than ever with our web designing products. Make your purchase with our limited-time AUTUMN offer in 60% off.