--- 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-08-18 author: "Aditya Sharma" description: "Are you a creative professional looking to showcase your work in an attractive and organised way?  A portfolio page is one of the most effective and efficient ways to present..." image: https://nexterwp.com/wp-content/uploads/2024/05/create-website-portfolio-showcase-page-in-wordpress-1024x519.jpg word_count: 408 --- # 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. Are you a creative professional looking to showcase your work in an attractive and organised way?  A portfolio page is one of the most effective and efficient ways to present your portfolio to prospective employers, clients, and peers. Portfolios serve as an introduction to you and your work and help demonstrate your capabilities and creativity. WordPress is one of the most popular platforms for creating websites and can be a perfect choice for creating your portfolio/showcase page. But creating a portfolio/showcase page in the default WordPress block editor can be challenging. For this, you can use the Nexter Blocks. It has a suite of powerful blocks, such as the Dynamic Device block, which can help you create fantastic portfolio pages. *To check the complete feature overview documentation of the Nexter Blocks* Dynamic Device block, [click here](/docs/dynamic-device-block-settings-overview/). ***Requirement  - This block is a part of the Nexter Blocks*, make sure its installed & activated to enjoy all its powers.** [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-device-mockups/) To create a portfolio page in WordPress using The Dynamic Device block, follow the steps -  1. To create a page, go to **Pages** > **Add New **from the dashboard. 2. In the page title, add **Portfolio** and click on the **Publish** button. 3. Add the Container block from the Nexter Blocks and choose your preferred column layout. 4. Then, add the Dynamic Device block to one of the columns. 5. From the **Layout** section, choose **Normal**. After selecting the appropriate device type and mockup, go to **Content Type **and choose **Image **from the section. 6. Now, add your image from the **Upload Image** section. ![](https://nexterwp.com/wp-content/uploads/2023/02/dynamic-device-normal-image-vertical-new.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 create long website screenshots from a url.* 7. Now go to **Style** > **Image** and turn on the **Scroll Image** toggle. This will make your image scroll when someone hovers over it. ![](https://nexterwp.com/wp-content/uploads/2023/02/dynamic-device-style-image-scroll-image-transition-duration-new.png) If you want to add a manual scroll to your image, you can turn on the **Manual Scroll** toggle. 8. Select the Dynamic Device block and click on three dots. Then from the dropdown, click on **Duplicate**. 9. Then drag and drop the block to another column and just change the image of your block. Following this process, you can quickly create a beautiful portfolio page with an image scrolling effect inside device mockups. Also, check [How to show a live website in a mockup using iframes in WordPress](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.