Table Of Contents

Device Slider Widget

How to Use Device Slider Widget

We need to display content on a webpage. And to do so, we 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 Device Slider Widget

Inserting widget, it is just a matter of dragging and dropping. As you see in the screenshot above, drag the custom device slider inside your page.

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.

Sliders

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

Device Slider Widget slider items

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

device slider 3 1 - BdThemes

After dragging and dropping the widget in a new section, you will get a list group for the smart slider. 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.

device slider 4 - BdThemes

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 custom device slider.

device slider 5 - BdThemes

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

Device Slider Widget title layout

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

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

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.

Slider

device slider style 1 - BdThemes

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.) for the smart slider.

Title

device slider style 2 - BdThemes

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

Navigation

device slider style 3 - BdThemes

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.

Animation

device slider style 4 - BdThemes

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 on the custom device slider.

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 of the Device Slider Widget.

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.