2014-07-15_0953

Ever wondered how to advertise a content on your website as responsive? With the Device Mockups plugin your search will meet the answer. The plugin will basically display any content you would like to on a portable mobile device on your website directly so your user can check out how the responsive content will be displayed on device for example.

How to install the plugin?

The plugin installation is fairly simple and by following the next few steps you will be able to install the plugin with few clicks.

Step 1: Access your WordPress admin area

Step 2: Access the plugin adding page (wp-admin -> Plugins -> Add new)

Step 3: Search for the “Device Mockups” plugin

Step 4: Click the Install button

Step 5: Activate the plugin

Once the installation process finishes there will be no additional menu added to your admin area neither you will be able to find any particular settings for this plugin which makes the plugin really convenient for use.

How does the plugin do the magic?

In order to use the plugin you will need to simply use a Shortcode near the content you would like displayed as responsive in device frame.

Here is an example of a Shortcode usage:

[device type=”macbook” stacked=”open”]CONTENT[/device][device type=”iphone5″ position=”right” stacked=”closed”]CONTENT[/device]

Please replace the CONTENT strings from the above Shortode snippet with actual content you would like to have displayed in responsive mobile frame such as iPhone, iPad or some other from the supported devices.

2014-07-18_2209

The above provided Shortcode will add 2 devices to the post you are inserting that Shortcode. The first device will be MacBoook and the second device will be iPhone 5. Here is the complete list of supported devices and their Shortcodes:

  • iPhone5

[device type=”iphone5″]

iPhone Content

[/device]

  • iPad

[device type=”ipad”]

iPad Content

[/device]

  • iMac

[device type=”imac”]

iPhone Content

[/device]

  • MacBook

[device type=”macbook”]

iPhone Content

[/device]

  • Galaxy S3

[device type=”s3″]

iPhone Content

[/device]

  • Nexus 7

[device type=”nexus7″]

iPhone Content

[/device]

  • Surface

[device type=”surface”]

iPhone Content

[/device]

  • Lumia 920

[device type=”lumia920″]

iPhone Content

[/device]

The devices can be positioned based on different options. For example the alignment of a device can be either left or right. This is achieved with the position=”left” or  position=”right” Shortcode added to the [device]  tag.

In order to make the displayed device appearing at the top of the other devices please add stacked=”closed” to the [device] tag. If you would like for the device to be displayed bellow the other devices such as the MacBook or the iMac devices please use the stacked=”open” code added to the [devices] tag.

2014-07-18_2218

 

We hope that this plugin will serve you well and you will be able to build even more beautiful responsive previews.