How do Page Builder row attributes work – row class, cell class and CSS styles

If you edit any row in Page Builder (2.0+) you’ll notice an Attributes tab at the top right of the modal window. Opening that reveals three fields:

Row Class
Cell Class
CSS Styles

A similar option is available when editing Widgets. In this thread we’ll briefly cover row attributes and how to use them. This overview assumes a basic understanding of CSS.

Row Class

I’ve added a row class and called it:

test-row-class

If we now go inspect the page source we see that the very first div in the row looks like this:

<div class="panel-row-style-test-row-class test-row-class panel-row-style">

So now we have a custom row class that we can target in our own CSS, be it theme stylesheet, child theme stylesheet or Custom CSS.

Note that there is no period before test-row-class when I add it to the Page Builder field. However when I target that class in my CSS I do need a period in front of it.

.test-row-class {
/* My styles for test row class go here */
}

Cell Class

I’ve added a test cell class:

test-cell-class

Now let’s go inspect the page source and see where this is being applied:

<div class="panel-row-style-test-row-class test-row-class panel-row-style">
	<div class="panel-grid-cell" id="pgc-1459-0-0">
		<div class="test-cell-class panel-cell-style">

Now we can see both our row class and cell class being applied. As with our row class before we can now target this cell class in our own stylesheet, wherever that may be:

.test-cell-class {
/* My styles for test row class go here */
}

CSS Styles

Lastly let’s take a the CSS Styles field. This field will add inline styles to the row div. Not the cell div the row div. You can add one per line and don’t need a semi-colon at the end, for example:

color: red

Let’s take a look and see how that looks in the page source:

<div class="panel-row-style-test-row-class test-row-class panel-row-style" style="color: red;">
	<div class="panel-grid-cell" id="pgc-1530-0-0">
		<div class="test-cell-class panel-cell-style">

Now we can see all three row Attributes in play. Our row class, cell class and inline CSS Styles.

Conclusion

If you’ve got a handle on row attributes then widget attributes will make sense.

Feel free to post questions on this topic below.

Please, find an blog post on this topic here.