Browser Mockup & Scrolling Screenshot Portfolio – Amitry Project Grid

აღწერა

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