---
title: "Dynamic Device Elementor Widget Settings Overview"
url: https://theplusaddons.com/docs/dynamic-device-elementor-widget-settings-overview/
date: 2023-02-21
modified: 2026-04-12
author: "Aditya Sharma"
description: "Creating a strong online presence is an essential part of any successful business. Creating an attractive and effective portfolio can make a huge difference in the success of your business...."
image: https://theplusaddons.com/wp-content/uploads/2023/02/Dynamic-Device-Elementor-Widget_-Settings-Overview-1024x536.jpg
word_count: 1074
---

# Dynamic Device Elementor Widget Settings Overview

## Key Takeaways

- Dynamic Device widget from The Plus Addons for Elementor showcases content like images and videos inside device mockups.
- Multiple layouts are available in the Dynamic Device widget, including static mockups and sliders.
- Users can select from various device types such as Mobile, Tablet, Laptop, and Desktop for their mockups.
- The Dynamic Device widget allows for a manual scrolling effect and a simultaneous scrolling effect when connecting multiple widgets.

Creating a strong online presence is an essential part of any successful business. Creating an attractive and effective portfolio can make a huge difference in the success of your business. It’s an opportunity to showcase your work, demonstrate your skills and create a positive first impression for potential employers and clients.

Showing your work inside a device mockup can be a great way to showcase your work. If you are creating a website or an app, showing people how it would actually look inside a device rather than just letting them guess can be a difference maker.

The Dynamic Device widget from The Plus Addons for Elementor is a highly versatile widget that lets you easily show different elements like images, videos or an entire webpage inside various device mockups.

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/dynamic-device-mockups/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Required Setup

- [Elementor FREE Plugin](https://wordpress.org/plugins/elementor/) installed & activated.

- You need to have [The Plus Addons for Elementor](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) plugin installed and activated.

- This is a Premium widget, and you need the [PRO version of The Plus Addons for Elementor](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text).

- Make sure the Dynamic Device widget is activated, to verify this, visit The Plus Addons → Widgets → and Search for Dynamic Device and activate.

## How to Activate the Dynamic Device Widget?

Go to 

- **The Plus Addons **→** Widgets **

- **Search **the widget name** **and** turn on the toggle.**

![](https://theplusaddons.com/wp-content/uploads/2023/02/dynamic-device.png)

## Key Features

- **Different types of content ** - You can show different types of content like Image, Elementor Template and iFrame.

- **Multiple layouts** - You can either show your content in a static mockup or a slider.

- **Multiple device options **- You can choose from multiple device options or you can add your custom mockup as well.

- **Image scrolling effect** - Easily [create an image scrolling effect inside a device mockup](https://theplusaddons.com/docs//website-scrolling-device-mockup-in-elementor/).

- **Manual scrolling** -  You can also add a manual scrolling effect to your image.

- **Dynamic Device Connection ID** - You can [connect multiple Dynamic Device widgets](https://theplusaddons.com/docs//connect-multiple-scrolling-device-mockups-in-elementor/) to create a simultaneous scrolling effect.

## How to add content in the Dynamic Device Widget in Elementor?

Once you add the Dynamic Device widget on the page, you’ll see a mockup device. 

In the Layout dropdown, you’ll find two options - 

**Normal** - For creating a normal mockup layout.

**Special Carousel** - This option lets you create a slider inside the mockup. [Learn more about the process](https://theplusaddons.com/docs//device-slider-in-elementor/).

![dynamic device layout demo](https://theplusaddons.com/wp-content/uploads/2023/02/dynamic-device-layout-demo.gif)

When you set the layout to Normal, from the **Type** section, you can choose different device types like Mobile, Tablet, Laptop, Desktop or you can even upload a custom mockup.

Depending on the device type, you’ll get to choose relevant device mockups from the **Device** dropdown.

Then from the **Content** dropdown, you’ll have to choose the content type, here you’ll find three options -

**Image** - 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](https://theplusaddons.com/docs//website-scrolling-device-mockup-in-elementor/).

**Template** - 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](https://theplusaddons.com/docs//elementor-templates-inside-a-device-mockup/).

**IFrame** - If you want to show a third party website inside your mockup, you can use this option. [Learn the process](https://theplusaddons.com/docs/live-website-in-mockup-using-iframes-in-elementor/).

With the Image and Elementor Template content type, you can add an icon to your mockup from the **Icon Options** tab.

## How to style Dynamic Device in Elementor?

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.

#### Layout Type - Normal

![dynamic device style](https://theplusaddons.com/wp-content/uploads/2023/02/dynamic-device-style.png)

**Icon Options** - If you have added an icon to your mockup, you’ll get this option. From here, you can adjust the icon size, add animation to the icon etc.

**Device Layout** - From this tab, you can adjust the mockup layout width, alignment, padding and margin.

**Device Background** - 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. 

You can also connect multiple Dynamic Device widgets from this section. [Learn more about the process](https://theplusaddons.com/docs//connect-multiple-scrolling-device-mockups-in-elementor/).

**Image** - If you have set an image as the content type, then you’ll see this option. From here, you can adjust the image border radius.

**Image Scrolling Bar** - If you’ve turned on the Manual Scroll option from the Device Background tab, then you’ll see this option. From here, you can adjust different parts of the scroll bar style.  

**Template** - This option is only visible if you’ve 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. 

#### Layout Type - Special Carousel

![dynamic device carousel style](https://theplusaddons.com/wp-content/uploads/2023/02/dynamic-device-carousel-style.png)

**Carousel Options** - 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.

**Carousel Slide** - 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.

**Carousel Dots** - If you’ve turned on the **Dots** navigation option from the **Carousel Options** tab, then you’ll get this option. From here, you can adjust the dot navigation size, colour, gap and position for both normal and active states.

**Carousel Arrows** - If the **Arrows** navigation option is enabled from the **Carousel Options** tab, then you’ll see this option. From here, you can manage the arrow navigation colour, background, border, gap, position, icon size etc. 

**Device Layout** - From this tab, you can adjust the mockup layout width, alignment, padding and margin.

**Device Background** - From here, you can add a box shadow to your content.

**Image** -  From this tab, you can adjust the image border radius, height, width, position, Z-Index etc.

**On Scroll View Animation** -  This is our global extension available for all our widget, this adds scrolling animation as the widget comes in viewport.

[Learn more about On Scroll View Animation](https://theplusaddons.com/docs//on-scroll-view-animation/)

Advanced options remain common for all our widget, you can explore all it options from here.

[View Advanced tab tutorial.](https://docs.posimyth.com/tpae/advanced-tab/)

## Frequently Asked Questions

**Q: Why isn't the Dynamic Device widget showing up in Elementor?**
A: If the Dynamic Device widget isn't visible, ensure that both the Elementor FREE Plugin and The Plus Addons for Elementor are installed and activated. Additionally, verify that the widget is activated by navigating to The Plus Addons u2192 Widgets and searching for 'Dynamic Device'. If it's not toggled on, it won't appear in your Elementor interface.

**Q: What are the best practices for styling the Dynamic Device widget?**
A: When styling the Dynamic Device widget, consider the layout type you choose. For a Normal layout, you can adjust the mockup's width, alignment, and padding from the Device Layout tab. If you're using a Special Carousel layout, explore the Carousel Options for settings like autoplay and slide spacing. Proper styling enhances visual appeal and user engagement.

**Q: How do I create a scrolling effect inside the Dynamic Device mockup?**
A: To create a scrolling effect, select the Image content type and enable the scrolling option in the Device Background tab. This allows you to set transition durations and manual scrolling, enhancing the interactivity of your mockup. This feature can significantly improve user experience by making the content more dynamic.

**Q: Are there limitations to the types of content I can display in the Dynamic Device widget?**
A: The Dynamic Device widget supports various content types, including images, Elementor templates, and iFrames. However, the functionality may vary depending on the content type selected. For instance, certain styling options are only available when using images or templates. Understanding these limitations helps in planning your design effectively.

**Q: How can I connect multiple Dynamic Device widgets for simultaneous scrolling?**
A: To connect multiple Dynamic Device widgets, use the Dynamic Device Connection ID feature. This allows you to synchronize scrolling across different mockups, creating a cohesive visual effect. This is particularly useful for presentations or showcasing related content side by side. For more details, check the guide on [connecting multiple scrolling device mockups](https://theplusaddons.com/docs//connect-multiple-scrolling-device-mockups-in-elementor/).