Introduction

An OxyProps context menu offers buttons to insert CSS variables and CSS keywords in the Oxygen lineheight input field.

What is OxyProps?

OxyProps is a powerful plugin that revolutionizes your WordPress design workflow by integrating modern CSS custom properties, custom elements, and productivity features directly into your page builder.

OxyProps or BricksProps?

Two names, one plugin. OxyProps was first developped for Oxygen Builder, and therefore named OxyProps. When it was later made compatible with Bricks, some users were annoyed by the name, so to bring their smile, the plugin renames itself in WordPress based on the page builder used. It also loads the appropriate CSS and Javascript files. So, if you use Oxygen Builder, you’ll see OxyProps in your WordPress admin, and if you use Bricks, you’ll see BricksProps, but it is the same plugin.

Key Features

Powerful CSS Framework — Create beautiful and consistent designs with OxyProps’ modern CSS custom properties and utility classes.
Streamlined Workflow — Save time and effort with OxyProps’ smart context menus that make it easy to add props and classes to your elements.
Customizable Elements — Build your site faster and with more flexibility using OxyProps’ library of custom elements and structure builder.

Supported page builders

When you install OxyProps on your WordPress site, the plugin’s stylesheets are loaded, making the OxyProps CSS properties and utility classes available for any site builder that accepts custom classes and CSS properties.

However, OxyProps was particularly designed for and supports Oxygen Builder and Bricks Builder. When you use OxyProps with one of these supported page builders, you gain access to builder enhancements that can speed up your workflow.

Bricks
Oxygen

Preview of the OxyProps tracking context menu in Bricks editor.

Start building with OxyProps

To start building with OxyProps, simply jump right in and add some props, classes, and elements to your site! Here are some examples of what you can do:

🏗️ Add a light & dark modes toggle to your site.
🏗️ Create your first Layout.

Learn OxyProps

To learn more about building your site with OxyProps, here are some resources to get you started:

📽 Watch this video to install and setup OxyProps.
📽 Learn about OxyProps color schemes.
📽 Explore OxyProps’s RAM layout system.

Join our Community

Join the OxyProps Discord server and the Facebook Users Group to share and get help from an active, friendly community!

💬 Say hi in our #general channel!

💬 Ask a question in our #help channel!

💬 Share what you’ve been working on in our #showcase channel!

Learn More

Stay up to date with the latest news and tips on using OxyProps by checking out our YouTube channel. You can also view our changelog to see what’s new in the latest version.

OxyProps Youtube channel

OxyProps changelog