How to Use Panel Slider Widget

How to Use Panel Slider Widget

The panel is a flat section in the shape of a rectangle that is part of something larger. Exactly, our Panel Slider Widget by Element Pack does the same thing. If you face any kind of issue while using this widget, the documentation below will help you get started.

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.

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


Go to the Content tab > Layout > check all the controls.

Come to the Layout section. Here you will find the Skin control (Middle) with the default one.

Look at the controls (Columns and Columns Space). These two will respectively allow you to determine column number and adjust space.

A few switcher buttons will be there to control slider functions such as Show Title, Global Link, and Show Button.

In addition, you might set Slider Height and select Navigation and Alignment.

Another important thing is Slide Skew that will allow you to do skew the whole thing.


After dragging and dropping the widget in a new section, you will get a list group. The list not limited, you can add a new list in the group just clicking on the ADD ITEM button.

In terms of getting the content with the same design, you can duplicate the item clicking on the duplicate icon and to delete clicking on the delete icon.

Go to the Content tab > Sliders > Slider Items.

Mostly, editing every single list item(repeater) and by hitting on the List Item you can add Title, Image, and Description text along with Link.


Just, go to the Content tab > Button > Text > Icon (Icon Library and Upload SVG)

This section will let you set the text to the Button and Icon. When you will choose any icon, you’ll get two more options that are Icon Position (After/Before) and Icon Spacing.

Slider Settings

You know Panel Slider widget is animation supported. Form this section, you will be able to manipulate five more switcher buttons like (Autoplay, Pause on Hover, Loop, Autoplay Speed, Infinite Loop, Animation Speed, Observer, and Centered Slide).

The most important things in this section are the Animation Speed(it will control slide speed) and Loop(make the slider repeated).

On the other hand, Infinite Loop will make the slider repeatable ever. Observe the photo above.

Style Tab

It is time to work with the Style Tab. The tab will easily have you style the web content (text, image, video, etc.) of the page you want to design.


Go to the Style tab > Slider > then set Overlay Color from the color pallet > after that adjust Opacity and give padding to the Description text.

If you want, you can activate the Shadow Mode. That’s it in this section.


If you want to style the button, you can do that in both Normal and Hover mode.

Look at the screenshot below.


Only, go to the Style tab > Button > Normal.


Go to the Style tab > Button > Hover.

Title and Text

Here, from these two sections, you might only add Color and Typography.


This section will mainly let you style Arrows and Dots such as Position, Size, etc. Simply, go to the Style tab > Navigation > Arrows and Dots.

Video Assist

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

Copyright © 2022 BdThemes. All Rights Reserved.