Site Builder Markup

See Avoiding Site Builder CSS for more information on what you should avoid when adding your own custom styles.
Markup Details
Page
A page is a grid of modules that are grouped into rows, columns, and positions.
"Columns Area" contains "Rows"
"Rows" which contain "Columns"
"Columns" contain "Modules"
Columns Area
This is the main "Site Builder" zone that contains all the rows, columns and modules that you can added to a page
<div class="columns" class="columns-inner clearfix">
Rows
These are block-level elements that are stacked on top of each other
<div class="sb-row">
Columns
These are percentage-width elements that are floated left within a Row
<div class="sb-col" style="width:50%">
  ...
</div>
<div class="sb-col" style="width:50%">
  ...
</div>
Modules
These are the individual modules that contain the content added to the page
Class or ID
Type
Description
.sb-module
class
This is the same for all modules
.sb-<module_name>
class
This variable class is set based on the type of module (i.e. .sb-formbuilder or .sb-content)
#sb-module-<module_id>
id
This variable id is unique to this particular module - This will not be repeated on the same page or any other page on the Site.
<div id="sb-module-<module_id>" class="sb-module sb-<modulename>">
</div>

Themes and custom templates - Previous

Using custom fields

Avoiding Site Builder CSS

Last updated 1 year ago

Class or ID	Type	Description
`.sb-module`	class	This is the same for all modules
`.sb-<module_name>`	class	This variable class is set based on the type of module (i.e. `.sb-formbuilder` or `.sb-content`)
`#sb-module-<module_id>`	id	This variable id is unique to this particular module - This will not be repeated on the same page or any other page on the Site.