Title: Arts Device Mockups for Elementor Author: Artem Semkin Published: 2026-يىلى 21-ئاۋغۇست Last modified: 2026-يىلى 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://ug.wordpress.org/plugins/device-mockups-for-elementor/#description) * [باھالاشلار](https://ug.wordpress.org/plugins/device-mockups-for-elementor/#reviews) * [ئورنىتىش](https://ug.wordpress.org/plugins/device-mockups-for-elementor/#installation) * [ئىجادىيەت](https://ug.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/) تەكشۈرۈپ ياكى [RSS](https://plugins.trac.wordpress.org/log/device-mockups-for-elementor/?limit=100&mode=stop_on_copy&format=rss) ئارقىلىق [ئىجادىيەت خاتىرىسى](https://plugins.trac.wordpress.org/log/device-mockups-for-elementor/) گە مۇشتەرى بولغىلى بولىدۇ. ## ئۆزگىرىش خاتىرىسى #### 1.0.0 Initial release. ## Meta * Version **1.0.0** * ئاخىرقى يېڭىلانغان ۋاقىت **3 ھەپتە بۇرۇن** * ئاكتىپ ئورنىتىش سانى **10 دىن ئاز** * WordPress نەشرى ** 6.0 ياكى يۇقىرى ** * **7.1** دا سىنالغان * PHP نەشرى ** 8.0 ياكى يۇقىرى ** * تىل * [English (US)](https://wordpress.org/plugins/device-mockups-for-elementor/) * بەلگە * [browser mockup](https://ug.wordpress.org/plugins/tags/browser-mockup/)[device mockup](https://ug.wordpress.org/plugins/tags/device-mockup/) [elementor](https://ug.wordpress.org/plugins/tags/elementor/)[mockup](https://ug.wordpress.org/plugins/tags/mockup/) * [ئالىي كۆرۈنۈش](https://ug.wordpress.org/plugins/device-mockups-for-elementor/advanced/) ## دەرىجە No reviews have been submitted yet. [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)