---
title: "Dynamic Device Elementor Widget Settings Overview"
url: https://theplusaddons.com/docs/dynamic-device-elementor-widget-settings-overview/
date: 2023-02-21
modified: 2026-09-19
lang: en
author: "Aditya Sharma"
description: "The Dynamic Device widget puts an image, an Elementor template or a live page inside a phone, tablet, laptop or desktop mockup, so you can show a design the way..."
image: https://theplusaddons.com/wp-content/uploads/2023/02/Dynamic-Device-Elementor-Widget_-Settings-Overview-1024x536.jpg
word_count: 1883
---

# Dynamic Device Elementor Widget Settings Overview

## 

- The Dynamic Device widget puts an image, an Elementor template, or a live page inside a phone, tablet, laptop, or desktop mockup.
- The Plus Addons for Elementor Pro ships Dynamic Device only in Pro, and the widget does not render at all when Pro is deactivated.
- Content > Content > Layout offers two values: Normal for one device frame and Special Carousel for a slider of images with a device frame drawn over it.
- Style > Device Background includes Scroll Image and Manual Scroll, and Manual Scroll replaces hover animation with a real scrollbar while hiding Dynamic Device Connection ID.
- Special Carousel defaults to Infinite and Multiple, while Desktop offers exactly one frame, iMac Minimal (1000px x 565px), and there is no SmartWatch device in either layout.

The **Dynamic Device** widget puts an image, an Elementor template or a live page inside a phone, tablet, laptop or desktop mockup, so you can show a design the way people will actually see it.

This page walks through every section of the widget: the two layouts, the device frames each one offers, the three content types, the hover and manual scrolling effects, and the carousel options. The other Dynamic Device docs then take one of these jobs at a time.

