{"id":104791,"date":"2023-02-21T17:46:04","date_gmt":"2023-02-21T12:16:04","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&amp;p=104791"},"modified":"2023-02-21T17:46:04","modified_gmt":"2023-02-21T12:16:04","slug":"connect-multiple-scrolling-device-mockups-in-elementor","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/connect-multiple-scrolling-device-mockups-in-elementor\/","title":{"rendered":"How to connect multiple scrolling device mockups in Elementor?"},"content":{"rendered":"\n<p>Having a scrolling device mockup on your website is a perfect way to show your portfolio or image gallery on your website. You could make this scrolling device mockup more dynamic by showing the image scrolling effect on multiple device mockups together. This way, you could show an entire responsive layout at once on multiple device mockups.<\/p>\n\n\n\n<p>With the Dynamic Device widget from The Plus Addons for Elementor you can interconnect multiple Dynamic Device widgets with an ID to create a simultaneous image scrolling effect on multiple device mockups.<\/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>To do this, add multiple Dynamic Device widgets on the page.&nbsp;<\/p>\n\n\n\n<p>Select one widget and from the <strong>Layout<\/strong> dropdown, choose <strong>Normal<\/strong>.<\/p>\n\n\n\n<p>After choosing the appropriate device type and mockup, go to <strong>Content <\/strong>and choose <strong>Image <\/strong>from the dropdown.<\/p>\n\n\n\n<p>Now add your image from the <strong>Media Image<\/strong> section.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"407\" height=\"574\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/dynamic-device-image.png\" alt=\"dynamic device image\" class=\"wp-image-104781\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/dynamic-device-image.png 407w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/dynamic-device-image-213x300.png 213w\" sizes=\"(max-width: 407px) 100vw, 407px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: Make sure to choose a tall vertical image for a good scrolling effect.<\/em> You can use this <a href=\"https:\/\/screenshot.guru\/\" target=\"_blank\" rel=\"noreferrer noopener\">Free tool<\/a> to capture long screenshots of website<\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p>Now go to <strong>Style<\/strong> &gt; <strong>Device Background<\/strong> and turn on the <strong>Scroll Image<\/strong> toggle. This will make your image scroll when someone hovers over it.<\/p>\n\n\n\n<p>You can adjust the image scroll speed from the <strong>Transition Duration<\/strong> section.<\/p>\n\n\n\n<p>Now in the <strong>Dynamic Device Connection ID<\/strong> field, add a unique id.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"300\" height=\"647\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/dynamic-device-scroll-image-connection-id.png\" alt=\"dynamic device scroll image connection id\" class=\"wp-image-104792\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/dynamic-device-scroll-image-connection-id.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/dynamic-device-scroll-image-connection-id-139x300.png 139w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: You have to use this same id on all the Dynamic Device widgets that you want to interconnect.<\/em>&nbsp;<\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p>Following the exact process, add content in the other Dynamic Device widgets on the page and use the same id in the <strong>Dynamic Device Connection ID <\/strong>field.<\/p>\n\n\n\n<p>Now all the Dynamic Device widgets with the same id are interconnected and if someone hovers over any device mockup, all the device mockups will show an image scrolling effect together.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1082\" height=\"625\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/multiple-scrolling-device-demo.gif\" alt=\"multiple scrolling device demo\" class=\"wp-image-104793\"\/><\/figure>\n\n\n\n<p>Check <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/live-website-in-mockup-using-iframes-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">how to show an iFrame inside a device mockup in Elementor<\/a>.<\/p>\n","protected":false},"author":16,"featured_media":104794,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[543,527],"class_list":["post-104791","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\/104791","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=104791"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/104791\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/104794"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=104791"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=104791"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}