An overview of theme custom modules

Last updated: March 21, 2017

Available For:

Marketing: Basic, Pro, Enterprise
Sales: N/A

Custom modules are special features that a developer can create for your site using HTML, CSS, Javascript, and HubL. The benefit of using custom modules is that your content creators can easily edit these components of your site without ever touching any code. HubTheme comes with several reusable custom modules that come standard on your Homepage, and Contact Us templates and can be added to any of your base theme templates.

HubTheme includes the following custom modules:

HubSpot default themes are only available in new HubSpot accounts. If you would like to have a standard HubSpot theme installed in your existing account, follow these instructions to ensure that your account is compatible with these themes.

FAQ Module

The Frequently Asked Questions module is a great way to answer questions that your visitors have about your business. The FAQ custom module consists of a Questions text field, Answer rich text editor, and the option to have the module expanded or collapsed.

FAQ Module

If a FAQ module is added to your template (such as the Homepage template), you can edit the question and answer from the page editor.

  1. FAQ Question - Type the question in the FAQ Question input field.
  2. FAQ Answer - Type the answer in the FAQ Answer rich text editor.
  3. Expanded? - Choose whether the initial state of the module is either expanded or collapsed using the checkbox.
HubSpot Help article screenshot

Team Member

Use the Team Member module to personalize your business and let people know they are working with real humans. The team member modules consists of seven fields: Head Shot, Name, Title, Bio, Facebook Link, Linkedin Link, Twitter Link.

HubSpot Help article screenshot
  1. Head shot - The head shot field is an image module. We recommend that you use your linkedin profile picture.
  2. Name - The name field is a single line input field where the first and last name are entered.
  3. Title - The title input field is a single line field where the team members title is entered.
  4. Bio - The bio field is a rich text editor field where the team members bio is entered.
  5. Social Links - The social links are single line input fields where the team members social links can be entered. Please use the following format: https://www.facebook.com/hubspot
HubSpot Help article screenshot

Well Module

The Well module is a great way for drawing attention to content.  It comes built in with set styles depending on what type of information it contains. It contains the fields: Well type, Well size, close function, and Well text editor.

Well module
  1. Type of Well - This is a choice dropdown which will apply a different style to the well. The style controls the color theme of the well, including the background, text color, and border color. The available styles are:
    • Default - default color of your theme
    • Danger - red
    • Primary - blue
    • Success - green
    • Info - light blue
    • Plain - gray
  2. Well size - This is a choice dropdown which will apply different padding to the well module. The available size options are:
    • Small - 20px
    • Medium - 24px
    • Large - 28px
  3. Ability to Close - The “ability to close” checkbox will place an “X” icon in the top right corner of the well. This now gives the visitor the option to close the well. This is useful if you are using the well for an alert message.
  4. Well Text Editor - This is where the content of the well is entered.
HubSpot Help article screenshot

Testimonial

The testimonials module is a great way to show your visitors what your customers are saying about you. The testimonials module consists of the following inputs: Name, Company, Head Shot, and quote.

Testimonial module
  1. Name - The name field is a single line input field where the first and last name are entered.
  2. Company - The title input field is a single line field where the company name is entered.
  3. Head shot - The head shot field is an image module. We recommend that you use your linkedin profile picture.
  4. Quote - The quote that renders in the speech bubble.
HubSpot Help article screenshot

Tabber

Tabbers, or multi-pane content, are a good way to display product data and specifications. Tabbers are usually found on product pages that have a repeatable and predictable content type.

Tabber module
  1. Tab Header - This is the text that appears in the tab.
  2. Tab Content Pane - This is the content that corresponds with the tab and appears when the tab is selected.
HubSpot Help article screenshot
The Tabber custom module is built using 3 Tabs and 3 tab content panes. In order to add or subtract the number of Tabs and Tab content panes you must edit the Tabber custom module HTML.

Pricing table

Pricing tables are great for subscription base businesses. The pricing table module consists of the following inputs: Heading, Price and Frequency (day, month, year/annual), Content, and Sign Up Button Text.  

Pricing table
  1. Pricing Table Header - This is the main heading of the pricing table. Here, you might display a plan’s name, such as Light, Basic, or Professional.
  2. Price - The price input field is where you enter the price value.
  3. Date - The date input field is where you will enter the frequency of payment: day, month, year/annual.
  4. Pricing Table Rich Text Editor - The pricing table rich text editor is where you will put your main content for the pricing plan. We recommend using bullet points to highlight the key values.
  5. Pricing Table Button Text - The pricing table button text where you will populate the button. Common text is “Sign Up” or “Learn More”.
  6. Pricing Table Popular Label - This is a checkbox option to highlight the most popular pricing option.
  7. Pricing Table Button Link - This is where the button will take your user after clicking.
HubSpot Help article screenshot

Icon Selector

Icons are a great way to draw attention to content and increase readability. The Icon Selector module allows you to display icons from the Font Awesome library.

Icon module
  1. Select Your Icon - Use the dropdown to select an icon from the Font Awesome library (see options below). 
  2. Icon Size - Edit the size of the icon in pixels. 

