Device Slider is a widget that allows you to show your customers what their site looks like on Desktop, Mobile, and Tablet devices.

Let’s explore how you can customize the Device Slider Widget.

Inserting The Device Slider Widget

On the Elementor editor page, Just Search by the widget’s name and it will appear. Then just drag it and drop it on the page.

Work With Content Tab

Sliders section

Go to Content > Sliders

Step-1

Here you will find the Select Device option and from there, you can select a Device that you want to see on your editor page. (includes custom devices)

Step-2

Here, you can easily add a slide by clicking Add Item button. Otherwise, you may increase the Items by clicking the Duplicate Sign symbol and you can also decrease/remove your item by clicking the Cross sign as shown in the screenshot above.

Step-3

Clicking on a Slider item, here you will get the option to change the item Title and set a Title Link under the Title. From Here you also select the Background Type and Color as your wish.

Step-4

Below, you can change the Slider Size, and set the Device Alignment. From here you can select the Navigation Type and also select the Arrows Icon Style from the Arrows Icon box.

Also, you can easily on/off the Item Link & Show Title switchers to show/hide the elements on the editor page.

Title Layout section

Go to Content > Title Layout

Come to the Title Layout section, you can select the Title Position, choose the Alignment position, and Title HTML Tag for the Title.

Animation section

Go to Content > Animation

Here you will be able to see some Switchers that are Auto Play, Pause on Hover, Loop, Kenburns Animation, and Kenburns Animation Reverse. You can easily enable or disable those switcher buttons to apply specific effects. Also, you can customize the Slider Animation Type, Autoplay Interval, and Animation Speed for the slider.

Autoplay switcher: Enable the switcher to make the slider slide Automatically with a customizable Autoplay Speed control.

Pause on Hover: If turned on, when you Hover your mouse cursor on the slider then your slider will Hold, otherwise, your slider will Autoplay.

Loop: you can easily enable or disable the switcher button. When you activate the Loop switcher button then your slider will loop at a certain time interval. You can also set up the loop animation speed here.

Kenburns Animation: Kenburns Animation is the most attractive Animation effect for the widget. if you enable the switcher button then your post Image will appear like a zoom-in/zoom-out animation that makes your post image Awesome.

Work with The Style Tab

Slider section

Go to Style > Slider

In the Slider section, you can change the Overlay type and Overlay Color as your wish.

Title section

Go to Style > Title

You can change the Title Color, Background Color, and adjust the Padding and Border Radius as your wish.

Here you also customize the Typography and apply Text stroke for the title.

Navigation Section

Go to Style > Navigation

In this section, you can easily change the Arrows Color, Arrows Hover Color, and set the Arrows Spacing.

All done! You have successfully customized the Device Slider widget on your website.

Video Assist

You can watch this quick video to learn about the Device Slider widget. Please visit the demo page for examples.

Thanks for staying with us.