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.
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 (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.
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.
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.
| 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 |
| Template | An Elementor template picked in Elementor Templates. Its real content renders inside the screen, links and buttons included. | Elementor templates in a mockup |
| IFrame | A live page, from the URL you put in IFrame URL. | Live website in a mockup |
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 > 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 |
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.
