SiteOrigin PageBuilder’s CSS hierarchy

Hi Dwoosley,

Here’s my typical response to questions like this. Please copy it to notepad or anything that has word wrap so it’s easier to read.

#pl-POSTID
	- This is the overall post wrapper that is inserted by page builder.
	- Very little reason to write a selector with this included.

	#pg-PAGEID-ROWORDERINGNUMBER .panel-grid
		- Each row has .panel-grid attached to them for easier referencing
		- each row has a unqiue ID.

		.panel-row-style
			- Only present if row styling is applied.
			- Heads up: Row layouts apply styling

		#pgc-PAGEID-ROWNUMBER-COLUMNNUMBER .panel-grid-cell
			- The same as the row structure
			
			.so-panel .widget .widget_WIDGETSLUG (.panel-first-child / .panel-last-child)
			- .so-panel and .widget are there so you can easily target widgets
			- .widget can be disabled in page builder settings if theme conflict
			- .widget_WIDGETSLUG will allow you to specically target certain widgets
			- .panel-first-child / .panel-last-child are present depending on context. If only one widget is present both will be applied.

Are any specific questions you have about it?

Hi David,

Oh neat. The ??? is the #pl-POSTID div (could also be named page builder wrapper or something like that) which is just a wrapper.

Could you clarify what you’re using for? I’m very interested. If you need to keep this private from other users, just select “Private Reply” on the bottom right of the comment box.