This page provides instructions for installing, configuring, and using the Device Wrapper WordPress plugin. The plugin enables users to wrap an image, video or iframe into a device mockup, providing a more professional and polished look to their content.
To install the Device Wrapper plugin, follow these steps:
The Device Wrapper plugin does not require any specific configuration. Once activated, the plugin adds a new shortcode to WordPress that can be used to wrap images, videos or iframes into device mockups. It also provides a custom block for Gutenberg editor and a custom widget for Elementor builder.
To use the Device Wrapper plugin, simply insert the
[device-wrapper] shortcode into any WordPress post or page. You can customize the shortcode by adding specific attributes, such as:
src– source of the content (image, video or iFrame) you want to wrap. Provide an URL or variable name, if the
methodattribute equals to
method– how to get the source (defaults to
src). Available options are:
src– simply get it from the src attribute,
post– the source located in the
$_POSTarray as variable. Provide a variable name in the
srcattribute [PRO VERSION ONLY];
get– the source located in the
$_GETarray as variable. Provide a variable name in the
srcattribute [PRO VERSION ONLY];
media_type– type of the content from the
srcattribute. Specify how to treat the content’s URL from the
srcattribute. Defaults to
image. The options are
device– type of device to use (defaults to
iphone_14_pro_v2). Available devices list:
iphone_14_pro_v2(another style of the device’s mockup)
fit– how the content should fit into the device (defaults to
cover). Available options are:
cover– cover the device’s screen;
overflow– keep original sizes of the content, if the are bigger than screen size – the content will overflow the screen with the ability to scroll it;
overflow-x– fit content by height, overflow by X axis;
overflow-y– fit content by width, overflow by Y axis;
contain– fit completely on the screen of the device.
link– an URL to open on a device’s content click. Leave blank if not required. Available for images only.
new_tab– to open the link in a new tab. Defaults to
width– devices width (number).
units– units of width (defaults to
px). You can provide
autoplay– autoplay video (only for video content). This will automatically mute the video, because browsers do not allow it to autoplay videos if they are not muted. Defaults to
autoplay_on_view– autoplay video only when it’s in the viewport (only for video content and autoplay equals
1). Defaults to
play_button– add play button (only for video content). Defaults to
controls– add video controls (only for video content). Defaults to
loop– loop video (only for video content). Defaults to
mute– disable video’s sound (only for video content). Defaults to
video_preview– an image for video placeholder (only for video content).
bg_color– color of the device’s screen. Defaults to
#000000(black color) [PRO VERSION ONLY].
device_color– custom border color of the device. By default it’s not provided [PRO VERSION ONLY].
anchor– custom HTML ID attribute (anchor) of the block.
class– custom HTML classes to add to the block.
For example, to wrap an image in an iPhone 14 Pro mockup, use the following shortcode:
[device-wrapper src="https://example.com/image.jpg" device="iphone_14_pro" bg_color="black"]
To wrap a YouTube video inside a device (for example Samsung Galaxy S23), use this shortcode:
[device-wrapper src="https://www.youtube.com/embed/TygEdHqk6OA" device="samsung_galaxy_s23" media_type="iframe" bg_color="black" width="400" units="px"]
The Device Wrapper plugin also provides a Gutenberg block that can be added to your posts and pages. Simply search for “Device Wrapper” in the Gutenberg editor and select the appropriate device type and other options.
Here’s a step-by-step guide of how to add a new Device Wrapper block to a WordPress site using the Gutenberg editor:
Step 1: Log in to your WordPress site
Log in to your WordPress site with your username and password.
Step 2: Create a new page or post
Create a new page or post by clicking on the “Add New” button in the top left-hand corner of the WordPress dashboard.
Step 3: Add a block
Once you’re in the editor, click on the plus sign icon in the top left-hand corner of the screen to add a new block.
Step 4: Choose the Device Wrapper block
Choose the Device Wrapper block under the “Media” category or use the search field to find it.
Step 5: Customize the block
Once you’ve added the block to your page or post, you can customize it by adding your own content (image, video or iframe). You can also adjust the block’s settings, such as its type of the device, size, colors etc. It provides the same options as shortcode, plus basic Gutenberg options such as HTML anchor and additional CSS classes.
Step 6: Save and publish
When you’re finished customizing your Device Wrapper block, click the “Save” or “Publish” button to save your changes and make your new block live on your WordPress site.
If your website uses Elementor builder, you can use the Device Wrapper widget on your page. It provides the same options as shortcode, plus basic options of Elementor’s widget.
Here’s a step-by-step guide on how to add a new Device Wrapper widget on WordPress site using Elementor builder: