=== Arts Device Mockups for Elementor ===
Contributors: artemsemkin
Donate link: https://buymeacoffee.com/artemsemkin
Tags: elementor, mockup, device mockup, browser mockup, phone mockup
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
Stable tag: 1.0.0
License: GPLv3
License URI: https://www.gnu.org/licenses/gpl-3.0
GitHub Plugin URI: https://github.com/artkrsk/device-mockups-for-elementor/

Device mockups as a native Elementor widget: browser, laptop, tablet, phone, and bare frames for images, videos, and rotating galleries.

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

== 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.

== Frequently Asked Questions ==

= 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.

== Screenshots ==

1. Laptop: lid, camera, and base, all drawn in CSS, with your image on the screen.
2. Browser: a desktop window with traffic dots and a URL bar; the caption shows inside the bar.
3. Tablet in landscape with a uniform hairline bezel. One control flips it to portrait.
4. Phone: a portrait frame with a pill cutout.
5. The Device Mockup widget under the "Arts" category in the Elementor panel.

== Changelog ==

= 1.0.0 =
Initial release.
