---
title: "How to create Website Portfolio/Showcase Page in Elementor?"
url: https://theplusaddons.com/docs/create-website-portfolio-showcase-page-in-elementor/
date: 2023-02-21
modified: 2026-09-19
lang: en
author: "Aditya Sharma"
description: "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...."
image: https://theplusaddons.com/wp-content/uploads/2023/02/Showcase-Page-in-Elementor-1024x536.jpg
word_count: 1270
---

# How to create Website Portfolio/Showcase Page in Elementor?

## 

- Dynamic Device ships only in The Plus Addons for Elementor Pro, and with Pro deactivated the widget does not render at all.
- A tall vertical screenshot, tested at 800 × 3200 pixels, is required because scroll travel equals the image height minus the device screen height.
- Dynamic Device Connection ID links multiple mockups so hovering one device scrolls the whole row, and every mockup in the row needs the same Transition Duration.
- Manual Scroll turns off hover animation, hides Dynamic Device Connection ID, and makes the visitor scroll the image by hand inside the frame.

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.***

[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.- **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.

![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)

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.

![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)

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.

![Three mockups on one page; the laptop and the phone share a Dynamic Device Connection ID, the tablet uses a different one.](https://theplusaddons.com/wp-content/uploads/2026/09/dynamicdevice-result-connected.webp)

This is the effect a finished showcase row gives on the front end:

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

## 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.

## 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/)- [Dynamic Device Elementor Widget Settings Overview](https://theplusaddons.com/docs/dynamic-device-elementor-widget-settings-overview/)

## Frequently Asked Questions

**Q: What do I need before I can build a portfolio showcase page in Elementor?**
A: The setup depends on a tall vertical screenshot, Elementor free, and The Plus Addons for Elementor Pro being installed and active. The Dynamic Device widget ships only in Pro, so it will not render without it. The page also notes that the widget must be enabled under The Plus Addons > Widgets. A tall image matters because the scroll distance is just the image height minus the device screen height, so short screenshots barely move.

**Q: How do I make each project in a portfolio page scroll inside a device mockup?**
A: Each project is built as its own Dynamic Device widget, with Layout left on Normal, a frame chosen for the device type, and the project’s tall screenshot added as the Media Image. The key detail is to turn Scroll Image on in Style > Device Background and set Transition Duration, which defaults to 4 seconds. That gives you the hover-scroll effect people expect from a real device preview instead of a cropped thumbnail.

**Q: How do I make several device mockups scroll together on hover?**
A: A shared Dynamic Device Connection ID links multiple mockups into one scrolling row. Give every mockup in that row the same ID, keep Scroll Image on, and turn Manual Scroll off. The page says the ID can use letters, digits, and hyphens only, and every mockup in the row should use the same Transition Duration if you want them to move in step. Different rows need different IDs so they stay independent.

**Q: Why do my portfolio mockups look uneven in a grid?**
A: Uneven grids usually come from different native frame sizes. The page points out that each frame has its own pixel size, listed in its option label, so matching them visually requires Width Adjust(%) in Style > Device Layout plus Alignment set to Center on every widget. That keeps mixed frames from drifting out of line when you place several projects side by side.

**Q: Can I use manual scrolling instead of hover scrolling for device mockups?**
A: Manual Scroll replaces the hover animation rather than adding to it. With Manual Scroll on, hovering does nothing and the visitor scrolls inside the frame by hand instead. It also hides Dynamic Device Connection ID, which means that manual-scroll devices cannot be linked into a synchronized row. That makes it better for single previews than for connected showcase strips.

**Q: Why is the Dynamic Device widget missing from Elementor?**
A: The widget is part of The Plus Addons for Elementor Pro only, so it will not appear if Pro is not installed and active. The page also says to go to The Plus Addons > Widgets, search for Dynamic Device, and turn its toggle on. If it still seems missing after that, the most likely issue is that Pro is deactivated or the widget itself has not been enabled yet.