Image and Videos Device Mockups for WPBakery Page Builder

Device Mockups for WPBakery Page Builder

(formerly Visual Composer)

macbook background

Tons of Mockup Designs to Choose From

Showcase your products in high resolution with Device Mockups for WPBakery Page Builder. Wrap your images or videos in mockups for different graphics for phones, laptops, and browsers.

iphone_6 background
 
iphone_6plus background
 
iphone_6plus background
 
iphone_6plus background
 
ipad background
 

Highly Flexible & Customizable

Take your pick from over 40 types of browser and device mockups, each with different designs you can choose from. Change your device mockup’s color and style – the choice is yours.

We Simplify.

browser background

We don’t like complicating things, so adding in images with Device Mockups for WPBakery Page Builder is as easy as pie. Just select an image or video ID (Youtube or Vimeo), and the plugin does the rest for you.

browser background

The mockups for the videos – not just images – have tons of options as well. For instance, you can set the videos on autoplay, and you can wrap different kinds of mockups around them, too.

Check out all of our Device Mockups below

iPhone

iphone background
 
iphone background
 
iphone background
 
iphone background
 
iphone background
 

iPhone 6

iphone_6 background
 
iphone_6 background
 
iphone_6 background
 
iphone_6 background
 
iphone_6 background
 
iphone_6 background
 

iPhone 6 plus

iphone_6plus background
 
iphone_6plus background
 
iphone_6plus background
 
iphone_6plus background
 
iphone_6plus background
 
iphone_6plus background
 

Ipad

ipad background
 
ipad background
 
ipad background
 
ipad background
 

iMac

imac background
 
imac background
 
imac background
 
imac background
 

Macbook

macbook background
 
macbook background
 
macbook background
 
macbook background
 
macbook background
 

Lumia 930

lumia_930 background
 
lumia_930 background
 
lumia_930 background
 
lumia_930 background
 
lumia_930 background
 

Galaxy S5

galaxy_s5 background
 
galaxy_s5 background
 
galaxy_s5 background
 
galaxy_s5 background
 
galaxy_s5 background
 
galaxy_s5 background
 

HTC One M8

htc_one_m8 background
 
htc_one_m8 background
 
htc_one_m8 background
 
htc_one_m8 background
 
htc_one_m8 background
 
htc_one_m8 background
 
htc_one_m8 background
 

Shortcode for Non-WPBakery Page Builder Users

[screen_mockup type='image' image_id='1' device='iphone-flat-white']
[screen_mockup type='video-youtube' video_id='XXXXXX' device='macbook-flat-silver']
Parameter Required Type Default Description
type text image The type of mockup to display, this can either be ‘image’, ‘video-youtube’ or ‘video-vimeo’
image_id Y number The attachment ID of your image. This will be placed inside your mockup if the ‘type’ parameter is ‘image’
video_id Y text The ID of your YouTube or Vimeo video. You can get the ID of your video from the URL. For example:

  • https://www.youtube.com/watch?v=XXXXXXXXX
  • http://vimeo.com/XXXXXXXXX

The XXXX is your video ID

device text browser-flat-silver The device to display your image in. The value can be:

  • browser-flat-silver
  • browser-flat-white
  • browser-flat-black
  • iphone-flat-white
  • iphone-flat-black
  • iphone-flat-gold
  • iphone-outline-white
  • iphone-outline-black
  • ipad-flat-white
  • ipad-flat-black
  • ipad-outline-white
  • ipad-outline-black
  • imac-flat-silver
  • imac-flat-white
  • imac-flat-black
  • imac-outline-white
  • imac-outline-black
  • macbook-flat-silver
  • macbook-flat-white
  • macbook-flat-black
  • macbook-outline-white
  • macbook-outline-black
size number 200 The size of your loupe in pixels
orientation text portrait The orientation of the selected device. Only applies for iPhone and iPad mockups.
rotated text By default, mockup devices are displayed standing up for portrait, or rotated to the left for landscape. Put “rotated” if you want to flip the device. Only applies to iPhone and iPad mockups.
opacity number 1.0 For outlined mockup devices, you can change the opacity of the outline. Values here can be 0.0 to 1.0.
display_area text full This is used if you want to display only part of the mockup. Great for displaying only the top part of the device for fancier layouts. When displaying only partial mockups, the visible mockup will still stretch to fill up the container, so your image would show up larger.
display_offset number 50 When displaying only a partial mockup, this is the percentage amount to push or offset the mockup. The value can be from 0 (no offset) to 75 (show 1/4 of the device).
horizontal_offset number 0 This field allows you to pull your mockup to the left or push it to the right. Enter a negative value to pull the mockup to the left, and a positive value to push it to the right (in pixels).
el_class text If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.

Image Parameters

These parameters only applies when the type parameter is image

Parameter Required Type Default Description
link text Enter a URL here to make your image mockup into a link
newwindow text Put “newwindow” in this to open the link above in a new window

Video Parameters

These parameters only applies when the type parameter is video-youtube or video-vimeo

Parameter Required Type Default Description
hidecontrols text Put “hidecontrols” to hide the video controls for YouTube videos
autoplay text Put “autoplay” and your video will play automatically once loaded
video_horizontal_fix number 0 If you’re getting horizontal black bars in your video, you can widen the video to make the viewable area larger. Enter here a percentage value from 0 to 50.
video_vertical_fix number 0 If you’re getting vertical black bars in your video, you can increase the height of the video to make the viewable area larger. Enter here a percentage value from 0 to 50.