Title: Arts Device Mockups for Elementor
Author: Artem Semkin
Published: <strong>2026년 8월 21일</strong>
Last modified: 2026년 8월 21일

---

플러그인 검색

![](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

 작성자: [Artem Semkin](https://profiles.wordpress.org/artemsemkin/)

[다운로드](https://downloads.wordpress.org/plugin/device-mockups-for-elementor.1.0.0.zip)

 * [세부사항](https://ko.wordpress.org/plugins/device-mockups-for-elementor/#description)
 * [평가](https://ko.wordpress.org/plugins/device-mockups-for-elementor/#reviews)
 *  [설치](https://ko.wordpress.org/plugins/device-mockups-for-elementor/#installation)
 * [개발](https://ko.wordpress.org/plugins/device-mockups-for-elementor/#developers)

 [지원](https://wordpress.org/support/plugin/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](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/`.

## 스크린샷

[⌊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.

## 설치

 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.

## 후기

이 플러그인에 대한 평가가 없습니다.

## 기여자 & 개발자

“Arts Device Mockups for Elementor”(은)는 오픈 소스 소프트웨어입니다. 다음의 사람들이
이 플러그인에 기여하였습니다.

기여자

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

[자국어로 “Arts Device Mockups for Elementor”(을)를 번역하세요.](https://translate.wordpress.org/projects/wp-plugins/device-mockups-for-elementor)

### 개발에 관심이 있으십니까?

[코드 탐색하기](https://plugins.trac.wordpress.org/browser/device-mockups-for-elementor/)
는, [SVN 저장소](https://plugins.svn.wordpress.org/device-mockups-for-elementor/)
를 확인하시거나, [개발 기록](https://plugins.trac.wordpress.org/log/device-mockups-for-elementor/)
을 [RSS](https://plugins.trac.wordpress.org/log/device-mockups-for-elementor/?limit=100&mode=stop_on_copy&format=rss)
로 구독하세요.

## 변경이력

#### 1.0.0

Initial release.

## 기초

 *  버전 **1.0.0**
 *  최근 업데이트: **3주 전**
 *  활성화된 설치 **10보다 적음**
 *  워드프레스 버전 ** 6.0 또는 그 이상 **
 *  다음까지 시험됨: **7.1**
 *  PHP 버전 ** 8.0 또는 그 이상 **
 *  언어
 * [English (US)](https://wordpress.org/plugins/device-mockups-for-elementor/)
 * 태그:
 * [browser mockup](https://ko.wordpress.org/plugins/tags/browser-mockup/)[device mockup](https://ko.wordpress.org/plugins/tags/device-mockup/)
   [elementor](https://ko.wordpress.org/plugins/tags/elementor/)[mockup](https://ko.wordpress.org/plugins/tags/mockup/)
 *  [고급 보기](https://ko.wordpress.org/plugins/device-mockups-for-elementor/advanced/)

## 평점

아직 제출된 리뷰가 없습니다.

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

[모든  리뷰 보기](https://wordpress.org/support/plugin/device-mockups-for-elementor/reviews/)

## 기여자

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

## 지원

할 말 있으신가요? 도움이 필요하신가요?

 [지원 포럼 보기](https://wordpress.org/support/plugin/device-mockups-for-elementor/)

## 기부

이 플러그인이 발전하도록 도우시겠습니까?

 [ 이 플러그인에 기부하기 ](https://buymeacoffee.com/artemsemkin)