‘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.
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.
This is going to insert the opening and closing shortcodes for Macbook pro.
Now put your cursor before [/device] shortcode and insert the screenshot image using ‘Add Media’ button (the same old way ). That’s it.
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:
MARKDOWN_HASHa72e413c574dabbdee47268139377cd5MARKDOWN_HASHThere Are More Custom Parameters:
- color: black/white
- orientation: portrait/landscape
- stacked: open/closed
- position: left/right
- link