A portfolio page works best when each project is shown the way people actually saw it — as a full page inside a real device, not as a cropped thumbnail.
The Dynamic Device widget gives you that: a tall screenshot of each project inside a laptop or phone mockup, scrolling on hover. Repeat it once per project and you have a showcase page.
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.
- Prerequisite: a tall vertical screenshot of the page you want to show. The tested image was 800 × 3200 pixels. The scroll travel is the difference between the image height and the device screen height, so a short image barely moves.
Build one project mockup
Start with a single project and get it right, then repeat it. Each project is one Dynamic Device widget.
- Edit your page with Elementor and lay out a container per project, or a grid of containers.
- Drag a Dynamic Device widget into the first one.
- In Content > Content, leave Layout on Normal, choose a Type and pick a frame — Laptop suits a desktop screenshot, Mobile a mobile one.
- Leave Content on Image and add that project’s tall screenshot in Media Image.
- On the Style tab, open Device Background, turn Scroll Image on and set Transition Duration, which is in seconds and defaults to 4.
Then duplicate the widget for each further project and swap the screenshot and the frame. Use Width Adjust(%) and Alignment in Style > Device Layout to keep the mockups the same size across the grid.
Make a row of devices scroll together
For a hero project, put two or three device types side by side and link them, so hovering any one of them scrolls the whole row.
- Give each mockup in the row Scroll Image on and Manual Scroll off.
- Type the same value into Dynamic Device Connection ID on every mockup in the row — for example project-one. Keep it to letters, digits and hyphens.
- Give a different row a different ID, so the two rows stay independent.
Give every mockup in a row the same Transition Duration so they move in step.
Settings that matter here
| Setting | Where | What it does | Default |
|---|---|---|---|
| Scroll Image | Style > Device Background | Travels the screenshot from top to bottom inside the screen on hover. | Off |
| Transition Duration | Style > Device Background | How long that travel takes, in seconds. Range 0.1 to 10. | 4 |
| Dynamic Device Connection ID | Style > Device Background | Links a row of mockups so they scroll together. | empty |
| Box Shadow | Style > Device Background | X, Y, Blur and Color, with Normal and Hover tabs, to lift each mockup off the page. | — |
| Width Adjust(%) | Style > Device Layout | Scales a mockup down so different frames sit evenly in a grid. Range 10 to 100. | 100 |
| Alignment | Style > Device Layout | Left, Center or Right within its container. | Center |
How It Behaves
- Each mockup scrolls its own screenshot on hover. The image travels from its top to its bottom inside the device screen and back again when the pointer leaves.
- A shared Connection ID moves a whole row. On a test page a laptop and a phone sharing one ID both scrolled when either was hovered, while a tablet with a different ID stayed still.
- Mixed device types work in one row. The tested row combined different device types, each with its own screenshot, under a single ID.
- Timing is per widget. Transition Duration belongs to each mockup, so a row only looks synchronised if the values match.
This is the effect a finished showcase row gives on the front end:
Limitations
- A short image barely moves. The scroll travel is the image height minus the device screen height. The tested fixture was 800 × 3200; an image close to the screen height has almost nothing to travel.
- 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.
- Every mockup is its own widget. There is no repeater or query here — a ten-project page means ten Dynamic Device widgets, each with its own screenshot. Duplicating a configured widget is quicker than building each one.
- Tall screenshots are heavy. Each project needs a full-page capture, and a page full of them is a lot of image weight. Compress them before uploading.
- Hover scrolling needs a pointer. On a touch screen there is nothing to hover, so the mockups show the top of each screenshot.
- 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.
- 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.
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.
- Select Link/Popup. The Link and Popup behaviour on the mockup image was not exercised.
- 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.
- Page weight and load time. Pages with several mockups were built and measured for behaviour, not for performance.
Troubleshooting
The mockups are different sizes and the grid looks uneven
Each frame has its own native pixel size, listed in its option label. Even them up with Width Adjust(%) in Style > Device Layout, and set Alignment to Center in every widget.
Hovering one project scrolls all of them
They all share the same Dynamic Device Connection ID. Give each row its own ID, or clear the field on the mockups that should behave independently.
A row will not scroll together
Check that every mockup in the row has Scroll Image on, Manual Scroll off, and exactly the same Connection ID, capitals included.
The Dynamic Device widget is not in the Elementor panel
The widget ships only in The Plus Addons for Elementor Pro. Make sure Pro is installed and active, then go to The Plus Addons > Widgets, search for Dynamic Device and turn its toggle on.
