How to use the Horizontal Scroller Widget using Element Pack Pro

  • BdThemes
  • How to use the Horizontal Scroller Widget using Element Pack Pro

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.

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 14-days money-back guarantee.
BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins. This website is powered by Element Pack Pro and Rooten Theme.
Need any further assistance? Call Us:+880 1700 55 95 95
Our supported payment system and security badge