Frequently Asked Questions

Q: I need a quick tour of the Design Manager. What is it? What can I do with it?
A: Take a look at the Design Manager tour -- Design Manager User Guide - A Quick Tour


Q: What is HubL?
A: HubL is an acronym for HubSpot Markup Language. HubL is the underlying syntax used in the templates. HubL syntax is heavily inspired by Django, Jinja, and Python.


Q: Where can I find more information about HubL?
A: The reference documentation for HubL includes syntax, variables, modules, filters and functions. The documentation can be found at ... CMS Documentation - HubL Syntax Reference


Q: What are HubL "Tokens" and "Tags"?
A: COS templates contain tokens and tags.

  • Tokens are indicated by a curl brace syntax: ISM 7994 Site Template and Pages FAQ and are replaced with values when the template is processed. So, tokens are placeholders that get and insert the actual values at runtime.
  • Tags control the logic of the template and provide support for various components.

Their are two types of delimiters - and . The first one is used to execute statements such as for-loops or assigns values, the latter prints the result of the expression to the template.


Q: How do I code the presentation of my site?
A: Investigate some ideas of some commonly used CSS selectors. Learn ideas of some of the common elements on COS templates.HubSpot Boilerplate CSS

  1. CompanyStyle.css (this is hubtheme-style.css)
    • this code will not change the pages presentation - it provides a template to add CSS properties
  2. CompanyModules.css (this is hubtheme-modules.css)

Q: For the URL parameters, what are the "anchors and query string parameters"?
A: The "?" character is used to signify passing information via the url via a query string. The "#" character is used as an anchor for the website. As an example, notice the different action from the following url's -- "http://en.wikipedia.org/wiki/Query_string#Structure" versus "http://en.wikipedia.org/wiki/Query_string". The documentation can be found at ... Query Strings

HubL Introduction

Q: What HubL variables are available in all templates?
A: Take a look at the supported variables in the documentation 
-- Available HubL Variables


Q: What HubL variables are available in Email templates?
A: Take a look at variable in email templates 
-- Email HubL Variables -


Q: What HubL variables are available in Landing Page templates?
A: Take a look at variable in landing page templates 
-- Landing Page HubL Variables -


Q: How do I Implement a Built In Toggle Mobile Navigation?
A: The four steps are listed below. Implement Mobile Navigation

  1. Add a class to the Navigation Module
  2. Add/ Replace Mobile Navigation Javascript
    • this is the hubtheme-modules.css
  3. Reference the script in Content Settings
  4. Add/ Replace the Mobile Menu Section in the Stylesheet

Q: What are the names of the classes and modules ?
A: Template Builder uses a 12 column grid system based on Bootstrap 2.x. The following link provides a picture of the structure and class names that are available. Getting to know the CMS Template Builder