{"id":356026,"date":"2026-08-21T05:12:19","date_gmt":"2026-08-21T05:12:19","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/arts-device-mockups-for-elementor\/"},"modified":"2026-08-21T06:50:50","modified_gmt":"2026-08-21T06:50:50","slug":"device-mockups-for-elementor","status":"publish","type":"plugin","link":"https:\/\/wordpress.org\/plugins\/device-mockups-for-elementor\/","author":23271239,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0.0","stable_tag":"1.0.0","tested":"7.1","requires":"6.0","requires_php":"8.0","requires_plugins":null,"header_name":"Arts Device Mockups for Elementor","header_author":"Artem Semkin","header_description":"Device mockups as a native Elementor widget: browser, laptop, tablet, phone, and bare frames for images, videos, and rotating galleries.","assets_banners_color":"cdccca","last_updated":"2026-08-21 06:50:50","external_support_url":"","external_repository_url":"","donate_link":"https:\/\/buymeacoffee.com\/artemsemkin","header_plugin_uri":"https:\/\/artemsemkin.com\/plugins\/device-mockups-for-elementor\/","header_author_uri":"https:\/\/artemsemkin.com","rating":0,"author_block_rating":0,"active_installs":0,"downloads":30,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"artemsemkin","date":"2026-08-21 06:50:50"}},"upgrade_notice":[],"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3658173,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3658173,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256},"icon.svg":{"filename":"icon.svg","revision":3658173,"resolution":false,"location":"assets","locale":false}},"assets_banners":{"banner-1544x500.jpg":{"filename":"banner-1544x500.jpg","revision":3658173,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.jpg":{"filename":"banner-772x250.jpg","revision":3658173,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3658173,"resolution":"1","location":"assets","locale":"","width":1520,"height":1520},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3658173,"resolution":"2","location":"assets","locale":"","width":1520,"height":1520},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3658173,"resolution":"3","location":"assets","locale":"","width":1520,"height":1520},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3658173,"resolution":"4","location":"assets","locale":"","width":1520,"height":1520},"screenshot-5.png":{"filename":"screenshot-5.png","revision":3658173,"resolution":"5","location":"assets","locale":"","width":1520,"height":1520}},"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."}},"plugin_section":[],"plugin_tags":[267267,216843,76538,23344,276747],"plugin_category":[],"plugin_contributors":[241532],"plugin_business_model":[],"class_list":["post-356026","plugin","type-plugin","status-publish","hentry","plugin_tags-browser-mockup","plugin_tags-device-mockup","plugin_tags-elementor","plugin_tags-mockup","plugin_tags-phone-mockup","plugin_contributors-artemsemkin","plugin_committers-artemsemkin"],"banners":{"banner":"https:\/\/ps.w.org\/device-mockups-for-elementor\/assets\/banner-772x250.jpg?rev=3658173","banner_2x":"https:\/\/ps.w.org\/device-mockups-for-elementor\/assets\/banner-1544x500.jpg?rev=3658173","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":"https:\/\/ps.w.org\/device-mockups-for-elementor\/assets\/icon.svg?rev=3658173","icon":"https:\/\/ps.w.org\/device-mockups-for-elementor\/assets\/icon.svg?rev=3658173","icon_2x":false,"generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/device-mockups-for-elementor\/assets\/screenshot-1.png?rev=3658173","caption":"Laptop: lid, camera, and base, all drawn in CSS, with your image on the screen."},{"src":"https:\/\/ps.w.org\/device-mockups-for-elementor\/assets\/screenshot-2.png?rev=3658173","caption":"Browser: a desktop window with traffic dots and a URL bar; the caption shows inside the bar."},{"src":"https:\/\/ps.w.org\/device-mockups-for-elementor\/assets\/screenshot-3.png?rev=3658173","caption":"Tablet in landscape with a uniform hairline bezel. One control flips it to portrait."},{"src":"https:\/\/ps.w.org\/device-mockups-for-elementor\/assets\/screenshot-4.png?rev=3658173","caption":"Phone: a portrait frame with a pill cutout."},{"src":"https:\/\/ps.w.org\/device-mockups-for-elementor\/assets\/screenshot-5.png?rev=3658173","caption":"The Device Mockup widget under the \"Arts\" category in the Elementor panel."}],"raw_content":"<!--section=description-->\n<p>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.<\/p>\n\n<p><a href=\"https:\/\/artemsemkin.com\/themes\/rhye\/?utm_source=wordpress.org&amp;utm_medium=referral&amp;utm_campaign=device-mockups-for-elementor\">\ud83c\udf10 Live Showcase<\/a><\/p>\n\n<p>The frames are drawn entirely in CSS. There are no mockup images to load and no external requests \u2014 frames stay sharp at any size, and every part of the device can take your own colors.<\/p>\n\n<p><strong>Five device frames<\/strong><\/p>\n\n<ul>\n<li><strong>Browser<\/strong> \u2014 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.<\/li>\n<li><strong>Laptop<\/strong> \u2014 a notebook frame with lid, camera, and base.<\/li>\n<li><strong>Tablet<\/strong> \u2014 portrait or landscape orientation.<\/li>\n<li><strong>Phone<\/strong> \u2014 a portrait phone frame with a pill cutout.<\/li>\n<li><strong>Bare<\/strong> \u2014 just the screen, with an adjustable corner radius.<\/li>\n<\/ul>\n\n<p><strong>Any screen content<\/strong><\/p>\n\n<ul>\n<li>An image in any registered size.<\/li>\n<li>Video: self-hosted, YouTube, or Vimeo \u2014 muted, looped, without player chrome, with a server-rendered poster.<\/li>\n<li>A rotating gallery that cycles on hover or automatically when scrolled into view, with your own interval and loop setting.<\/li>\n<\/ul>\n\n<p><strong>Behaviors and styling<\/strong><\/p>\n\n<ul>\n<li>Play video on hover only, or while the mockup is visible in the viewport.<\/li>\n<li>Scroll a tall screenshot inside the frame on hover.<\/li>\n<li>Per-device colors: body, screen, border, chrome, camera, traffic dots, URL bar.<\/li>\n<li>Aspect ratio (3:2, 4:3, 16:9, 1:1, 2:3, 9:16), object fit and position \u2014 responsive per breakpoint.<\/li>\n<li>Captions and descriptions pulled from the image's alt text, title, caption, or description \u2014 or custom text.<\/li>\n<li>Dynamic tags on media, link, and text fields. WPML-ready (caption, description, and URL bar text are translatable).<\/li>\n<\/ul>\n\n<p>Templates can be overridden from your theme: copy a template into <code>{your-theme}\/device-mockups\/<\/code>.<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Install and activate Elementor (the free version is fine).<\/li>\n<li>Install and activate Arts Device Mockups for Elementor.<\/li>\n<li>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.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"does%20it%20require%20elementor%20pro%3F\"><h3>Does it require Elementor Pro?<\/h3><\/dt>\n<dd><p>No. The free Elementor plugin (3.5 or newer) is enough. It works with Elementor Pro too.<\/p><\/dd>\n<dt id=\"does%20the%20plugin%20load%20anything%20from%20external%20servers%3F\"><h3>Does the plugin load anything from external servers?<\/h3><\/dt>\n<dd><p>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 \u2014 and only then.<\/p><\/dd>\n<dt id=\"are%20the%20device%20frames%20based%20on%20real%20products%3F\"><h3>Are the device frames based on real products?<\/h3><\/dt>\n<dd><p>No. All frames are generic, brand-neutral shapes drawn in CSS \u2014 no product images or logos.<\/p><\/dd>\n<dt id=\"where%20do%20i%20find%20the%20widget%3F\"><h3>Where do I find the widget?<\/h3><\/dt>\n<dd><p>In the Elementor editor, look for \"Device Mockup\" under the \"Arts\" category.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0.0<\/h4>\n\n<p>Initial release.<\/p>","raw_excerpt":"Device mockups as a native Elementor widget: browser, laptop, tablet, phone, and bare frames for images, videos, and rotating galleries.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/356026","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=356026"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/artemsemkin"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=356026"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=356026"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=356026"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=356026"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=356026"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=356026"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}