Blog
Free design resources & fresh perspectives

Flat Device Mockups, a free WordPress plugin


The presentation of your work is a crucial component that is often under estimated. Well presented mockups are able to capitalize on the work itself and give your portfolio a more polished feel.

Often, after having spent hours upon hours finally finishing a project, little energy and time is left over to put into the your mockups. That is exactly why we created this plugin. You can easily create clean, presentable mockups on the fly, all you need is a screenshot of your work.

Using a WordPress shortcode, you can choose to display your work in the following flat browser & device mockups: safari, iphone, ipad, and macbook. You can also set a link, change the color, change the orientation, set a max width, and more. The shortcode will output fluid, 100% CSS3 devices that adapt perfectly to any screen size. Heard enough? Download the plugin.

Examples


[fdm_device type="iphone" orientation="landscape" max_width="500"]

[fdm_device type="iphone" max_width="250"]

[fdm_device color="black" orientation="landscape" max_width="500"]

[fdm_device link="https://twitter.com/RypePixel" color="black" max_width="250"]


[fdm_device type="ipad" color="black"]


[fdm_device type="macbook"]


[fdm_browser]

All Options

[fdm_device]
  • type (iphone, ipad, macbook)
  • color (white, black)
  • orientation (portrait, landscape)
  • src
  • link
  • max_width
  • shadow (true, false)
[fdm_browser]
  • type (safari)
  • src
  • link
  • max_width
  • shadow (true, false)


This plugin was super fun to build and we’ll be tacking on new features very soon! We’d love to hear any suggestions/feedback from you. Just comment below or email us at hello@rypecreative.com. Download the plugin for free below. Enjoy!

DOWNLOAD PLUGIN

Leave a Reply

Your email address will not be published. Required fields are marked *

Click to view available HTML tags and attributes
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


We make websites that allow room for growth and customization. Have a project in mind? Get in touch with us today.

CONTACT US
2017 Rype Creative.