{"id":104770,"date":"2023-02-21T17:17:43","date_gmt":"2023-02-21T11:47:43","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&amp;p=104770"},"modified":"2023-02-21T17:17:43","modified_gmt":"2023-02-21T11:47:43","slug":"elementor-templates-inside-a-device-mockup","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/elementor-templates-inside-a-device-mockup\/","title":{"rendered":"How to show Elementor Templates inside a Device Mockup?"},"content":{"rendered":"\n<p>With the Dynamic Device widget from The Plus Addons for Elementor you can use Elementor Templates as the content inside your mockup device. With this method, you can show different types of content like video, products or even complex layouts and allow users to directly interact with your content within the mockup device.<\/p>\n\n\n\n<p>For example, if you want to show your layout in a responsive mode, you can create a template accordingly and display it inside a mobile mockup making it easier for users to check the layout.<\/p>\n\n\n\n<p><em>To check the complete feature overview documentation of The Plus Addons for Elementor Dymanic Device widget, <a href=\"\/docs\/dynamic-device-elementor-widget-settings-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">click here<\/a>.<\/em><\/p>\n\n\n\n<p><strong><em>Requirement&nbsp; &#8211; This widget is a part of The Plus Addons for Elementor, make sure its installed &amp; activated to enjoy all its powers.<\/em><\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-fill\"><a class=\"wp-block-button__link has-nxt-global-color-8-color has-nxt-global-color-1-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/widgets\/device-dynamic?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" style=\"border-radius:5px\" target=\"_blank\" rel=\"noreferrer noopener\">LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>So to use an Elementor template in your device mockup, first, you have to create and save the template in Elementor.<\/p>\n\n\n\n<p>Then add the widget on the page, make sure to set the <strong>Layout<\/strong> to <strong>Normal<\/strong> and after choosing the appropriate device type and mockup, go to <strong>Content <\/strong>and choose <strong>Template<\/strong> from the dropdown.<\/p>\n\n\n\n<p>After that, choose your Elementor template from the <strong>Elementor Templates<\/strong> dropdown.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"436\" height=\"636\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/dynamic-device-template.png\" alt=\"dynamic device template\" class=\"wp-image-104771\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/dynamic-device-template.png 436w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/dynamic-device-template-206x300.png 206w\" sizes=\"(max-width: 436px) 100vw, 436px\" \/><\/figure>\n\n\n\n<p>Now your Elementor template will show inside your device mockup and your users can interact with the content as well.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1177\" height=\"889\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/dynamic-device-template-demo.gif\" alt=\"dynamic device template demo\" class=\"wp-image-104772\"\/><\/figure>\n\n\n\n<p>Also learn <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/device-slider-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">how to create a Device Slider in Elementor<\/a>.<\/p>\n","protected":false},"author":16,"featured_media":104780,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[543,527],"class_list":["post-104770","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-dynamic-device","docs-plus-widgets"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/104770","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=104770"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/104770\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/104780"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=104770"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=104770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}