How to Use Device Slider Widget

How to Use Device Slider Widget

We need to display content on a webpage. And most of the time to do so, we might use a slider for promoting our products/ contents. In fact, using Device Slider Widget, you may display your key contents in a device mode( such as Mackbook Air, Tablet, Mobile, etc.). This widget will also support browser mode(Chrome, Firefox, Edge, etc.).

Over this documentation, I’ll include a few directions and picture details to 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.

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


This section will offer you a few device modes(Macbook Pro, Tablet, etc) with default one. You can go for any one.

Just, go to the Content tab > Sliders > Select Device.

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 and Title Link.

Most importantly, the Background control will allow you to set four things(solid Color, Image, Video, and YouTube video) to the slider.

Moreover, from this section, you’ll be able to determine the Size, Alignment, and Navigation of the slider.

If you want, you can hide or reveal Title just hitting the Show Title switcher button.

Title Layout

Just, follow the flow, Content tab > Title Layout.

In this section, you can manipulate the Position and Alignment of Title.

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 want to design. 

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

Let’s have a look.


Go to the Style tab > Slider.

From this section, you can only set Overlay to the slider. While you will select overlay (Blend), you find two options like Overlay Color and Bled Type (Screen, Multiply, etc.).


Without any thinking, simply go to the Style tab > Title > and add Color, Background, Padding, Radius, and Typography. Learn more about Typography.


Come to Navigation > Arrows > Dots. Then, in terms of Arrows, add Color and Hover Color. But, for Dots, you add Color, especially, Active Dot Color and Dots Size.


This section will let you control the animation of the slider. For example, you can enable or disable the options Autoplay, Pause on Hover, and Kenburns Animation using the Yes/No switcher button.

In addition, you can set interval time and animation speed. Most importantly, you may set the type of Slider Animations(Slide, Fade, Scale, Push, Pull).

Video Assist

At last, hopefully, you’ve noticed how our widget works in different device modes for a slider. It is not a tough widget at all, rather easy to manipulate with the rich features. Watch the video for more support and to get more ideas, visit our 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.