Step by step guide to work with OxyMade!
First of all thanks for purchasing OxyMade. Please follow this step by step guide to get started with us in the best and easiest way.
1. Download and install our OxyMonster Plugin
If you have the access, you can download our plugin from this link: OxyMonster Framework
You can check the license key for the plugin and the download link as shown in the image below.
Now copy the license key and upload the zip file in the Wordpress admin plugins area and activate the plugin.
2. Activate the license & Install the base framework
Now click on OxyMonster Framework menu link in the Wordpress admin panel and go to license tab to verify the license with the license key you got in the step 1. Click save changes and after the license key is saved, click on Activate license to verify the license.
Once the license is activated, just go to the welcome tab to install the base framework.
Base Framework is what you need in most of the cases.
Note: If you are installing our framework in a fresh new site, we recommend you to click on Import global colors as well. If not, or if you want to use your own global color settings or if you have already created global colors for your website. Please proceed to "Install the base framework" button without Import global colors checkbox on.
Now click on Install Base Framework Button to install our framework to start working with our design kits.
By now, you have successfully installed our base framework selectors and the style sheets you need to get started with our framework.
Note: If you are working on a fresh new website without any design kit, now you can start working with creating designs as you want with our utility classes. But if you want to use one of our design kits to kick start your website designing process, You can go ahead and read rest of the article.
3. Working with our design kits
Our design kit is very well organized and designined using the OxyMonster Framework and with specific design guidelines to make your designs look more professional and beautiful.
You can check our design kit in the Dashboard
to get access to them.
From the dashboard page, you can click on leftside menu items to go to the particular design set page to get access to them for your domains.
If you have access to the kit, you will see an input box to add your domain. Once you add the domain (without https only https domains work, no trailing slashes) click submit. You will get the license key to use in the Oxygen builder to get access to that kit for the domain you have submitted.
You can Enable/Disable/Delete the domain access using the options provided in the Manage kit page.
Just copy the license key you have got from the above steps. And go to your Oxygen settings -> Library page to add our design kit to your Oxygen Builder.
Click on Enable 3rd party Design Sets and click on Add Design Set link to add the license key.
Add the license key you got from our manage kit page and click on submit button.
You have successfully added our design kit to your website. Now you can access our blocks in the Oxygen Builder in a regular Oxygen way, as you normally access any other design kit.
4. Use our Page builder to quickly proto type pages
We have rebuilt our app with a new light weight code to make it fast, easy, accessible. You can select the category of blocks and simply drag n drop blocks from the left side area to right side area and once you are done with building a page you want, you can simply copy and paste in your Oxygen editor.
To make the copy paste work, you have to add our design kit key in your Oxygen library and also install, activate our framework plugin, so that paste option will be appeared in the editor.
1. Blocks area. You have to drag blocks from here to right side area.
2. Categories side bar -> You have to select a category to browse all the blocks from that category.
3. Tags top bar -> Tags are quick way to select all the blocks with a particular characteristics.
4. Toggle -> By clicking on this toggle button, you can maximize/minimize the preview area to see how the page looks.
5. Preview button -> Click on this button to see the live preview of the page.
6. Copy button -> Once you are done with composing the page, you can simply click on copy to copy the page and paste it in the editor.
7. Preview area -> This is where we need to drop blocks from the left side area.
8. Help drop down -> clicking on this button will give you a list of links to check when you need some help with our blocks/framework/builder.
9. Blocks count -> Number of blocks we have in each category.
How to paste in Oxygen bulder -> Now go to your Oxygen builder and click on the above Paste button to paste the block in your builder. (To make it work, you need to add our design kit inside your oxygen install & also install and activate our framework plugin)
5. Use our live preview tool to check our blocks and copy them
With our live preview tool, you can check all our blocks by category wise and check how responsive they are. Once you get the block you want, you can simply copy the block by clicking on copy button above the block.
1. You can check how responsive our blocks are by clicking on these SM, MD, LG, XL, FULL buttons.
2. Once you got the block you want, you can simply click on copy button to copy the block in your clipboard.
3. Now go to your Oxygen builder and click on the below Paste button to paste the block in your builder. (To make it work, you need to add our design kit inside your oxygen install & also install and activate our framework plugin)
6. You can use our blocks directly inside Oxygen Editor
Now you can access our blocks in the Oxygen Builder in a regular Oxygen way, as you normally access any other design kit.
If you have any doubts while designing with our utility classes, you can check our cheatsheet
Happy building beautiful websites 👍 🥳