Installing CoreKit for Oxygen Builder
1. Oxygen Builder
1. Please make sure you have installed and activated Oxygen Builder. You will need to navigate to Oxygen → Settings → Library → set 'Enable 3rd Party Design Sets' → Add Design Set → and paste in your CoreKit site key before clicking on 'Add Source Site'.
2. Core Framework
1. Please install and activate the Core Framework plugin. Make sure you have access to the CoreKit.core file as we will need to import this into Core Framework in step 3.
2. Next, kindly navigate to Core Framework → Addons and enter your license key for Oxygen Builder Core Framework add-on. Don't forget to hit 'Save Changes'.
3. Then, navigate to Core Framework → Manage Project. Here, you can import the CoreKit project file. Click 'Overwrite' and then 'Save Changes'.
2. Next, kindly navigate to Core Framework → Addons and enter your license key for Oxygen Builder Core Framework add-on. Don't forget to hit 'Save Changes'.
3. Then, navigate to Core Framework → Manage Project. Here, you can import the CoreKit project file. Click 'Overwrite' and then 'Save Changes'.
3. Import Global Styles
In order to streamline your setup, please copy the Global Styles for CoreKit from below so that the necessary styles are applied globally. You can do this by navigating to Oxygen Export & Import section under Oxygen from the WordPress dashboard.
Note: You can leave the 'Import Global Colors' box unchecked.
Note: You can leave the 'Import Global Colors' box unchecked.
Copy Minified JSON
Copied to Clipboard
{
"global_settings": {
"fonts": {
"Text": "Poppins",
"Display": "Poppins"
},
"scripts": {
"scroll_to_hash": "",
"scroll_to_hash_time": ""
},
"indicateParents": "true",
"classSuggestionsLimit": "30",
"headings": {
"H1": {
"font-size-unit": "px",
"font-size": "",
"font-weight": "600",
"color": "var(--text-title)"
},
"H2": {
"font-size-unit": "px",
"font-size": "",
"font-weight": "600",
"color": "var(--text-title)"
},
"H3": {
"font-size-unit": "px",
"font-size": "",
"font-weight": "600",
"color": "var(--text-title)"
},
"H4": {
"font-size-unit": "px",
"font-size": "",
"font-weight": "600",
"color": "var(--text-title)"
},
"H5": {
"font-size-unit": "px",
"font-size": "",
"font-weight": "600",
"color": "var(--text-title)"
},
"H6": {
"font-size-unit": "px",
"font-size": "",
"font-weight": "600",
"color": "var(--text-title)"
}
},
"body_text": {
"font-size-unit": " ",
"font-size": "var(--text-m)",
"font-weight": "300",
"line-height": "1.6",
"color": "var(--text-body)"
},
"links": {
"all": {
"color": "var(--primary)",
"font-weight": "",
"text-decoration": "none",
"hover_color": "var(--dark)",
"hover_text-decoration": ""
},
"text_link": {
"color": "",
"font-weight": "",
"text-decoration": "",
"hover_color": "",
"hover_text-decoration": ""
},
"link_wrapper": {
"color": "",
"font-weight": "",
"text-decoration": "",
"hover_color": "",
"hover_text-decoration": ""
},
"button": {
"border-radius-unit": " ",
"font-weight": "",
"border-radius": "var(--radius-m)"
}
},
"sections": {
"container-padding-top-unit": " ",
"container-padding-bottom-unit": " ",
"container-padding-left-unit": " ",
"container-padding-right-unit": " ",
"container-padding-top": "var(--space-2xl)",
"container-padding-bottom": "var(--space-2xl)",
"container-padding-left": "var(--space-s)",
"container-padding-right": "var(--space-s)"
},
"columns": {
"padding-top": "var(--space-s)",
"padding-top-unit": "",
"padding-bottom": "var(--space-s)",
"padding-bottom-unit": "",
"padding-left": "var(--space-s)",
"padding-left-unit": "",
"padding-right": "var(--space-s)",
"padding-right-unit": ""
},
"aos": {
"type": "",
"duration": "",
"easing": "",
"offset": "",
"delay": "",
"anchor-placement": "",
"once": "",
"mirror": "",
"disable": ""
},
"max-width": "1400",
"breakpoints": {
"tablet": "992",
"phone-landscape": "768",
"phone-portrait": "480"
}
}
}
"global_settings": {
"fonts": {
"Text": "Poppins",
"Display": "Poppins"
},
"scripts": {
"scroll_to_hash": "",
"scroll_to_hash_time": ""
},
"indicateParents": "true",
"classSuggestionsLimit": "30",
"headings": {
"H1": {
"font-size-unit": "px",
"font-size": "",
"font-weight": "600",
"color": "var(--text-title)"
},
"H2": {
"font-size-unit": "px",
"font-size": "",
"font-weight": "600",
"color": "var(--text-title)"
},
"H3": {
"font-size-unit": "px",
"font-size": "",
"font-weight": "600",
"color": "var(--text-title)"
},
"H4": {
"font-size-unit": "px",
"font-size": "",
"font-weight": "600",
"color": "var(--text-title)"
},
"H5": {
"font-size-unit": "px",
"font-size": "",
"font-weight": "600",
"color": "var(--text-title)"
},
"H6": {
"font-size-unit": "px",
"font-size": "",
"font-weight": "600",
"color": "var(--text-title)"
}
},
"body_text": {
"font-size-unit": " ",
"font-size": "var(--text-m)",
"font-weight": "300",
"line-height": "1.6",
"color": "var(--text-body)"
},
"links": {
"all": {
"color": "var(--primary)",
"font-weight": "",
"text-decoration": "none",
"hover_color": "var(--dark)",
"hover_text-decoration": ""
},
"text_link": {
"color": "",
"font-weight": "",
"text-decoration": "",
"hover_color": "",
"hover_text-decoration": ""
},
"link_wrapper": {
"color": "",
"font-weight": "",
"text-decoration": "",
"hover_color": "",
"hover_text-decoration": ""
},
"button": {
"border-radius-unit": " ",
"font-weight": "",
"border-radius": "var(--radius-m)"
}
},
"sections": {
"container-padding-top-unit": " ",
"container-padding-bottom-unit": " ",
"container-padding-left-unit": " ",
"container-padding-right-unit": " ",
"container-padding-top": "var(--space-2xl)",
"container-padding-bottom": "var(--space-2xl)",
"container-padding-left": "var(--space-s)",
"container-padding-right": "var(--space-s)"
},
"columns": {
"padding-top": "var(--space-s)",
"padding-top-unit": "",
"padding-bottom": "var(--space-s)",
"padding-bottom-unit": "",
"padding-left": "var(--space-s)",
"padding-left-unit": "",
"padding-right": "var(--space-s)",
"padding-right-unit": ""
},
"aos": {
"type": "",
"duration": "",
"easing": "",
"offset": "",
"delay": "",
"anchor-placement": "",
"once": "",
"mirror": "",
"disable": ""
},
"max-width": "1400",
"breakpoints": {
"tablet": "992",
"phone-landscape": "768",
"phone-portrait": "480"
}
}
}
4. Fluent Forms (optional)
Our sections sometimes use Fluent Forms as example contact forms/newsletter forms etc. and we also include CSS styling for those forms when you import them. Although you do not strictly need to use Fluent Forms, we do recommend it since it's free, and our examples already include them.
5. Finished
That's it! Now you can start importing sections from CoreKit! Simply navigate to Add Element → Library → Design Sets → CoreKit - CF, and simply choose a Page, Template or anything from the Sections & Elements area.