--- 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-08-17 lang: en author: "Aditya Sharma" description: "The Dynamic Device widget in The Plus Addons for Elementor lets you display a portfolio or showcase page in Elementor by placing your images inside interactive device mockups with a..." image: https://theplusaddons.com/wp-content/uploads/2023/02/Showcase-Page-in-Elementor-1024x536.jpg word_count: 673 --- # How to create Website Portfolio/Showcase Page in Elementor? ## - Dynamic Device widget in The Plus Addons for Elementor displays portfolio or showcase images inside interactive device mockups with a scroll-on-hover animation. - Required Setup includes Elementor FREE Plugin, The Plus Addons for Elementor plugin, and the Dynamic Device widget activated under The Plus Addons → Widgets. - Portfolio page creation starts in WordPress with Pages > Add New, page title Portfolio, then Edit with Elementor and the Dynamic Device widget dragged onto the page. - Style > Device Background turns on Scroll Image for hover scrolling, while Manual Scroll offers a manual alternative and Transition Duration adjusts scroll speed. The Dynamic Device widget in The Plus Addons for Elementor lets you display a portfolio or showcase page in Elementor by placing your images inside interactive device mockups with a scroll-on-hover animation. Use it to present web design work, app screenshots, or any tall visual asset in a professional mockup frame. *To check the complete feature overview documentation of The Plus Addons for Elementor Dynamic Device widget, [click here](https://theplusaddons.com/docs/dynamic-device-elementor-widget-settings-overview/).* **Best Used For:** - Web designers and agencies showcasing client website screenshots inside device mockups - Freelancers building portfolio pages that demonstrate responsive design work - App developers presenting mobile or desktop application screenshots with a scroll animation ## Required Setup - [Elementor FREE Plugin](https://wordpress.org/plugins/elementor/) installed & activated. - You need to have [The Plus Addons for Elementor](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) plugin installed and activated. - Make sure the Dynamic Device widget is activated, to verify this visit The Plus Addons → Widgets → and Search for **Dynamic Device** and activate. ## How to Activate the Dynamic Device Widget? Go to - **The Plus Addons** → **Widgets** - **Search** the widget name and **turn on the toggle.** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/dynamic-device-mockups/?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## How to Create a Portfolio Showcase Page in Elementor? To create a portfolio page using the Dynamic Device widget, follow these steps. 1. Go to **Pages** > **Add New** from the WordPress dashboard. 2. Enter **Portfolio** as the page title and click **Publish**. 3. Click **Edit with Elementor** at the top of the page. 4. In the Elementor editor, click the **+** icon and select your preferred column layout. 5. Search for **Dynamic Device** in the widget panel and drag it onto the page. 6. From the **Layout** dropdown, select **Normal**. 7. Select the appropriate device type and mockup from their respective dropdowns. 8. In the **Content** section, select **Image** from the dropdown. 9. Add your image from the **Media Image** section. ![dynamic device image](https://theplusaddons.com/wp-content/uploads/2023/02/dynamic-device-image.png) > *Note: Make sure to choose a tall vertical image for a good scrolling effect.* You can use this [Free tool](https://screenshot.guru/) to capture long screenshots of website 10. Go to **Style** > **Device Background** and turn on the **Scroll Image** toggle. This makes the image scroll when a visitor hovers over the device mockup. From the **Transition Duration** section, adjust the scroll speed. ![dynamic device scroll image](https://theplusaddons.com/wp-content/uploads/2023/02/dynamic-device-scroll-image.png) If you want a manual scroll instead of scroll-on-hover, turn on the **Manual Scroll** toggle. 11. Right-click the Dynamic Device widget, select **Copy**, and paste it into the other columns. Change the image in each pasted widget to complete your portfolio grid. You now have a portfolio showcase page with image scrolling inside device mockups. ![multiple scrolling device demo](https://theplusaddons.com/wp-content/uploads/2023/02/multiple-scrolling-device-demo.gif) ***Suggested Read:** [Dynamic Device Elementor Widget Settings Overview](https://theplusaddons.com/docs/dynamic-device-elementor-widget-settings-overview/)* ***Suggested Read:** [How to Create a Unique Portfolio Section in Elementor?](https://theplusaddons.com/docs/create-a-unique-portfolio-section-in-elementor/)* ## FAQ **How do I create a portfolio page in Elementor?** Create a new page in WordPress, open it in Elementor, add the Dynamic Device widget from The Plus Addons for Elementor, select your device mockup, upload a tall screenshot of your work, and enable the **Scroll Image** toggle in the **Style** tab. **What is the Dynamic Device widget in Elementor?** The Dynamic Device widget in The Plus Addons for Elementor displays an image inside a device frame — such as a desktop, laptop, tablet, or phone — and adds an image scroll animation when a visitor hovers over it. **How do I add scroll animation to an image in Elementor?** Add the Dynamic Device widget, upload your image in the **Content** section, then go to **Style** > **Device Background** and turn on the **Scroll Image** toggle. **What image size works best for the Dynamic Device scroll effect?** Use a tall vertical image for the best scroll effect. The taller the image relative to the device frame, the more visible the scroll animation. You can use a full-page screenshot tool to capture long website screenshots. **The Dynamic Device widget is not showing in Elementor — how do I fix it?** Make sure the Dynamic Device widget is activated under **The Plus Addons → Widgets**. Search for **Dynamic Device** and turn on the toggle, then refresh the Elementor editor. ## Related Docs - [Dynamic Device Elementor Widget Settings Overview](https://theplusaddons.com/docs/dynamic-device-elementor-widget-settings-overview/) - [How to Create a Unique Portfolio Section in Elementor?](https://theplusaddons.com/docs/create-a-unique-portfolio-section-in-elementor/)