Title: Arts Device Mockups for Elementor
Author: Artem Semkin
Published: <strong>agosto 21, 2026</strong>
Last modified: agosto 21, 2026

---

Search plugins

![](https://ps.w.org/device-mockups-for-elementor/assets/banner-772x250.jpg?rev=
3658173)

![](https://ps.w.org/device-mockups-for-elementor/assets/icon.svg?rev=3658173)

# Arts Device Mockups for Elementor

 By [Artem Semkin](https://profiles.wordpress.org/artemsemkin/)

[Download](https://downloads.wordpress.org/plugin/device-mockups-for-elementor.1.0.0.zip)

 * [Details](https://arg.wordpress.org/plugins/device-mockups-for-elementor/#description)
 * [Reviews](https://arg.wordpress.org/plugins/device-mockups-for-elementor/#reviews)
 *  [Installation](https://arg.wordpress.org/plugins/device-mockups-for-elementor/#installation)
 * [Development](https://arg.wordpress.org/plugins/device-mockups-for-elementor/#developers)

 [Support](https://wordpress.org/support/plugin/device-mockups-for-elementor/)

## Description

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](https://artemsemkin.com/themes/rhye/?utm_source=wordpress.org&utm_medium=referral&utm_campaign=device-mockups-for-elementor)

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/`.

## Screenshots

[⌊Laptop: lid, camera, and base, all drawn in CSS, with your image on the screen.⌉⌊
Laptop: lid, camera, and base, all drawn in CSS, with your image on the screen.⌉[

Laptop: lid, camera, and base, all drawn in CSS, with your image on the screen.

[⌊Browser: a desktop window with traffic dots and a URL bar; the caption shows inside
the bar.⌉⌊Browser: a desktop window with traffic dots and a URL bar; the caption
shows inside the bar.⌉[

Browser: a desktop window with traffic dots and a URL bar; the caption shows inside
the bar.

[⌊Tablet in landscape with a uniform hairline bezel. One control flips it to portrait.⌉⌊
Tablet in landscape with a uniform hairline bezel. One control flips it to portrait
.⌉[

Tablet in landscape with a uniform hairline bezel. One control flips it to portrait.

[⌊Phone: a portrait frame with a pill cutout.⌉⌊Phone: a portrait frame with a pill
cutout.⌉[

Phone: a portrait frame with a pill cutout.

[⌊The Device Mockup widget under the "Arts" category in the Elementor panel.⌉⌊The
Device Mockup widget under the "Arts" category in the Elementor panel.⌉[

The Device Mockup widget under the “Arts” category in the Elementor panel.

## Installation

 1. Install and activate Elementor (the free version is fine).
 2. Install and activate Arts Device Mockups for Elementor.
 3. Edit a page with Elementor and drag the Device Mockup widget from the “Arts” category
    onto the canvas. Pick a frame, drop in an image, video, or gallery, and you are
    done. There is no settings screen.

## FAQ

### Does it require Elementor Pro?

No. The free Elementor plugin (3.5 or newer) is enough. It works with Elementor 
Pro too.

### Does the plugin load anything from external servers?

No. The device frames are pure CSS and everything renders from your own site. The
only exception: if you choose YouTube or Vimeo as a video source, that provider’s
official player script loads for that widget — and only then.

### Are the device frames based on real products?

No. All frames are generic, brand-neutral shapes drawn in CSS — no product images
or logos.

### Where do I find the widget?

In the Elementor editor, look for “Device Mockup” under the “Arts” category.

## Reviews

There are no reviews for this plugin.

## Contributors & Developers

“Arts Device Mockups for Elementor” is open source software. The following people
have contributed to this plugin.

Contributors

 *   [ Artem Semkin ](https://profiles.wordpress.org/artemsemkin/)

[Translate “Arts Device Mockups for Elementor” into your language.](https://translate.wordpress.org/projects/wp-plugins/device-mockups-for-elementor)

### Interested in development?

[Browse the code](https://plugins.trac.wordpress.org/browser/device-mockups-for-elementor/),
check out the [SVN repository](https://plugins.svn.wordpress.org/device-mockups-for-elementor/),
or subscribe to the [development log](https://plugins.trac.wordpress.org/log/device-mockups-for-elementor/)
by [RSS](https://plugins.trac.wordpress.org/log/device-mockups-for-elementor/?limit=100&mode=stop_on_copy&format=rss).

## Changelog

#### 1.0.0

Initial release.

## Meta

 *  Version **1.0.0**
 *  Last updated **12 horas ago**
 *  Active installations **Fewer than 10**
 *  WordPress version ** 6.0 or higher **
 *  Tested up to **7.1**
 *  PHP version ** 8.0 or higher **
 *  Language
 * [English (US)](https://wordpress.org/plugins/device-mockups-for-elementor/)
 * Tags
 * [browser mockup](https://arg.wordpress.org/plugins/tags/browser-mockup/)[device mockup](https://arg.wordpress.org/plugins/tags/device-mockup/)
   [elementor](https://arg.wordpress.org/plugins/tags/elementor/)[mockup](https://arg.wordpress.org/plugins/tags/mockup/)
 *  [Advanced View](https://arg.wordpress.org/plugins/device-mockups-for-elementor/advanced/)

## Ratings

No reviews have been submitted yet.

[Your review](https://wordpress.org/support/plugin/device-mockups-for-elementor/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/device-mockups-for-elementor/reviews/)

## Contributors

 *   [ Artem Semkin ](https://profiles.wordpress.org/artemsemkin/)

## Support

Got something to say? Need help?

 [View support forum](https://wordpress.org/support/plugin/device-mockups-for-elementor/)

## Donate

Would you like to support the advancement of this plugin?

 [ Donate to this plugin ](https://buymeacoffee.com/artemsemkin)