Title: Browser Mockup & Scrolling Screenshot Portfolio – Amitry Project Grid Author: amitry Published: Metheven 13, 2026 Last modified: Metheven 27, 2026 --- Search plugins ![](https://ps.w.org/amitry-project-grid/assets/banner-772x250.png?rev=3571304) ![](https://ps.w.org/amitry-project-grid/assets/icon-256x256.gif?rev=3573689) # Browser Mockup & Scrolling Screenshot Portfolio – Amitry Project Grid By [amitry](https://profiles.wordpress.org/amitry/) [Download](https://downloads.wordpress.org/plugin/amitry-project-grid.1.0.5.zip) [Live Preview](https://cor.wordpress.org/plugins/amitry-project-grid/?preview=1) * [Details](https://cor.wordpress.org/plugins/amitry-project-grid/#description) * [Reviews](https://cor.wordpress.org/plugins/amitry-project-grid/#reviews) * [Installation](https://cor.wordpress.org/plugins/amitry-project-grid/#installation) * [Development](https://cor.wordpress.org/plugins/amitry-project-grid/#developers) [Support](https://wordpress.org/support/plugin/amitry-project-grid/) ## Description Amitry Project Grid is a browser mockup and scrolling screenshot plugin for WordPress. Upload a full-page website screenshot and it appears inside a clean browser frame that scrolls through the entire page when a visitor hovers over it. Group these project cards into a responsive portfolio grid to showcase your work. It is built for agencies, freelancers, and anyone who needs to display websites: a portfolio grid, a project showcase, a case-study layout, or a single website preview. [See the live demo](https://demo.amitry.de/) #### Why a scrolling browser mockup? A flat screenshot only shows the top of a page. A browser mockup that scrolls on hover shows the whole website, looks interactive, and invites a click. It is the difference between a static image and a living portfolio. People search for this kind of tool under many names: browser mockup, scrolling screenshot, website preview, website mockup, portfolio screenshot grid, project showcase, or a website frame for WordPress. Amitry Project Grid covers all of these, and you can add it as a block, a shortcode, or an Elementor widget. #### Key features * Browser mockup frame with traffic-light dots and an address bar * Scrolling screenshot on hover (desktop) with automatic playback on touch devices * Responsive portfolio grid with a 1 to 6 column setting * Works as a Gutenberg block, a shortcode, and an Elementor widget * Optional caption, call-to-action button, and click-through link per card * Keeps full-page screenshots sharp by using the original uploaded image * No external services, no API keys, no tracking #### What is on a card * Icon (Dashicon picker or an uploaded image) * Headline with a selectable heading level (H2 to H6) * Description with basic inline formatting (bold, italic, links) * Browser-mockup screenshot with hover-scroll for full-page images * Optional caption shown below the mockup * Call-to-action button with text, URL, and target #### Three ways to add it * Project Grid block: a grid container with a 1 to 6 column setting, responsive on smaller screens * Project Card block: a single card, used standalone or inside a grid * Shortcode `[apshow_project_card]` for classic themes * Elementor widget that loads only when Elementor is active #### How the mockup works The uploaded screenshot is rendered inside a browser-style frame. On a desktop, hovering scrolls the image from the top to the bottom of the screenshot, then it returns when the cursor leaves. On touch devices the scroll plays automatically when the card enters the viewport, and tapping replays it. Reduced-motion preferences are respected. The plugin uses the original uploaded image, not the WordPress auto-scaled copy, so even very tall full-page screenshots stay sharp inside the mockup. #### Privacy The plugin makes no external network requests. No data is collected, transmitted, or stored outside your own WordPress installation. #### For developers The plugin exposes hooks for extensions: * `apshow_renderer_defaults`, `apshow_wrapper_classes`, `apshow_render_html`, ` apshow_kses_allowed` (filters) * `apshow_allowed_frames`, `apshow_allowed_scroll_modes`, `apshow_mockup_bar_html`,` apshow_mockup_html` (filters for extending mockup frames and animation modes) * `apshow_before_render`, `apshow_after_render`, `apshow_loaded`, `apshow_activated`,` apshow_deactivated`, `apshow_admin_about_after_content` (actions) * `APSHOW_HOOK_VERSION` constant for compatibility checks ## Screenshots [⌊The hover effect in action: a full-page website screenshot scrolling inside a browser mockup.⌉⌊The hover effect in action: a full-page website screenshot scrolling inside a browser mockup.⌉[ The hover effect in action: a full-page website screenshot scrolling inside a browser mockup. [⌊The Project Card block in the editor with all fields filled in.⌉⌊The Project Card block in the editor with all fields filled in.⌉[ The Project Card block in the editor with all fields filled in. ## Blocks This plugin provides 2 blocks. * Project Grid Container for multiple Project Cards arranged in a responsive grid. * Project Card A single project showcase card: icon, headline, description, browser- mockup screenshot with hover-scroll, and call-to-action. ## Installation 1. Upload the plugin folder to `/wp-content/plugins/` or install it via the Plugins screen. 2. Activate the plugin. 3. Add the “Project Grid” or “Project Card” block, use the `[apshow_project_card]` shortcode, or add the Elementor widget. ## FAQ ### Do I need an external service or API key? No. The plugin works entirely with images you upload to your own media library. ### Can I use just one card without the grid? Yes. The Project Card block works standalone. ### Does it work with my theme? The blocks, shortcode, and Elementor widget work with any standard WordPress theme. Wide and full alignment on the grid require a theme that supports those alignments. ### Is Elementor required? No. The Elementor widget only registers when Elementor is active. ### How tall can my screenshot be? Any height. The plugin reads the original uploaded image, so even very tall full- page screenshots stay sharp inside the mockup. ### How do I get the scrolling effect? Upload a full-page screenshot (a tall image of the whole page). The mockup scrolls through it on hover. A short screenshot has nothing to scroll, so use a full-page capture for the best effect. ## Reviews There are no reviews for this plugin. ## Contributors & Developers “Browser Mockup & Scrolling Screenshot Portfolio – Amitry Project Grid” is open source software. The following people have contributed to this plugin. Contributors * [ amitry ](https://profiles.wordpress.org/amitry/) [Translate “Browser Mockup & Scrolling Screenshot Portfolio – Amitry Project Grid” into your language.](https://translate.wordpress.org/projects/wp-plugins/amitry-project-grid) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/amitry-project-grid/), check out the [SVN repository](https://plugins.svn.wordpress.org/amitry-project-grid/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/amitry-project-grid/) by [RSS](https://plugins.trac.wordpress.org/log/amitry-project-grid/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.0.5 * Fixed: the blocks could be missing from the editor inserter on some sites. Added the required script asset files so the Project Grid and Project Card blocks register reliably. * New: full shortcode reference on the plugin’s settings page (Settings > Project Grid). #### 1.0.4 * Readme: refined the search tags for better discoverability. #### 1.0.3 * New: optional caption line below the mockup (block, shortcode, and Elementor). #### 1.0.2 * Added a link to the live demo. #### 1.0.1 * Renamed the single-card shortcode to `[apshow_project_card]` for prefix consistency. * Readme: clearer title and description for the browser-mockup and scrolling-screenshot use case. #### 1.0.0 * Initial release. ## Meta * Version **1.0.5** * Last updated **2 dydh ago** * Active installations **Fewer than 10** * WordPress version ** 6.2 or higher ** * Tested up to **7.0** * PHP version ** 7.4 or higher ** * Language * [English (US)](https://wordpress.org/plugins/amitry-project-grid/) * Tags * [device mockup](https://cor.wordpress.org/plugins/tags/device-mockup/)[portfolio](https://cor.wordpress.org/plugins/tags/portfolio/) [website preview](https://cor.wordpress.org/plugins/tags/website-preview/) * [Advanced View](https://cor.wordpress.org/plugins/amitry-project-grid/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/amitry-project-grid/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/amitry-project-grid/reviews/) ## Contributors * [ amitry ](https://profiles.wordpress.org/amitry/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/amitry-project-grid/)