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 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.
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 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.
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.
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 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
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
Without any thinking, simply go to the Style tab > Title > and add Color, Background, Padding, Radius, and Typography. Learn more about Typography.
Navigation
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
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.
