Dynamic Devices

< All Topics

Showcasing images, videos, gifs on laptops, mobile screens on your website is now a trend. They are the modern web design elements and can be seen on every popular websites.

Using the Dynamic Devices, you can show your website, app and other screenshots on the mobile, laptop and desktop screens. This gives a lively touch to your website and makes it standout.

Pro tip
Why not showcase content inside the laptop and mobile screens to show some feature that will look good on the screen. This will not only make your website look good but also increase engagement. Keep the size of the screen and content the same to display content without any issues.

How to use the Dynamic Devices Widget of The Plus Addons For Elementor

The Dynamic Devices widget comes with two different layouts i.e. Normal and Carousel. This widget is easy to use. Let’s understand how to use the widget below.

Table Of Contents

General Steps

Search for the Dynamic Devices element from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to the Dynamic Devices widget. First, click on the Content tab.

1. Content

Content

Select Layout for Dynamic Device widget.

Layout

Select the Layout for the Dynamic Device here. You will get two options here, Normal layout and the Special Carousel layout.

Type

Select which Type of device you want to display. You will four options to choose from. Mobile, Tablet, Laptop, and PC.

Phone/Laptop/Tablet Device

Set the particular model of the device you want to use. i.e. iPhone white, Macbook black.

Media Image

Select the image here you want to be displayed on the device you have selected.

Select Link/Popup

Select if you want to add a link or display the pop up.

Icon Options

Show Icon for Dynamic Device widget.

Show Icon

Slide right if you want the Icon to be displayed.

Upload Icon

Upload the icon here that you want to display.

2. Style

The Style tab is used for customizing the appearance of all the Scroll Navigation widget components. All these styling options include customizing the fonts, colors, background, margins, and padding which are common across all the widgets. So, we have created a single detailed article explaining these Styling Options

Icon Options

Enable and set the Continuous Animation, Icon Radius, and Icon Size.

Carousel Slide

Set the Slide Gap/Space, Adjust Slide Space, Carousal Width, Box Shadow, Slide Opacity, and Slide Scale.

Device Layout

Set the Width Adjust, Padding, and Margin here.

Device Background

Enable and set the Scroll Image and Box Shadow.

On Scroll View Animation

On Scroll View Animation Options are used to set beautiful animations to your sections. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.

View On Scroll View Animation Tutorial

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options

View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Need help?