Required Setup<\/h2>\n\n\n\n\n- Elementor FREE Plugin<\/a> installed & activated.<\/li>\n\n\n\n
- You need to have The Plus Addons for Elementor<\/a> plugin installed and activated.<\/li>\n\n\n\n
- This is a Premium widget, and you need the PRO version of The Plus Addons for Elementor<\/a>.<\/li>\n\n\n\n
- Make sure the Dynamic Device widget is activated, to verify this, visit Plus Settings \u2192 and Search for Dynamic Device and activate.<\/li>\n<\/ul>\n\n\n\n
How to Activate the Dynamic Device Widget?<\/h2>\n\n\n\n
Go to <\/p>\n\n\n\n
\n- The Plus Settings <\/strong>\u2192 Plus widgets <\/strong><\/li>\n\n\n\n
- Search <\/strong>the widget name <\/strong>and turn on the toggle <\/strong>then <\/strong>click Save.<\/strong><\/li>\n<\/ul>\n\n\n\n
![\"dynamic](\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/dynamic-device-activate.png\")
<\/figure>\n\n\n\nKey Features<\/h2>\n\n\n\n\n- Different types of content <\/strong> – You can show different types of content like Image, Elementor Template and iFrame.<\/li>\n\n\n\n
- Multiple layouts<\/strong> – You can either show your content in a static mockup or a slider.<\/li>\n\n\n\n
- Multiple device options <\/strong>– You can choose from multiple device options or you can add your custom mockup as well.<\/li>\n\n\n\n
- Image scrolling effect<\/strong> – Easily create an image scrolling effect inside a device mockup<\/a>.<\/li>\n\n\n\n
- Manual scrolling<\/strong> – You can also add a manual scrolling effect to your image.<\/li>\n\n\n\n
- Dynamic Device Connection ID<\/strong> – You can connect multiple Dynamic Device widgets<\/a> to create a simultaneous scrolling effect.<\/li>\n<\/ul>\n\n\n\n
How to add content in the Dynamic Device Widget in Elementor?<\/h2>\n\n\n\n
Once you add the Dynamic Device widget on the page, you\u2019ll see a mockup device. <\/p>\n\n\n\n
In the Layout dropdown, you\u2019ll find two options – <\/p>\n\n\n\n
Normal<\/strong> – For creating a normal mockup layout.<\/p>\n\n\n\nSpecial Carousel<\/strong> – This option lets you create a slider inside the mockup. Learn more about the process<\/a>.<\/p>\n\n\n\n![\"dynamic](\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/dynamic-device-layout-demo.gif\")
<\/figure>\n\n\n\nWhen you set the layout to Normal, from the Type<\/strong> section, you can choose different device types like Mobile, Tablet, Laptop, Desktop or you can even upload a custom mockup.<\/p>\n\n\n\nDepending on the device type, you\u2019ll get to choose relevant device mockups from the Device<\/strong> dropdown.<\/p>\n\n\n\nThen from the Content<\/strong> dropdown, you\u2019ll have to choose the content type, here you\u2019ll find three options –<\/p>\n\n\n\nImage<\/strong> – With this option, you can directly add an image as the content of your mockup. You can add a link to your image that can be opened in a normal browser or in a popup. Using this method, you can even create a scrolling image effect inside the mockup. Learn more about the process<\/a>.<\/p>\n\n\n\nTemplate<\/strong> – This is a very powerful option, using this method, you can add different types of content like video, products or even an entire layout inside the mockup. Learn more about it<\/a>.<\/p>\n\n\n\nIFrame<\/strong> – If you want to show a third party website inside your mockup, you can use this option. Learn the process<\/a>.<\/p>\n\n\n\nWith the Image and Elementor Template content type, you can add an icon to your mockup from the Icon Options<\/strong> tab.<\/p>\n\n\n\nHow to style Dynamic Device in Elementor?<\/h2>\n\n\n\n
If you want to adjust the styling of your mockup content, you can do that from the Style tab. Depending on the choice of the Layout and Content type, styling options will vary.<\/p>\n\n\n\n
Layout Type – Normal<\/strong><\/h4>\n\n\n\n![\"dynamic](\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/dynamic-device-style.png\")
<\/figure>\n\n\n\nIcon Options<\/strong> – If you have added an icon to your mockup, you\u2019ll get this option. From here, you can adjust the icon size, add animation to the icon etc.<\/p>\n\n\n\nDevice Layout<\/strong> – From this tab, you can adjust the mockup layout width, alignment, padding and margin.<\/p>\n\n\n\nDevice Background<\/strong> – From this tab, you can add a drop shadow effect to your content, but for the Image content type only, you can add a scrolling effect, set transition duration, add manual scrolling, adjust image width etc. <\/p>\n\n\n\nYou can also connect multiple Dynamic Device widgets from this section. Learn more about the process<\/a>.<\/p>\n\n\n\nImage<\/strong> – If you have set an image as the content type, then you\u2019ll see this option. From here, you can adjust the image border radius.<\/p>\n\n\n\nImage Scrolling Bar<\/strong> – If you\u2019ve turned on the Manual Scroll option from the Device Background tab, then you\u2019ll see this option. From here, you can adjust different parts of the scroll bar style. <\/p>\n\n\n\nTemplate<\/strong> – This option is only visible if you\u2019ve set Template as the content type. From here, you can adjust the content position within the mockup and add a scrolling effect on mouse hover. <\/p>\n\n\n\nLayout Type – Special Carousel<\/strong><\/h4>\n\n\n\n![\"dynamic](\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/dynamic-device-carousel-style.png\")
<\/figure>\n\n\n\nCarousel Options<\/strong> – From this tab, you can choose the carousel columns to be Single Slide or Multiple, make the carousel autoplay, turn it into an infinite loop slider, adjust the carousel speed and add carousel navigation dots and arrows.<\/p>\n\n\n\nCarousel Slide<\/strong> – From here, you can adjust slide gap, space, margin, carousel width, mockup width, mockup height, mockup offset, mockup Z-Index and adjust the slide opacity and scale for both normal and hover states.<\/p>\n\n\n\nCarousel Dots<\/strong> – If you\u2019ve turned on the Dots<\/strong> navigation option from the Carousel Options<\/strong> tab, then you\u2019ll get this option. From here, you can adjust the dot navigation size, colour, gap and position for both normal and active states.<\/p>\n\n\n\nCarousel Arrows<\/strong> – If the Arrows<\/strong> navigation option is enabled from the Carousel Options<\/strong> tab, then you\u2019ll see this option. From here, you can manage the arrow navigation colour, background, border, gap, position, icon size etc. <\/p>\n\n\n\nDevice Layout<\/strong> – From this tab, you can adjust the mockup layout width, alignment, padding and margin.<\/p>\n\n\n\nDevice Background<\/strong> – From here, you can add a box shadow to your content.<\/p>\n\n\n\nImage<\/strong> – From this tab, you can adjust the image border radius, height, width, position, Z-Index etc.<\/p>\n\n\n\nOn Scroll View Animation<\/strong> – This is our global extension available for all our widget, this adds scrolling animation as the widget comes in viewport.<\/p>\n\n\n\n
How to Activate the Dynamic Device Widget?<\/h2>\n\n\n\n
Go to <\/p>\n\n\n\n
- \n
- The Plus Settings <\/strong>\u2192 Plus widgets <\/strong><\/li>\n\n\n\n
- Search <\/strong>the widget name <\/strong>and turn on the toggle <\/strong>then <\/strong>click Save.<\/strong><\/li>\n<\/ul>\n\n\n\n
<\/figure>\n\n\n\nKey Features<\/h2>\n\n\n\n
- \n
- Different types of content <\/strong> – You can show different types of content like Image, Elementor Template and iFrame.<\/li>\n\n\n\n
- Multiple layouts<\/strong> – You can either show your content in a static mockup or a slider.<\/li>\n\n\n\n
- Multiple device options <\/strong>– You can choose from multiple device options or you can add your custom mockup as well.<\/li>\n\n\n\n
- Image scrolling effect<\/strong> – Easily create an image scrolling effect inside a device mockup<\/a>.<\/li>\n\n\n\n
- Manual scrolling<\/strong> – You can also add a manual scrolling effect to your image.<\/li>\n\n\n\n
- Dynamic Device Connection ID<\/strong> – You can connect multiple Dynamic Device widgets<\/a> to create a simultaneous scrolling effect.<\/li>\n<\/ul>\n\n\n\n
How to add content in the Dynamic Device Widget in Elementor?<\/h2>\n\n\n\n
Once you add the Dynamic Device widget on the page, you\u2019ll see a mockup device. <\/p>\n\n\n\n
In the Layout dropdown, you\u2019ll find two options – <\/p>\n\n\n\n
Normal<\/strong> – For creating a normal mockup layout.<\/p>\n\n\n\n
Special Carousel<\/strong> – This option lets you create a slider inside the mockup. Learn more about the process<\/a>.<\/p>\n\n\n\n
<\/figure>\n\n\n\nWhen you set the layout to Normal, from the Type<\/strong> section, you can choose different device types like Mobile, Tablet, Laptop, Desktop or you can even upload a custom mockup.<\/p>\n\n\n\n
Depending on the device type, you\u2019ll get to choose relevant device mockups from the Device<\/strong> dropdown.<\/p>\n\n\n\n
Then from the Content<\/strong> dropdown, you\u2019ll have to choose the content type, here you\u2019ll find three options –<\/p>\n\n\n\n
Image<\/strong> – With this option, you can directly add an image as the content of your mockup. You can add a link to your image that can be opened in a normal browser or in a popup. Using this method, you can even create a scrolling image effect inside the mockup. Learn more about the process<\/a>.<\/p>\n\n\n\n
Template<\/strong> – This is a very powerful option, using this method, you can add different types of content like video, products or even an entire layout inside the mockup. Learn more about it<\/a>.<\/p>\n\n\n\n
IFrame<\/strong> – If you want to show a third party website inside your mockup, you can use this option. Learn the process<\/a>.<\/p>\n\n\n\n
With the Image and Elementor Template content type, you can add an icon to your mockup from the Icon Options<\/strong> tab.<\/p>\n\n\n\n
How to style Dynamic Device in Elementor?<\/h2>\n\n\n\n
If you want to adjust the styling of your mockup content, you can do that from the Style tab. Depending on the choice of the Layout and Content type, styling options will vary.<\/p>\n\n\n\n
Layout Type – Normal<\/strong><\/h4>\n\n\n\n
<\/figure>\n\n\n\nIcon Options<\/strong> – If you have added an icon to your mockup, you\u2019ll get this option. From here, you can adjust the icon size, add animation to the icon etc.<\/p>\n\n\n\n
Device Layout<\/strong> – From this tab, you can adjust the mockup layout width, alignment, padding and margin.<\/p>\n\n\n\n
Device Background<\/strong> – From this tab, you can add a drop shadow effect to your content, but for the Image content type only, you can add a scrolling effect, set transition duration, add manual scrolling, adjust image width etc. <\/p>\n\n\n\n
You can also connect multiple Dynamic Device widgets from this section. Learn more about the process<\/a>.<\/p>\n\n\n\n
Image<\/strong> – If you have set an image as the content type, then you\u2019ll see this option. From here, you can adjust the image border radius.<\/p>\n\n\n\n
Image Scrolling Bar<\/strong> – If you\u2019ve turned on the Manual Scroll option from the Device Background tab, then you\u2019ll see this option. From here, you can adjust different parts of the scroll bar style. <\/p>\n\n\n\n
Template<\/strong> – This option is only visible if you\u2019ve set Template as the content type. From here, you can adjust the content position within the mockup and add a scrolling effect on mouse hover. <\/p>\n\n\n\n
Layout Type – Special Carousel<\/strong><\/h4>\n\n\n\n
<\/figure>\n\n\n\nCarousel Options<\/strong> – From this tab, you can choose the carousel columns to be Single Slide or Multiple, make the carousel autoplay, turn it into an infinite loop slider, adjust the carousel speed and add carousel navigation dots and arrows.<\/p>\n\n\n\n
Carousel Slide<\/strong> – From here, you can adjust slide gap, space, margin, carousel width, mockup width, mockup height, mockup offset, mockup Z-Index and adjust the slide opacity and scale for both normal and hover states.<\/p>\n\n\n\n
Carousel Dots<\/strong> – If you\u2019ve turned on the Dots<\/strong> navigation option from the Carousel Options<\/strong> tab, then you\u2019ll get this option. From here, you can adjust the dot navigation size, colour, gap and position for both normal and active states.<\/p>\n\n\n\n
Carousel Arrows<\/strong> – If the Arrows<\/strong> navigation option is enabled from the Carousel Options<\/strong> tab, then you\u2019ll see this option. From here, you can manage the arrow navigation colour, background, border, gap, position, icon size etc. <\/p>\n\n\n\n
Device Layout<\/strong> – From this tab, you can adjust the mockup layout width, alignment, padding and margin.<\/p>\n\n\n\n
Device Background<\/strong> – From here, you can add a box shadow to your content.<\/p>\n\n\n\n
Image<\/strong> – From this tab, you can adjust the image border radius, height, width, position, Z-Index etc.<\/p>\n\n\n\n
On Scroll View Animation<\/strong> – This is our global extension available for all our widget, this adds scrolling animation as the widget comes in viewport.<\/p>\n\n\n\n
- Multiple layouts<\/strong> – You can either show your content in a static mockup or a slider.<\/li>\n\n\n\n
- Search <\/strong>the widget name <\/strong>and turn on the toggle <\/strong>then <\/strong>click Save.<\/strong><\/li>\n<\/ul>\n\n\n\n