***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/dynamic-device-mockups/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — **Dynamic Device** ships only in The Plus Addons for Elementor Pro. With Pro deactivated the widget does not render at all, and there is no free version of it.- **Prerequisite:** [Elementor](https://wordpress.org/plugins/elementor/) (free) installed and active.- **Widget to enable:** go to **The Plus Addons > Widgets**, search for **Dynamic Device** and turn its toggle on.

## Turn the widget on

- In your WordPress admin, go to **The Plus Addons > Widgets**.- Search for **Dynamic Device** and turn its toggle on. Until you do, the widget does not appear in the Elementor panel.

![The Plus Addons Widgets screen with the Dynamic Device widget switched on](https://theplusaddons.com/wp-content/uploads/2023/02/dynamic-device.png)

Then edit a page with Elementor, search the panel for **Dynamic Device** and drag the widget onto your layout.

## Layout

**Content > Content > Layout** is the first decision and it changes almost everything below it. It has two values:

- **Normal** (the default) — one device frame with one piece of content inside it. This is the layout every other Dynamic Device doc uses except the slider one.- **Special Carousel** — a slick slider of images, with a device frame drawn over it. Read the limitations below before you pick this one.

![dynamic device layout demo](https://theplusaddons.com/wp-content/uploads/2023/02/dynamic-device-layout-demo.gif)

## Device types

With **Layout** set to **Normal**, the **Type** control is a row of icons offering **Mobile**, **Tablet**, **Laptop** (the default), **Desktop** and **Custom**. Picking one reveals a dropdown of the frames that ship for it.

![The five Type options in the Normal layout: Mobile, Tablet, Laptop, Desktop and a Custom mockup.](https://theplusaddons.com/wp-content/uploads/2026/09/dynamicdevice-types.webp)

| Type | Frame dropdown | Frames it offers |
| ---- | -------------- | ---------------- |
| **Mobile** | **Mobile Device** | iPhone White, iPhone X Black, iPhone Browser, iPhone Minimal, iPhone Minimal White, S9 Black, S9 Jet Black and S9 White. The default is **iPhone White (320px x 594px)**. |
| **Tablet** | **Tablet Device** | Ipad Vertical White, Ipad Horizontal White and Ipad Browser. The default is **Ipad Vertical White (480px x 646px)**. |
| **Laptop** | **Laptop Device** | Macbook Black, Macbook Minimal, Macbook White Minimal, Macbook White and Windows Laptop. The default is **Macbook Black (800px x 500px)**. |
| **Desktop** | **Desktop Device** | **iMac Minimal (1000px x 565px)** and nothing else — there is only one option in this dropdown. |
| **Custom** | **Custom Mockup** | Your own frame image. It has to be a PNG with the screen area cut out, or it hides whatever is behind it. |

Every frame name carries its pixel size in the option label, so you can pick one that suits the screenshot you have.

## Content

Still in **Content > Content**, the **Content** dropdown decides what goes inside the frame. It is only shown in the **Normal** layout.

| Content | What goes in the frame | Doc |
| ------- | ---------------------- | --- |
| **Image** (default) | A single image from **Media Image**. This is the one the scrolling effects work with, and the only one that offers **Select Link/Popup**. | [Website scrolling device mockup](https://theplusaddons.com/docs/website-scrolling-device-mockup-in-elementor/) |
| **Template** | An Elementor template picked in **Elementor Templates**. Its real content renders inside the screen, links and buttons included. | [Elementor templates in a mockup](https://theplusaddons.com/docs/elementor-templates-inside-a-device-mockup/) |
| **IFrame** | A live page, from the URL you put in **IFrame URL**. | [Live website in a mockup](https://theplusaddons.com/docs/live-website-in-mockup-using-iframes-in-elementor/) |

![The Dynamic Device widget's Content section: Layout, Type, the device dropdown and the Content type.](https://theplusaddons.com/wp-content/uploads/2026/09/dynamicdevice-content.webp)

With **Image** or **Template** selected you also get a **Content > Icon Options** section, where **Show Icon** (off by default) reveals an **Upload Icon** field for a small badge on the mockup. The section is hidden when **Content** is **IFrame**.

## Style > Device Background

This is where the scrolling effects live, and they are the reason most people reach for this widget. They apply when **Layout** is **Normal** and **Content** is **Image**.

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| **Scroll Image** | When on, hovering the mockup travels the image from its top to its bottom inside the screen, and moving the pointer away travels it back. | Off |
| **Manual Scroll** | Replaces that hover animation with a real scrollbar inside the frame, so the visitor scrolls the image themselves. Hovering then does nothing. | Off |
| **Width** | How wide the manually scrolled image is inside the screen, as a percentage. Shown only with **Manual Scroll** on. Range 1 to 100. | 100% |
| **Transition Duration** | How long the hover travel takes, **in seconds**. Range 0.1 to 10. | 4 |
| **Dynamic Device Connection ID** | A name you give to a group of mockups so that hovering any one of them scrolls all of them together. Hidden when **Manual Scroll** is on. | empty |
| **Box Shadow** | X, Y, Blur and Color, with separate Normal and Hover tabs, for a shadow under the device. | — |

![Style > Device Background, where Scroll Image, Manual Scroll, Transition Duration and the Dynamic Device Connection ID live.](https://theplusaddons.com/wp-content/uploads/2026/09/dynamicdevice-scroll-settings.webp)

## Style > Carousal Options

This section only appears when **Layout** is **Special Carousel**. The panel spells it **Carousal Options**, and **Carousal Column** inside it, so that is what you are looking for.

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| **Carousal Column** | **Single Slide** shows one slide at a time; **Multiple** shows the neighbouring slides beside the centred one. | Multiple |
| **Infinite** | Loops the slider endlessly rather than stopping at the last slide. | Enable |
| **Autoplay** | Advances the slider on its own. | Disable |
| **Autoplay Speed** | How long each slide is held, in milliseconds. Range 500 to 10000. Shown only with **Autoplay** enabled. | 4000 |
| **Slide Speed** | How long the slide transition takes, in milliseconds. Range 200 to 5000. | 700 |
| **Dots** | Shows the dot navigation below the slider. | Disable |
| **Arrows** | Shows the previous and next arrows. | Disable |

![Style > Carousal Options with the Special Carousel layout selected.](https://theplusaddons.com/wp-content/uploads/2026/09/dynamicdevice-carousel-options.webp)

Alongside it the carousel adds **Carousel Slide** (slide gap and spacing, Z-Index, and Normal/Hover slide opacity and scale, plus the mockup width, height and offset that place the device frame), **Carousel Dots** and **Carousel Arrows**.

## Style > Device Layout and the rest

- **Device Layout** holds **Width Adjust(%)** (a responsive slider, 10 to 100, default 100), **Alignment** (Left, Center or Right, default **Center**), plus Margin and Padding. It applies to both layouts.- **Image**, **Template** and **Image Scrolling Bar** each appear for the matching content type — border radius, height, width, position and Z-Index for an image; position plus **On Hover Scroll** for a template; and Scrollbar, Thumb and Track styling once **Manual Scroll** is on.- **Plus Extras**, **On Scroll View Animation** and Elementor's own **Advanced** tab work here exactly as they do on every other The Plus Addons widget.

## How It Behaves

- **All five Normal-layout frames ship and load.** Mobile, Tablet, Laptop, Desktop and a Custom upload were each placed on one page and every frame image rendered.- **Hover scrolling really travels the image.** With **Scroll Image** on, the image moves from its top edge to its bottom edge inside the screen on hover and back on mouse-out, over the **Transition Duration** you set, in seconds.- **Templates render live.** A template placed inside a phone frame showed its real heading and a working button, not a picture of one.- **The Special Carousel loops by default.** **Infinite** is enabled out of the box, so the slider duplicates slides to loop, and **Carousal Column** defaults to **Multiple** so neighbouring slides show beside the centred one.

## Limitations

- **There is no SmartWatch device in this widget, in either layout.** The **Special Carousel** layout offers **Mobile**, **Laptop**, **Desktop** and **Custom** only. **Tablet** exists in the **Normal** layout but not in the carousel. For a watch, or for a tablet slider, use **Custom** and supply your own frame image.- **Desktop has exactly one frame.** **Desktop Device** offers **iMac Minimal (1000px x 565px)** and nothing else, so there is no choice to make there.- **A Custom mockup hides your content unless its screen area is transparent.** The frame image is drawn over the content, so an ordinary opaque JPEG shows only itself — the image, template or page behind it is completely invisible. Use a PNG with the screen cut out. Nothing in the editor warns you about this.- **In the Special Carousel layout the device frame is not placed over the slides on its own.** Out of the box the frame is drawn at the left edge of the widget at roughly 330 × 582 pixels while the slider itself is about 1360 × 552 and paints over it, so what you see is a plain image slider with no visible mockup. Lining the frame up with the centred slide is what the mockup width, height and offset controls in the **Carousel Slide** section are for, and they ship with no default values, so you have to dial them in by hand for your own slide size. We have not published tested numbers for this — see **Not verified** below.- **Manual Scroll replaces the hover animation, it does not add to it.** With **Manual Scroll** on, hovering the mockup does nothing; the visitor scrolls the image by hand inside the frame instead. It also hides the **Dynamic Device Connection ID** field, so a manual-scroll device cannot be linked to other mockups.

## Not verified

So you know exactly what has and has not been checked:

- **Responsive behaviour.** Nothing was measured at tablet or mobile breakpoints, and the responsive **Width Adjust(%)** and **Transition Duration** values were not exercised.- **Autoplay, Autoplay Speed, Slide Speed, Infinite and Carousal Column were not toggled one at a time.** Only the shipped defaults, plus Dots and Arrows turned on, were rendered and measured.- **The carousel style sub-controls.** Slide Gap/Space, Slide Opacity, Slide Scale, and the dot and arrow colours, sizes and offsets were not exercised on the front end; only their labels are known.- **Correcting the carousel frame placement.** The misplacement was measured, but the **Carousel Slide** width, height and offset values that would fix it were not worked out, so this doc does not give you numbers to copy.- **Select Link/Popup.** The Link and Popup behaviour on the mockup image was not exercised.- **Show Icon and Upload Icon.** The icon overlay was not exercised on the front end.- **On Hover Scroll for Template content.** The template equivalent of the image scroll effect was not exercised.- **Image Scrolling Bar styling.** The Scrollbar, Thumb and Track controls were not exercised.- **Custom mockup dimensions.** We confirmed that an opaque image hides the content, but no rule was established for what pixel size a custom frame should be.- **Third-party sites in the IFrame.** Only a page on the same site was loaded inside the mockup. Whether a particular external site renders or comes up blank was not tested.

## Troubleshooting

### The Dynamic Device widget is not in the Elementor panel

Two things to check. First, **The Plus Addons for Elementor Pro** must be installed and active — the widget does not exist in the free plugin. Second, go to **The Plus Addons > Widgets**, search for **Dynamic Device** and make sure its toggle is on.

### I chose Custom and now only my frame image shows

Your **Custom Mockup** image is opaque. The frame is drawn over the content, so a flat JPEG covers it completely. Replace it with a PNG whose screen area is transparent.

### I cannot find SmartWatch or Tablet in the carousel

There is no SmartWatch frame in this widget at all, and **Tablet** is only offered in the **Normal** layout. In **Special Carousel** the **Type** control offers **Mobile**, **Laptop**, **Desktop** and **Custom**. Use **Custom** with your own frame image for anything else.

### Nothing moves when I hover the mockup

**Scroll Image** lives in **Style > Device Background** and is off by default. If it is on and still nothing happens, check that **Manual Scroll** is off — it replaces the hover effect — and that your image is much taller than the device screen.

## Related Docs

- [How to add website scrolling device mockup in Elementor?](https://theplusaddons.com/docs/website-scrolling-device-mockup-in-elementor/)- [How to connect multiple scrolling device mockups in Elementor?](https://theplusaddons.com/docs/connect-multiple-scrolling-device-mockups-in-elementor/)- [How to create a Device Slider in Elementor?](https://theplusaddons.com/docs/device-slider-in-elementor-for-smartwatch-tablet-custom-device/)- [How to create Website Portfolio/Showcase Page in Elementor?](https://theplusaddons.com/docs/create-website-portfolio-showcase-page-in-elementor/)

## Frequently Asked Questions

**Q: Why isn’t the Dynamic Device widget showing in Elementor?**
A: The widget only appears when The Plus Addons for Elementor Pro is installed, active, and the Dynamic Device toggle is turned on under The Plus Addons > Widgets. That matters because the free plugin does not include this widget at all, so Elementor cannot list it until Pro is active and the widget is enabled. If it still looks missing, the fastest check is whether the plugin state and widget toggle are both correct.

**Q: Should I use Normal layout or Special Carousel for a device mockup?**
A: Normal layout is the safer choice for most mockups because it gives you one device frame with one piece of content inside it, and that is the setup used by the other Dynamic Device docs. Special Carousel is for a slider-style presentation, but it comes with extra positioning work and known frame-placement issues. If you want a straightforward mockup, Normal keeps the behavior predictable; if you want a slider, expect to tune the carousel controls by hand.

**Q: What content types can go inside an elementor dynamic device mockup?**
A: The widget supports three content types in Normal layout: Image, Template, and IFrame. Image is the one that works with hover scrolling and manual scrolling, Template renders a real Elementor template inside the screen, and IFrame loads a live page from an IFrame URL. That split matters because only Image exposes Select Link/Popup, while Template keeps real links and buttons live inside the mockup.

**Q: Why does my custom device frame hide everything inside it?**
A: A Custom Mockup needs a PNG with the screen area cut out. If you use an opaque image like a flat JPEG, the frame sits on top of the content and completely covers it, so only the frame image shows. That is the main gotcha with Custom frames in The Plus Addons for Elementor: transparency is not optional if you want the image, template, or page behind it to remain visible.

**Q: How do I get hover scrolling to work in a device mockup?**
A: Hover scrolling only works when Layout is Normal and Content is Image, because Scroll Image lives in Style > Device Background. It starts off by moving the image from top to bottom inside the screen on hover, then back on mouse-out over your chosen Transition Duration. If nothing happens, Manual Scroll may be on instead, which replaces hover behavior entirely.

**Q: Can I use Tablet or SmartWatch in the carousel version of Dynamic Device?**
A: Tablet is available only in Normal layout, and SmartWatch does not exist in this widget at all. In Special Carousel, the Type control offers Mobile, Laptop, Desktop, and Custom only. For anything outside those built-in carousel frames, The Plus Addons for Elementor recommends using Custom with your own frame image. That makes carousel planning important before you build around a tablet or watch mockup.