Complete list of available icons

  adjust
  anchor
  archive
  arrows
  arrows-h
  arrows-v
  asterisk
  ban
  bar-chart-o
  barcode
  bars
  beer
  bell
  bell-o
  bolt
  book
  bookmark
  bookmark-o
  briefcase
  bug
  building-o
  bullhorn
  bullseye
  calendar
  calendar-o
  camera
  camera-retro
  caret-square-o-down
  caret-square-o-left
  caret-square-o-right
  caret-square-o-up
  certificate
  check
  check-circle
  check-circle-o
  check-square
  check-square-o
  circle
  circle-o
  clock-o
  cloud
  cloud-download
  cloud-upload
  code
  code-fork
  coffee
  cog
  cogs
  comment
  comment-o
  comments
  comments-o
  compass
  credit-card
  crop
  crosshairs
  cutlery
  dashboard (alias)
  desktop
  dot-circle-o
  download
  edit (alias)
  ellipsis-h
  ellipsis-v
  envelope
  envelope-o
  eraser
  exchange
  exclamation
  exclamation-circle
  exclamation-triangle
  external-link
  external-link-square
  eye
  eye-slash
  female
  fighter-jet
  film
  filter
  fire
  fire-extinguisher
  flag
  flag-checkered
  flag-o
  flash (alias)
  flask
  folder
  folder-o
  folder-open
  folder-open-o
  frown-o
  gamepad
  gavel
  gear (alias)
  gears (alias)
  gift
  glass
  globe
  group (alias)
  hdd-o
  headphones
  heart
  heart-o
  home
  inbox
  info
  info-circle
  key
  keyboard-o
  laptop
  leaf
  legal (alias)
  lemon-o
  level-down
  level-up
  lightbulb-o
  location-arrow
  lock
  magic
  magnet
  mail-forward (alias)
  mail-reply (alias)
  mail-reply-all
  male
  map-marker
  meh-o
  microphone
  microphone-slash
  minus
  minus-circle
  minus-square
  minus-square-o
  mobile
  mobile-phone (alias)
  money
  moon-o
  music
  pencil
  pencil-square
  pencil-square-o
  phone
  phone-square
  picture-o
  plane
  plus
  plus-circle
  plus-square
  plus-square-o
  power-off
  print
  puzzle-piece
  qrcode
  question
  question-circle
  quote-left
  quote-right
  random
  refresh
  reply
  reply-all
  retweet
  road
  rocket
  rss
  rss-square
  search
  search-minus
  search-plus
  share
  share-square
  share-square-o
  shield
  shopping-cart
sign-in
  sign-out
  signal
  sitemap
  smile-o
  sort
  sort-alpha-asc
  sort-alpha-desc
  sort-amount-asc
  sort-amount-desc
  sort-asc
  sort-desc
  sort-down (alias)
  sort-numeric-asc
  sort-numeric-desc
  sort-up (alias)
  spinner
  square
  square-o
  star
  star-half
  star-half-empty (alias)
  star-half-full (alias)
  star-half-o
  star-o
  subscript
  suitcase
  sun-o
  superscript
  tablet
  tachometer
  tag
  tags
  tasks
  terminal
  thumb-tack
  thumbs-down
  thumbs-o-down
  thumbs-o-up
  thumbs-up
  ticket
  times
  times-circle
  times-circle-o
  tint
  toggle-down (alias)
  toggle-left (alias)
  toggle-right (alias)
  toggle-up (alias)
  trash-o
  trophy
  truck
  umbrella
  unlock
  unlock-alt
  unsorted (alias)
  upload
  user
  users
  video-camera
  volume-down
  volume-off
  volume-up
  warning (alias)
  wheelchair
  wrench
  check-square
  check-square-o
  circle
  circle-o
  dot-circle-o
  minus-square
  minus-square-o
  plus-square
  plus-square-o
  square
  square-o
  bitcoin (alias)
  btc
  cny (alias)
  dollar (alias)
  eur
  euro (alias)
  gbp
  inr
  jpy
  krw
  money
  rmb (alias)
  rouble (alias)
  rub
  ruble (alias)
  rupee (alias)
  try
  turkish-lira (alias)
  usd
  won (alias)
  yen (alias)
  angle-double-down
  angle-double-left
  angle-double-right
  angle-double-up
  angle-down
  angle-left
  angle-right
  angle-up
  arrow-circle-down
  arrow-circle-left
  arrow-circle-o-down
  arrow-circle-o-left
  arrow-circle-o-right
  arrow-circle-o-up
  arrow-circle-right
  arrow-circle-up
  arrow-down
  arrow-left
  arrow-right
  arrow-up
  arrows
  arrows-alt
  arrows-h
  arrows-v
  caret-down
  caret-left
  caret-right
  caret-square-o-down
  caret-square-o-left
  caret-square-o-right
  caret-square-o-up
  caret-up
  chevron-circle-down
  chevron-circle-left
  chevron-circle-right
  chevron-circle-up
  chevron-down
  chevron-left
  chevron-right
  chevron-up
  hand-o-down
  hand-o-left
  hand-o-right
  hand-o-up
  long-arrow-down
  long-arrow-left
  long-arrow-right
  long-arrow-up
  toggle-down (alias)
  toggle-left (alias)
  toggle-right (alias)
  toggle-up (alias)
  arrows-alt
  backward
  compress
  eject
  expand
  fast-backward
  fast-forward
  forward
  pause
  play
  play-circle
  play-circle-o
  step-backward
  step-forward
  stop
  youtube-play
 
  adn
  android
  apple
  bitbucket
  bitbucket-square
  bitcoin (alias)
  btc
  css3
  dribbble
  dropbox
  facebook
  facebook-square
  flickr
  foursquare
  github
  github-alt
  github-square
  gittip
  google-plus
  google-plus-square
  html5
  instagram
  linkedin
  linkedin-square
  linux
  maxcdn
  pagelines
  pinterest
  pinterest-square
  renren
  skype
  stack-exchange
  stack-overflow
  trello
  tumblr
  tumblr-square
  twitter
  twitter-square
  vimeo-square
  vk
  weibo
  windows
  xing
  xing-square
  youtube
  youtube-play
  youtube-square
 
 

Please note that the HubSpot-hosted version of Font Awesome is not kept up to date. If you want to use newer icons, you will want to upload your own font files into File Manager and replace the @font-face reference with their src urls.

Previous article:

Next article: