Site Builder Markup
See Avoiding Site Builder CSS for more information on what you should avoid when adding your own custom styles.
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"
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">
These are block-level elements that are stacked on top of each other
<div class="sb-row">
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>
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>