How To Mockup Device Images In WordPress?

‘Mockup’ term is generally used in manufacturing and designs, it is a scale or full-size model of a design or device, used for teaching, demonstration, promotion etc. By mocking-up images in WordPress you can display them on poular computing devices, smartphones and tablets. For Example: You can generate an image showing the mobile version of your website inside Macbook Pro, Samsung Galaxy or Nexus.

Device Mockups is an awesome WordPress plugin which provides you a collection of shortcodes to display screenshots, photos, videos, text or any content within a responsive mobile, tablet or computing device.

Mockup 2

It also provides you a TinyMCE shortcode generator button added in your WordPress visual editor, using this button you can easily generate shortocdes for iPhone 5, iPad, iMac, Macbook Pro, Galaxy s3, Nexus, Surface and Lumia 920.

How To Use Device Mockups In WordPress?

Install and activate Device Mockups plugin. Upon activation, the plugin adds its TinyMCE shortcode generator in WordPress visual editor (present in ADD NEW/EDIT content screens).

Clicking the button dropsdown a list of devices you can choose from.

For Example: Showing Your Website’s Screenshot In Macbook Pro

Suppose you want to show your website’s screenshot inside Macbook Pro:

Click the dropdown TinyMCE button and select Macbook Pro.

How To Mockup Images On Popular Devices In WordPress?

This is going to insert the opening and closing shortcodes for Macbook pro.

How To Mockup Images On Popular Devices In WordPress? 1

Now put your cursor before [/deviceshortcode and insert the screenshot image using ‘Add Media’ button (the same old way ). That’s it.

How To Mockup Images On Popular Devices In WordPress? 2

Preview your post and you will be seeing the inserted image inside Macbook pro screen.

In the same way, you can insert and display anything like a photo, video or any other content type on all popular mobile & computing devices.

Recommended Photo Sizes:

[list icon=”icon: check-circle” icon_color=”#2da2bf”]
  • iPhone 5 – 640×1136
  • iPad – 2048×1536
  • iMac – 1920×1200
  • Macbook Pro (Retina) – 1440×900
  • Galaxy S3 – 720×1280
  • Nexus 7 – 1920×1200
  • Surface – 1920 x 1080
  • Lumia 920 – 768 x 1280

How To Stack Devices (On Over The Other)?

The plugin also allows you device stacking, you can stack  devices on top of each other by adding stacked=”open” to the first device and stacked=”closed” to the last.


You will be need to apply position of the inner device using position=”left” or position=”right”.

For Example:


There Are More Custom Parameters:

  • color: black/white
  • orientation: portrait/landscape
  • stacked: open/closed
  • position: left/right
  • link

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.