Home>Blog>A Custom CSS Guide to Page Builder Row, Cell & Widget Attributes

A Custom CSS Guide to Page Builder Row, Cell & Widget Attributes

Custom CSS is a quick and accessible method for hobbyists and developers to make style changes beyond what can be done using available settings. In this tutorial, we’ll cover the Page Builder Attributes tab and how it can be used when making Custom CSS changes. This brief guide is aimed at users with a basic understanding of CSS or those wanting to go beyond using the Visual Editor in SiteOrigin CSS.

The Attributes tab is available when editing Page Builder rows, cells, and widgets.

Row Attributes

To edit a Page Builder row, hover over the spanner icon on the right and click Edit Row. Click the Attributes heading on the right to open the panel.

Row Attributes.

The following fields are available.

Row ID

A custom ID that’ll be applied to the row. Only the ID name should be inserted, the preceding hash normally used shouldn’t be inserted. For example, if the custom row ID was named “services”, only insert the word services. Keep in mind that an ID name should only be used once.

Row ID.

The row ID will be output into the Page Builder markup as follows:

Row Class

A custom class that’ll be applied to the row. Only the class name should be inserted, the preceding period normally used shouldn’t be inserted. For example, if the custom row class was named “drop-shadow”, only insert the word drop-shadow.

Row Class.

The row class will be output into the Page Builder markup as follows:

Cell Class

A custom class that’ll be applied to each cell in the row. Only the class name should be inserted, the preceding period normally used shouldn’t be inserted. For example, if the custom row class was named “dark-bg”, only insert the word dark-bg.

Cell Class.

The row class will be output into the Page Builder markup as follows:

For those new to CSS, the above three fields would be used in conjunction with a plugin like SiteOrigin CSS or the core field at CustomizeAdditional CSS. Once the ID or class name you require has been inserted in one of the above fields you’d then head over to AppearanceCustom CSS to create a rule targetted at the ID or class name you’ve inserted.

A rule targetting our example row ID would look as follows:

#services {
	/* Declarations go here */
}

A rule targetting our example row class would look as follows:

.drop-shadow {
	/* Declarations go here */
}

A rule targetting our example cell class would look as follows:

.dark-bg {
	/* Declarations go here */
}

CSS Styles

The CSS Styles field allows for style declarations to be applied to the row. A CSS declaration is made up a property and a value, for example font-size: 20px. font-size is the property and 20px is the value. One declaration should be added per line. The semi-colon that would normally be used at the end of each declaration isn’t necessary.

CSS Styles field.

The declarations displayed in the above screenshot will be output as follows:

Mobile CSS Styles

Mobile CSS Styles will only be applied to screen resolutions below the mobile resolution set at SettingsPage BuilderLayoutMobile Width.

Mobile CSS Styles

The declaration displayed in the above screenshot will be output as follows:

Cell Attributes

When editing a Page Builder row you can reveal the relevant Cell Styles field by clicking on the cell you’d like to edit. Click the Attributes heading on the right to open the panel.

Click on the cell you’d like to edit to reveal the Cell Styles section.

The following fields are available.

  • Cell ID
  • Cell Class
  • CSS Styles
  • Mobile CSS Styles

Cell attributes function in the same way as row attributes just targetted at the cell in question.

Widget Attributes

The Widget Styles panel is available on the right when editing any widget in Page Builder. Click the Attributes heading to open the panel.

Click the Attributes heading in the Widget Styles panel to access widget level attribute fields.

The following fields are available.

  • Widget ID
  • Cell Class
  • CSS Styles
  • Mobile CSS Styles

Widget attributes function in the same way as row and cell attributes just targetted at the widget in question.

Thanks for reading, hopefully, you now have an overview of how row, cell and widget attributes can be used. If you have any questions or comments, please, let us know in the comments section below.

Do More with SiteOrigin Premium

SiteOrigin Premium offers a huge array of additional functionality for Page Builder by SiteOrigin, the SiteOrigin Widgets Bundle, SiteOrigin CSS and all of our themes. SiteOrigin Premium also includes access to our next-level email support service, perfect for those times when you need fast and effective technical support.

Leave a Reply

Your email address will not be published. Required fields are marked *

Comments

  1. 5 days, 19 hours ago Brian

    This is a VERY good Reference – Thank you!!!

    • 5 days, 4 hours ago Andrew Misplon Hi, I Work Here

      Thanks for reading :) If you have any follow-up questions in the future, please, let us know.

  2. 4 days, 9 hours ago Mirza Sharz

    Thank you for sharing this useful tutorial

    • 4 days, 2 hours ago Andrew Misplon Hi, I Work Here

      Hi Mirza, thanks for commenting, I’m glad you find it helpful. If any questions arise, please, let us know.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More