---
title: "How to show Elementor Templates inside a Device Mockup?"
url: https://theplusaddons.com/docs/elementor-templates-inside-a-device-mockup/
date: 2023-02-21
modified: 2026-09-19
lang: en
author: "Aditya Sharma"
description: "Instead of dropping a flat screenshot into a device frame, the Dynamic Device widget can put a real Elementor template inside it — headings, buttons and links all still working...."
image: https://theplusaddons.com/wp-content/uploads/2023/02/How-to-show-Elementor-Templates-inside-a-Device-Mockup-1024x536.jpg
word_count: 887
---

# How to show Elementor Templates inside a Device Mockup?

## 

- Dynamic Device renders a real Elementor template inside a device frame, so headings, buttons, and links still work and the button is clickable.
- The Plus Addons for Elementor Pro ships Dynamic Device only in Pro, and Elementor (free) must be installed and active before it renders.
- Content > Content sets the widget to Template, and the Elementor Templates dropdown picks a saved template from Templates > Saved Templates or Create Template.
- Desktop Device offers exactly one frame, iMac Minimal (1000px x 565px), while Custom mockups need a PNG with the screen cut out or the content stays invisible.

Instead of dropping a flat screenshot into a device frame, the **Dynamic Device** widget can put a real Elementor template inside it — headings, buttons and links all still working.

That means the mockup on your page is the design itself, so when you change the template the mockup changes with it, and visitors can click what is inside the screen.

***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.***

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

## Before You Start

- **Edition:** **Pro** — **Dynamic Device** ships only in The Plus Addons for Elementor Pro. With Pro deactivated the widget does not render at all, and there is no free version of it.- **Prerequisite:** [Elementor](https://wordpress.org/plugins/elementor/) (free) installed and active.- **Widget to enable:** go to **The Plus Addons > Widgets**, search for **Dynamic Device** and turn its toggle on.- **Prerequisite:** an **Elementor template** saved and published first, under **Templates > Saved Templates** or with the **Create Template** button inside the widget's **Elementor Templates** control.

## Put a template inside a mockup

- Edit your page with Elementor and drag the **Dynamic Device** widget onto the layout.- In **Content > Content**, leave **Layout** on **Normal**. The **Template** content type is not available in the **Special Carousel** layout.- Pick a **Type** — **Mobile**, **Tablet**, **Laptop**, **Desktop** or **Custom** — then choose a frame in the dropdown that appears below it, for example **iPhone X Black (320px x 672px)**.- Set **Content** to **Template**.- In the **Elementor Templates** dropdown, choose the template you saved. The **Edit Template** and **Create Template** buttons beside it take you to that template, or make a new one, without leaving the widget.

![The Dynamic Device widget](https://theplusaddons.com/wp-content/uploads/2026/09/dynamicdevice-content.webp)

The template renders inside the device screen straight away. Design the template to the proportions of the frame you picked — each frame's option label carries its pixel size.

## Settings that matter here

| Setting | Where | What it does |
| ------- | ----- | ------------ |
| **Content** | Content > Content | Set it to **Template**. The default is **Image**. |
| **Elementor Templates** | Content > Content | Which saved template renders inside the screen. Nothing is selected by default. |
| **Show Icon** | Content > Icon Options | Off by default. Turn it on to reveal **Upload Icon** and place a small badge on the mockup. This section is available with Template content. |
| **Width Adjust(%)** | Style > Device Layout | Scales the whole mockup down from 100% to as little as 10%. |
| **Alignment** | Style > Device Layout | Left, Center or Right. The default is **Center**. |
| **On Hover Scroll** | Style > Template | A hover scroll for template content, with its own **Transition Duration**. See **Not verified** below. |

## How It Behaves

- **The template renders live, not as a picture.** A test template containing a heading and a button was placed inside an iPhone X Black frame; the real heading text and the real button appeared inside the screen, and the button was clickable.- **It updates with the template.** Because the widget renders the saved template itself, editing that template changes every mockup that uses it.- **It is a Normal-layout feature.** The **Content** dropdown, and so the **Template** option, only exists while **Layout** is **Normal**.

![An Elementor template rendered inside a phone mockup - the heading and the button are live and clickable.](https://theplusaddons.com/wp-content/uploads/2026/09/dynamicdevice-result-template.webp)

Here is the same idea on the front end, as a visitor sees it:

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

## Limitations

- **You must save the template first.** The **Elementor Templates** dropdown lists templates that already exist; there is nothing to pick on a fresh site until you save one.- **The widget tells you when the template is missing.** With no template chosen it renders a **Select Template** notice in place of the content, and a template that is not published renders an **Unauthorized Access** message instead.- **The template has to fit the screen you picked.** The frame does not reflow your template — a wide desktop template inside a phone frame will be cramped. Match the template's design to the pixel size in the frame's name.- **A Custom mockup hides your content unless its screen area is transparent.** The frame image is drawn over the content, so an ordinary opaque JPEG shows only itself — the image, template or page behind it is completely invisible. Use a PNG with the screen cut out. Nothing in the editor warns you about this.- **Desktop has exactly one frame.** **Desktop Device** offers **iMac Minimal (1000px x 565px)** and nothing else, so there is no choice to make there.

## Not verified

So you know exactly what has and has not been checked:

- **On Hover Scroll for Template content.** The template equivalent of the image scroll effect was not exercised.- **Show Icon and Upload Icon.** The icon overlay was not exercised on the front end.- **Responsive behaviour.** Nothing was measured at tablet or mobile breakpoints, and the responsive **Width Adjust(%)** and **Transition Duration** values were not exercised.- **The Select Template and Unauthorized Access messages.** These come from the widget's code; only the working case, with a published template selected, was rendered and checked.

## Troubleshooting

### The screen says Select Template

No template is chosen. Open **Content > Content** and pick one in the **Elementor Templates** dropdown, or use **Create Template** to make one.

### The screen says Unauthorized Access

The template you chose is not published. Open it from **Templates > Saved Templates** and publish it, then reload the page.

### The Template option is missing from the Content dropdown

**Layout** is set to **Special Carousel**. Switch it back to **Normal** — the carousel takes a gallery of images, not a template.

## Related Docs

- [Dynamic Device Elementor Widget Settings Overview](https://theplusaddons.com/docs/dynamic-device-elementor-widget-settings-overview/)- [How to show a live website in a mockup using iframes in Elementor?](https://theplusaddons.com/docs/live-website-in-mockup-using-iframes-in-elementor/)- [How to add website scrolling device mockup in Elementor?](https://theplusaddons.com/docs/website-scrolling-device-mockup-in-elementor/)