Give more power to your layouts with CSS Grid!

Add components to be grid parents and children
Edit advanced controls for grid styles
Create responsive grid layouts

Grid Controls is a standalone WordPress plugin that extends Oxygen Builder. Both WordPress and Oxygen are needed to use Grid Controls. Editor Enhancer is not included, nor is it required for use of Grid Controls.

How It Works

Grid Controls adds grid inputs and buttons functionality to many components in Oxygen Builder's advanced tabs. Some can be grid parents, others grid children. DIVs are special, as they can be either.

Components for Grid Parent

DIVs

Repeaters

Modals

Tab Content

Components for Grid Child

DIVs

Headings

Text Blocks

Rich Text

Text Link

Link Wrappers

Buttons

Images

Videos

Use with Dashboard Customizer

If you're using Dashboard Customizer to build awesome dashboard interfaces, use Grid Controls to position admin widgets as grid children:

At a Glance widget
Recent Posts widget
Future Posts widget
Admin Link Wrapper

Grid Controls buttons and panels.

Limited Time Discount

Get access to the only plugin for Oxygen Builder that lets you build with standardized CSS Grid controls. Create complex layouts in a flash. Change layouts for different devices. This deal won't last long.

Grid Controls is a standalone WordPress plugin that extends Oxygen Builder. Both WordPress and Oxygen are needed to use Grid Controls. Editor Enhancer is not included, nor is it required for use of Grid Controls.

Grid Controls

$45

$35

one time

Lifetime updates

Unlimited websites

7-Day money back guarantee

Frequently Asked Questions

Yes, this section uses CSS Grid with Grid Controls!

How do I activate my license key?

Grid Controls avoids top level menu items in WP Admin. Instead, you will find the link to the home and license pages within the Oxygen top level menu.

Does Grid Controls have any settings?

No. Grid Controls does not have any settings to worry about. Once your license key is activated, you can load up Oxygen's editor and get started straight away.

Is this plugin like OxyNinja Core?

No. While the result is similar, the process is vastly different.

Core provides pre-determined class names and hierarchy - much like Bootstrap - which requires setup and adds to the learning curve. There are many different class names to memorize throughout a complex hierarchy that can be used together to achieve the result you want. See for yourself from their documentation.

In contrast, Grid Controls adds standard Oxygen controls in standard Oxygen panels. This allows you to decide for yourself where and how to apply grid settings. Whether that's on ID, class, pseudo, or media break point is up to you. Further, you can be as specific as you'd like to be. There are no limitations.

What about Microthemer?

Microthemer has a great UI/UX for handling CSS Grid. However, Grid Controls is developed specifically for Oxygen, and thus integrates and builds CSS within Oxygen's framework.

Does this plugin require Editor Enhancer?

No. This is a standalone add-on plugin for Oxygen. Oxygen provides a separate interface for grid options, which is used a little differently.

What limitations are there?

CSS Grid can become pretty complex with advanced layouts, so the decision was made to use simple text inputs for the controls. This means you can type literally anything you want and it will be output in your CSS along with everything else.

For example, one user asked the following, to which the answer is YES. However, semi-colons ( ; ) should not be included.

Will it work if I write that for the grid-template-columns ?
repeat(auto-fit, minmax(250px ,1fr));

Best Practices

Maybe you are a pro with CSS Grid. Maybe not. Either way, this is the best method for getting started with Grid Controls.

The best part is that grid is easy to learn and fun to play around with, especially with these new controls in Oxygen!

1

Create the Grid Parent

Grid parents contain the items to be positioned by Grid Controls. The components available to be grid parents are DIVs, repeaters, modals, and tab contents.

DIVs are special and unique; they are the only component that can be either a parent, a child, or both simultaneously.

2

Add basic styles to the Parent

Based on your personal preferences, add basic styles like width (e.g. 100%). Then, set up your grid and gaps with the Grid Parent Controls.

3

Create your Child Components

Add your direct child components from the list of components below. These special components have the Grid Child Controls option, found in the Advanced tab. There, you can tell the Child Component how much space to reserve for itself, where to start and end rows and columns, and how to align/justify itself.

DIV
Heading
Text
Rich Text
Text Link
Link Wrapper
Button
Image
Video

For more information about how CSS Grid works, check out this article from CSS-Tricks (this link opens in a new tab):

A Complete Guide to CSS Grid

Pro Tip

One popular grid technique is to make all the Child Components fill their given spaces. To do this, select "stretch" from the options under Align Items.

Did you hear the news?

Editor Enhancer now has packages starting at just $12 LTD.

Take a look