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.
Device Frame is a Pro feature. It requires Custom iFrame Pro (Starter, Studio, or Agency plan). View pricing — plans start at $29 one-time.
Requirements
- Custom iFrame Free plugin installed and active
- 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
Open your page in Elementor
Go to the page with the Custom iFrame widget. Click Edit with Elementor.
Enable Device Frame
Select the widget. In the Content tab, scroll to the Device Frame section. Toggle Device Frame to Yes.
Choose the device type
Select the device type from the dropdown: Desktop, MacBook, Tablet, or Phone.
Adjust the frame size
Adjust the width or height to fit your page layout.
Publish
Click Update or Publish. The embed now appears inside the selected device frame.
In Gutenberg
Open your page in the block editor
Go to the page with the Custom iFrame block. Click Edit.
Enable Device Frame
Select the block. In the right panel, scroll to the Device Frame section and toggle it on.
Choose the device type
Select the device type from the dropdown: Desktop, MacBook, Tablet, or Phone.
Adjust the frame size if needed
Resize the frame to match your page design.
Publish
Click Update or Publish. The embed appears inside the selected device frame.
The device frame is live. Visitors see the embedded content displayed inside the selected device mockup.
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
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.
Yes. Both are independent Pro features. Enable both on the same widget or block.
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.
No. Device Frame adds a CSS-based visual mockup around the iFrame. There are no additional image or script requests from the frame itself.
Related Guides
Last updated 1 day ago
Built with Documentation.AI