--- title: "How to create Website Portfolio/Showcase Page in WordPress?" url: https://nexterwp.com/docs/create-website-portfolio-showcase-page-in-wordpress/ date: 2023-02-22 modified: 2026-09-15 lang: en author: "Aditya Sharma" description: "A web design portfolio is a list of screenshots, and every one of them looks like every other one. Device mockups that scroll, and scroll together, turn the same screenshots..." image: https://nexterwp.com/wp-content/uploads/2024/05/create-website-portfolio-showcase-page-in-wordpress-1024x519.jpg word_count: 476 --- # How to create Website Portfolio/Showcase Page in WordPress? ## Key Takeaways - Nexter Blocks includes the Dynamic Device block, which helps create portfolio pages in WordPress with device mockups and image scrolling effects. - Dynamic Device block uses Layout set to Normal, Content Type set to Image, and Style > Image Scroll Image toggle to make an image scroll on hover. - Portfolio page creation in WordPress starts with Pages > Add New, a page titled Portfolio, and a Container block with a preferred column layout. A web design portfolio is a list of screenshots, and every one of them looks like every other one. Device mockups that scroll, and scroll together, turn the same screenshots into something worth stopping for. *For every Dynamic Device setting in one place, see the [Dynamic Device block guide](https://nexterwp.com/docs/add-dynamic-device-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-device-mockups/) ## Before You Start - **Edition:** **Pro** — the Dynamic Device block is part of Nexter Blocks Pro.- **Block to enable:** Dynamic Device, switched on under **Nexter > Blocks** in your WordPress dashboard.- **A full-page screenshot per project**, all a similar length. ## Steps - Add the **Dynamic Device** block and click **Design from Scratch**. - Choose the **Device Type** — mobile, tablet, laptop or desktop — then pick the exact frame from the list below it. ![The Device Type setting](https://nexterwp.com/wp-content/uploads/2026/09/ddev-device.webp) - Add a Dynamic Device block for each project and choose its frame. ![The Device Type setting](https://nexterwp.com/wp-content/uploads/2026/09/ddev-device.webp) - Switch scrolling on for each, and add the tall screenshot. ![The Content Type setting](https://nexterwp.com/wp-content/uploads/2026/09/ddev-content.webp) - Give the devices in a row the same connect name so they scroll together. - Set a width on each block, or put each in a column. - Publish and check the page on a phone. > ***Give the block a width.** The device frame fills whatever space it is in, and measured at full width a phone mockup rendered **1092 by 2289 pixels** — over two thousand pixels tall. Put it in a column, or set a maximum width, before you judge how it looks.* ## How It Behaves - **A phone and a desktop side by side is the usual pairing**, and connecting them makes both scroll from one hover — the connection is a shared `data-connectdd` name.- **Each device keeps its own screenshot**, so one project per pair works well.- **Carousel is the alternative** for showing several screens of a single project in one frame.- **On Click** can send visitors to the live project, which is what turns a showcase into a portfolio. ## Limitations - **Pro only.**- **Give the block a width.** The device frame fills whatever space it is in, and measured at full width a phone mockup rendered **1092 by 2289 pixels** — over two thousand pixels tall. Put it in a column, or set a maximum width, before you judge how it looks.- Several tall screenshots on one page adds up quickly. Compress them, and consider how many projects belong above the fold.- The scrolling and the connection both rely on hover, so a phone visitor sees static mockups.- Screenshots are pictures, so the text in them is not searchable. Give each project a real heading. ## Troubleshooting ### The page is extremely long Full-width phone frames are over two thousand pixels tall. Put each device in a column, or set a maximum width. ### The devices do not scroll together Their connect names must match exactly, and each needs scrolling switched on. ### It looks static on my phone The scrolling is hover-driven. Use manual scrolling if touch visitors matter. ## Related Docs - [Connect several scrolling devices](https://nexterwp.com/docs/connect-multiple-scrolling-device-mockup-in-wordpress/)- [Scrolling device mockup](https://nexterwp.com/docs/website-scrolling-device-mockup-in-wordpress/)- [Live website in a mockup](https://nexterwp.com/docs/how-to-show-a-live-website-in-a-mockup-using-iframes-in-wordpress/) ## Frequently Asked Questions **Q: Why is my portfolio page not scrolling inside the device mockup?** A: The scrolling effect depends on turning on the Scroll Image toggle under Style > Image in the Dynamic Device block. That setting makes the image move on hover, so if it is off, the mockup will stay static. A tall vertical image also matters here because the page specifically calls out long screenshots for a good scrolling effect. If you want manual control instead of hover-based motion, the Manual Scroll toggle is the other option. **Q: What do I need before building a portfolio showcase page with Nexter Blocks?** A: The key requirement is that Nexter Blocks is installed and activated, because the Dynamic Device block is part of that suite. Without that block, you do not get the device mockup setup described in this tutorial. The page also assumes you are working in WordPress and using the default block editor, where creating this kind of showcase can be challenging without a block suite like Nexter Blocks. **Q: Can I create a portfolio showcase page in WordPress without coding?** A: The tutorial is built around a no-code workflow in WordPress using Nexter Blocks. It uses a Container block for layout and the Dynamic Device block for the mockup effect, so the page is assembled visually rather than with custom code. That matters if you want a fast portfolio or showcase page that still looks organized and polished for clients, employers, or peers. **Q: What image works best for a scrolling website mockup?** A: A tall vertical image works best because the scroll effect needs enough height to feel like a real website capture. The tutorial specifically recommends using a long screenshot from a URL for better results. If the image is too short, the hover scroll effect will feel limited and may not sell the idea of a full website showcase inside the device mockup. **Q: How do I add more than one portfolio item on the same page?** A: The tutorial uses duplication to speed up multi-item layouts. After adding one Dynamic Device block, you can duplicate it from the three-dot menu and drag it into another column, then change only the image. That keeps the layout consistent while letting each mockup show a different project, which is cleaner than rebuilding each block from scratch. **Q: What is the difference between hover scroll and manual scroll in the Dynamic Device block?** A: Hover scroll is automatic when someone moves their cursor over the image, while Manual Scroll gives you direct control over how the image moves. The tutorial mentions both under Style > Image, so they serve different presentation styles. Hover scroll works well for quick portfolio previews, while manual scroll gives you more explicit control over how much of the screenshot gets revealed.