FUSION BUILDER LIVE  Compatibility Underway!

Ticket Support Hours: Monday-Friday 9am-5pm Eastern
Please note ticket response may take up to 24-hours.

Okay
  Print

Home    Articles    Device Mockup - Image, Video & Website Preview

Documentation: Device Mockup - Image, Video & Website Preview

Table of Contents

  1. Software Requirements
  2. Recommended PHP Configuration Limits
  1. Installation
  2. Registration
  3. User Guide

i. Software Requirements

  • WordPress 4.6 or higher
  • PHP 5.3 or higher (5.6 recommended)
  • MySQL 5.6 or higher

ii. Recommended PHP Configurations Limits

  • max_execution_time 180
  • memory_limit 128M
  • post_max_size 32M
  • upload_max_filesize 32M

1. Installation

  1. Download the plugin from your CodeCanyon "Downloads" page
  2. Open WordPress, go to plugins, then "Add New"
  3. Click "Upload Plugin"
  4. Upload the plugin .ZIP downloaded from CodeCanyon, then click "Install Now"
  5. Activate the plugin.
  6. Go to Fusion Builder > Settings
  7. Make sure the "ArcticLune Device Mockup" element is checked. Click Save Settings.

The element will now be available to add to your pages!

2. Registration

To enable updates including new features and bug fixes, you’ll need to register the plugin. 

After the plugin is activated in the WordPress plugin list, a notification bar will appear near the top of the screen with registration instructions. Once that process is complete, plugin updates will be activated. 

If for whatever reason the notification bar does not show up, you can also register by clicking "Registration" underneath the plugin name. This registration link will only show up if the plugin is activated. 

You can check for updates by going to the WordPress plugin list, and clicking "Check for updates" below the plugin description. 

3. User Guide

This element is designed to be used with the Fusion Builder page builder interface. 

Quick Start Guide

  1. Click the "+ Element" button, then "ArcticLune Device Mockup"
  2. Open the element's settings.
  3. Use the fields provided to set the content, device type, and customize other settings as needed.
  4. Click "Save" to apply the changes
  5. Update the page and view it to see the results!

Sizing note: the Device Mockup is responsive, and will scale to fit the width of its container.

Set the Mockup Content

  1. Open the element's settings.
  2. Under the "General" tab, set the "Content Type" dropdown to the desired content.
  3. Set the following field to the image, website, or video to be displayed.
  4. Click "Save" to apply the changes
  5. Update the page and view it to see the results!

Set the Device Type

  1. Open the element's settings.
  2. Under the "General" tab, set the "Device Type" to the desired device.
    • NOTE: You can also choose a custom device that isn't listed.
    • Upload a custom PNG image with the inner area transparent.
    • Set the "Device Viewport Offset" fields as a percentage that the viewport is from each edge of the image.
  3. Click "Save" to apply the changes
  4. Update the page and view it to see the results!

Set a Custom Overlay Color

  1. Open the element's settings.
  2. Under the "Design" tab, set the "Overlay Color" to the to a color with some transparency.
  3. Click "Save" to apply the changes
  4. Update the page and view it to see the results!

Responsive behavior

Sizing note: the device mockup is responsive, and will scale to fit the width of its container on smaller screen sizes.