> For the complete documentation index, see [llms.txt](https://docs.customiframe.com/llms.txt).
> Use it to discover all available pages before exploring further.

# Device Frame Display

Display any embedded iFrame inside a device mockup in Elementor and Gutenberg using Custom iFrame Pro.


## Overview

Custom iFrame Device Frame displays any embedded content inside a device mockup on your page. Choose from Desktop, MacBook, Tablet, or Phone frames to present the embedded content as it appears on real devices.

Custom iFrame is a WordPress plugin by CoderzStudio that embeds 100+ external sources in Elementor and Gutenberg without writing any code.

<Callout kind="info">
  Device Frame is a Pro feature. It requires Custom iFrame Pro (Starter, Studio, or Agency plan). [View pricing](https://customiframe.com/pricing) — plans start at $29 one-time.
</Callout>

## Requirements

- [Custom iFrame Free plugin installed and active](/getting-started/installation)
- Custom iFrame Pro plugin installed and active
- WordPress with Elementor or the Gutenberg block editor

## Use Cases

Device Frame is useful when the context of the embed matters visually:

- **SaaS product demos:** Show your app inside a MacBook or desktop frame on a landing page
- **Mobile app showcases:** Display a mobile web app inside a phone frame
- **Portfolio presentations:** Present a client website inside a browser frame
- **Responsive design examples:** Show the same site in both phone and desktop frames on the same page

## Available Device Frames

| Frame | Best for |
|---|---|
| Desktop | Web dashboards, landing pages, SaaS apps |
| MacBook | Portfolio sites, product showcases |
| Tablet | Responsive demos, tablet-targeted apps |
| Phone | Mobile apps, mobile-first websites |

## How to Enable Device Frame

### In Elementor

<Steps>
  <Step title="Open your page in Elementor" icon="layout" title-type="p">
    Go to the page with the Custom iFrame widget. Click **Edit with Elementor**.
  </Step>
  <Step title="Enable Device Frame" icon="monitor" title-type="p">
    Select the widget. In the **Content** tab, scroll to the **Device Frame** section. Toggle **Device Frame** to **Yes**.
  </Step>
  <Step title="Choose the device type" icon="smartphone" title-type="p">
    Select the device type from the dropdown: **Desktop**, **MacBook**, **Tablet**, or **Phone**.
  </Step>
  <Step title="Adjust the frame size" icon="move" title-type="p">
    Adjust the width or height to fit your page layout.
  </Step>
  <Step title="Publish" icon="check" title-type="p">
    Click **Update** or **Publish**. The embed now appears inside the selected device frame.
  </Step>
</Steps>

### In Gutenberg

<Steps>
  <Step title="Open your page in the block editor" icon="layout" title-type="p">
    Go to the page with the Custom iFrame block. Click **Edit**.
  </Step>
  <Step title="Enable Device Frame" icon="monitor" title-type="p">
    Select the block. In the right panel, scroll to the **Device Frame** section and toggle it on.
  </Step>
  <Step title="Choose the device type" icon="smartphone" title-type="p">
    Select the device type from the dropdown: **Desktop**, **MacBook**, **Tablet**, or **Phone**.
  </Step>
  <Step title="Adjust the frame size if needed" icon="move" title-type="p">
    Resize the frame to match your page design.
  </Step>
  <Step title="Publish" icon="check" title-type="p">
    Click **Update** or **Publish**. The embed appears inside the selected device frame.
  </Step>
</Steps>

<Callout kind="success">
  The device frame is live. Visitors see the embedded content displayed inside the selected device mockup.
</Callout>

## Tips

- **Pair with the phone frame for mobile apps:** Set height to match common phone aspect ratios (e.g., 780px for portrait mode).
- **Center the frame on the page:** Use alignment settings to center the device frame inside its section.
- **Combine with Watermark:** Use both Device Frame and Custom Watermarks on the same embed to present branded content inside a device mockup.

## FAQ

<ExpandableGroup>
  <Expandable title="Does Device Frame work with all embed types?" default-open="false">
    Yes. Device Frame wraps the iFrame in a visual mockup. The embedded content loads as usual inside the frame. It works with any URL or embed type.
  </Expandable>
  <Expandable title="Can I use Device Frame and Custom Watermarks at the same time?" default-open="false">
    Yes. Both are independent Pro features. Enable both on the same widget or block.
  </Expandable>
  <Expandable title="The device frame looks too large on mobile. How do I fix it?" default-open="false">
    Set the frame width using % instead of a fixed pixel value. In Elementor, use the responsive controls for tablet and mobile breakpoints to reduce the size on smaller screens.
  </Expandable>
  <Expandable title="Does Device Frame affect page load speed?" default-open="false">
    No. Device Frame adds a CSS-based visual mockup around the iFrame. There are no additional image or script requests from the frame itself.
  </Expandable>
</ExpandableGroup>

---

## Related Guides

- [Set Up Custom iFrame in Elementor](/getting-started/elementor-setup)
- [Set Up Custom iFrame in Gutenberg](/getting-started/gutenberg-setup)
- [Custom Watermarks](/features/custom-watermarks)
- [3D Flipbook PDF Viewer](/features/3d-flipbook-pdf)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)