Arts Device Mockups for Elementor

Show your work inside a device. This plugin adds a Device Mockup widget to Elementor that wraps images, videos, and image galleries in clean device frames: a browser window, a laptop, a tablet, a phone, or a bare screen with no chrome at all.

🌐 Live Showcase

The frames are drawn entirely in CSS. There are no mockup images to load and no external requests — frames stay sharp at any size, and every part of the device can take your own colors.

Five device frames

• Browser — a desktop browser window with traffic dots and a URL bar. Show your caption inside the URL bar or below the frame, with an optional link arrow.
• Laptop — a notebook frame with lid, camera, and base.
• Tablet — portrait or landscape orientation.
• Phone — a portrait phone frame with a pill cutout.
• Bare — just the screen, with an adjustable corner radius.

Any screen content

• An image in any registered size.
• Video: self-hosted, YouTube, or Vimeo — muted, looped, without player chrome, with a server-rendered poster.
• A rotating gallery that cycles on hover or automatically when scrolled into view, with your own interval and loop setting.

Behaviors and styling

• Play video on hover only, or while the mockup is visible in the viewport.
• Scroll a tall screenshot inside the frame on hover.
• Per-device colors: body, screen, border, chrome, camera, traffic dots, URL bar.
• Aspect ratio (3:2, 4:3, 16:9, 1:1, 2:3, 9:16), object fit and position — responsive per breakpoint.
• Captions and descriptions pulled from the image’s alt text, title, caption, or description — or custom text.
• Dynamic tags on media, link, and text fields. WPML-ready (caption, description, and URL bar text are translatable).

Templates can be overridden from your theme: copy a template into {your-theme}/device-mockups/.