{"id":104786,"date":"2023-02-21T17:42:01","date_gmt":"2023-02-21T12:12:01","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&p=104786"},"modified":"2023-06-06T16:39:17","modified_gmt":"2023-06-06T11:09:17","slug":"website-scrolling-device-mockup-in-elementor","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/website-scrolling-device-mockup-in-elementor\/","title":{"rendered":"How to add website scrolling device mockup in Elementor?"},"content":{"rendered":"\n

The importance of having an eye-catching website cannot be overstated. It can make or break your online presence and can be the difference between success and failure. With the help of image scroll elements, your website can have a modern, interactive look that will draw the eye of visitors and keep them engaged.<\/p>\n\n\n\n

With the scrolling device mockup where you can add an image scrolling effect inside a device mockup to showcase your portfolio or image gallery in an interactive way.<\/p>\n\n\n\n

With the Dynamic Device widget from The Plus Addons for Elementor, you can make beautiful device scrolling mockups for your WordPress website.<\/p>\n\n\n\n

To check the complete feature overview documentation of The Plus Addons for Elementor Dymanic Device widget, click here<\/a>.<\/em><\/p>\n\n\n\n

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.<\/em><\/strong><\/p>\n\n\n\n

\n
LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n

<\/p>\n\n\n\n

To do this, add the widget on the page and from the Layout dropdown, choose Normal<\/strong>.<\/p>\n\n\n\n

After choosing the appropriate device type and mockup, go to Content <\/strong>and choose Image <\/strong>from the dropdown.<\/p>\n\n\n\n

Now add your image from the Media Image<\/strong> section.<\/p>\n\n\n\n

\"dynamic<\/figure>\n\n\n\n
\n

Note: Make sure to choose a tall vertical image for a good scrolling effect.<\/em> You can use this Free tool<\/a> to capture long screenshots of website<\/p>\n<\/blockquote>\n\n\n\n

<\/p>\n\n\n\n

Now go to Style<\/strong> > Device Background<\/strong> and turn on the Scroll Image<\/strong> toggle. This will make your image scroll when someone hovers over it.<\/p>\n\n\n\n

You can adjust the image scroll speed from the Transition Duration<\/strong> section.<\/p>\n\n\n\n

\"dynamic<\/figure>\n\n\n\n

If you want to add a manual scroll instead of scrolling on mouse hover for your image, you can do that by turning on the Manual Scroll<\/strong> toggle.<\/p>\n\n\n\n

Now you should have a beautiful image scrolling effect inside a device mockup.<\/p>\n\n\n\n

\"scrolling<\/figure>\n\n\n\n

Also, learn how to connect scrolling device mockups in Elementor<\/a>.<\/p>\n","protected":false},"author":16,"featured_media":104789,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[543,527],"class_list":["post-104786","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\/104786","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=104786"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/104786\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/104789"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=104786"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=104786"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}