With regards to rows. Row Class, Cell Class and CSS Styles are not linked, they do three separate things.
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.
