This documentation will show you how to install and use popups from the Oxidize Device Mockups Component Pack on a production website.

Note: The CSS used in this component pack is a modified version Devices.css.

How To Install

Hydrogen Pack

Hydrogen pack is a premium third party add-on for the Oxygen Builder, and you need to have it installed to use this method.

In the product download, open the Hydrogen Pack Copy-Paste.txt file. Copy all the shortcodes. Make a new page in Oxygen Builder, load the backend editor and paste (CTRL+V) into the page. All associated classes and elements will now be on your site.

You're good and installed. Now skip to "Part 3: Make Into A Reusable Part"

Default Method

The default installation method requires 2 steps.

Step 1: Import Classes

First go to your import/export tab on the Oxygen Builder on the website that you will be installing the device mockups to.

Copy all of the data in the Export field, and go to Paste it in and unminify the data. Also, backup all of this data.

Then, in your product download open the file titled “c-SHORTCODES-oxidize-component-DEVICE-MOCKUPS-main.txt”.

First, copy the custom everything in the custom classes section:

In the Unminified JSON, insert the data into the "classes object":

Everything highlighted is pasted in or added
Bottom of paste in

Note, that you'll need to add a comma after your last custom class if it exists. In the above image, there's no comma after the customclass2 element, in the next image there is one. Only the last custom class should have no comma.

Now, copy this code (everything from Unminfiy) into the import section of the import export page on oxygen builder. Then click the import button. be sure you have backed up by copying and pasting the original into a word document. If anything goes wrong, you can easily restore.

That concludes step one, which imports the custom classes directly into your oxygen builder website. now, it's time to import the actual elements. to do this, create a new page.

Step 2: Import Shortcodes

Save the new page as something titled temporary. We will be deleting this page after use. Then, copy and paste all of the oxygen shortcodes from the same document that contains the custom oxygen classes. This is all of the code in between: START OXYGEN BUILDER SHORTCODES and END OXYGEN BUILDER SHORTCODES.

On the new page, paste this into the shortcodes section.

Then click update. Once the page is updated, click edit with Oxygen.

Part 3: Make Into A Reusable Part

Select the device mockup that you would like to use globally throughout the website. then, make it into a reusable part by clicking on the pencil icon in the structure column, and selecting make reusable part.

To use this throughout your website, simply insert it as in editable reusable part.

For better performance, we recomend editing all of the associated CSS code out of the code block, and into a global stylesheet. Once you've done this, delete the Code Block.

How To Change Device Screens:

Because this pack uses native Oxygen Builder elements, it's super easy to change the screens. Just click on the placeholder image. "Change Me BG" should show in the settings panel. Be sure you've selected "id", then go to "Advanced" --> "Background", and change the background image.

For best results, be sure it matches the device aspect ratio, which is noted in the PHP/HMTL section of the code block for the specific mockup.