Skildring

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

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

Skjermbilete

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 hover effect in action: a full-page website screenshot scrolling inside a browser mockup.

Blokker

Denne utvidinga gjev 2 blokker.

Project Card A single project showcase card: icon, headline, description, browser-mockup screenshot with hover-scroll, and call-to-action.
Project Grid Container for multiple Project Cards arranged in a responsive grid.

Installasjon

Upload the plugin folder to /wp-content/plugins/ or install it via the Plugins screen.
Activate the plugin.
Add the «Project Grid» or «Project Card» block, use the [apshow_project_card] shortcode, or add the Elementor widget.

Vanlege spm.

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.

Omtalar

There are no reviews for this plugin.

Bidragsytarar og utviklarar

“Browser Mockup & Scrolling Screenshot Portfolio – Amitry Project Grid” is open source software. The following people have contributed to this plugin.

amitry

Omset “Browser Mockup & Scrolling Screenshot Portfolio – Amitry Project Grid” til ditt eige språk.

Interested in development?

Les kjeldekoden, sjekk SVN-lageret eller abonner på utviklingsloggen med RSS.

Endringslogg

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.