DevHub Docs
  • Welcome
  • Analytics
    • What events are tracked automatically?
    • Custom events
    • Google Analytics
  • API documentation
  • Domains
    • Registering a new domain
    • Renewing a domain
    • Pointing an existing domain
    • Pointing a subdomain of an existing domain
    • Transfer a domain
      • Transfer a domain to another registrar
    • Validating your domain
      • Validate with Google Webmaster Tools
    • Domain expiration process
  • Email accounts
    • Hosted email (rackspace)
      • Configure email clients to use POP or IMAP
  • Forms
    • Form and field options
    • Using fieldsets
    • Spam filtering
    • Configure SMTP For outbound emails
    • Using Marketo forms
  • Google Sheets
  • Hosting options
    • Embed pages
    • Wordpress plugin for path override
    • Server path override
      • Apache configuration
      • IIS configuration
      • NGINX configuration
    • CDN (content delivery network) support
  • Maps
    • Location finder
    • Map options explained
    • Google Maps API keys
  • Privacy
    • OneTrust integration
    • Cookies
  • Reverse proxy
    • Privacy and security
    • Proxy Configuration
    • Proxy Gating
    • Form lead tracking
    • Blocking and Whitelisting
      • Whitelisting Options
      • Google Ads rejections or disapprovals
      • 3rd Party Services/Widgets
      • Common Security System Restrictions or Domain Errors
  • SEO
    • Schema.org support
    • Sitemap XML
    • Enable No Index
  • Site builder
    • Getting Started
    • Images and video
    • Pages and content
      • Using page drafts
      • Adding Text
      • Adding and Managing Pages
      • Adding Images
      • Page templates and Templated pages
      • Maps
    • Redirects
    • Site Settings
    • Style Options
    • Adding a Business and location
    • Adding a site
    • Adding a user
    • Adding Custom Forms
    • Adding HTML to Sites or Pages
    • Blogs
  • SSL and security
    • SSL Troubleshooting
    • SSL certificate install options
      • Use your own purchased SSL certificate
    • Enable HTTPS for Sites and Proxies
  • Support
    • Creating a Zendesk account
    • Ticketing submission workflow
    • Builder URL and Site ID
  • Themes and custom templates
    • Getting started
    • Using macros
    • Using custom fields
    • Using URL parameters
    • Hours of operation
    • Using date and time in templates
    • Template variables
    • Site Builder Markup
      • Avoiding Site Builder CSS and HTML duplication
    • Example themes
      • Location focused page with bootstrap
      • Store locator theme example
    • Advanced Examples
      • Theme module templates
      • Static Google maps
      • Content translations
      • Page navigation
      • Override page title and meta tags
      • Adding line breaks to content
      • Get objects
      • Handling boolean values
      • Right to left languages
      • Access current URL
      • Social sharing links
      • Standard filters
      • Serializing data to JSON
      • Form events
      • Schema.org FAQ utility
  • Trace technology
    • What is Trace?
    • Configuration options
  • Data Sources
    • External Contexts
Powered by GitBook
On this page
  • Markup Details
  • Page
  • Columns Area
  • Rows
  • Columns
  • Modules

Was this helpful?

  1. Themes and custom templates

Site Builder Markup

PreviousTemplate variablesNextAvoiding Site Builder CSS and HTML duplication

Last updated 6 years ago

Was this helpful?

See 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>
Avoiding Site Builder CSS