essential Documentation

Before you start

Create a child theme

child theme is a copy of an original parent theme. You can edit the child theme without altering the parent theme. You can create child themes from HubSpot themes, marketplace themes, as well as custom themes.

How to create a child theme

Watch this video

Each CMS has its own behaviour. Therefor it's important that you know how HubSpot CMS is working. Please watch this video training before you start building your website.

HubSpot CMS for marketers

HubSpot has a great Academy!!

HubSpot Support & knowledge center

HubSpot has an excellent documented knowledge base and has 24/7 support:

  • Knowledge base
    If you have a question, search the knowledge base. Visit the knowledge base through the help button at the bottom right of your HubSpot-portal
  • Help center
    Overall help center for your questions
  • HubSpot status page
    Unexpected issue? Check if all HubSpot services are operational
Website Speed

The essential theme is out of the box very fast. Keeping your website fast start with you! Check out this demo website speed tests

Here is a list of the deadly speed sins:

  1. Each third party script slows down you website (GTM, GA, Hotjar,...)
  2. Try not to add script libraries (JQuery,...)
  3. If you need scripts load them deferred at the bottom.
  4. Optimise your images for web and lazy load them.
  5. Video's are slowing down your pages
  6. Forms are slowing down pages
  7. HubSpot CTA are slowing down pages
  8. HubSpot Chat are slowing down pages
  9. Smart Content are slowing down pages
  10. ...

This Does not mean that you can not add Chat or video or scripts. Just be careful. Use them wisely. Don't add them all on your entrance pages!

Modules

Support

If you have an issue or found a bug: 

Fill out the support form

General Theme Settings

theme is a set of styles and templates you can apply to your website pages and blogs in HubSpot. To make sure that your website looks consistent, style settings for all pages using the same theme are managed in your theme settings. 

Go to your theme settings by clicking on the gear icon in the top right corner.
In de sidebar select website  \ themes
Or use this shortcut, click here

Changing the general theme settings:

  • get extra information by hovering the information icon info
  • you call roll back to the default theme settings by clicking on the refresh icon refresh
  • preview them in the right pane or hit the preview button preview
  • the changed are saved automatically but you need to publish them publish
Overview

There you will find our essential theme and the child theme.
Click on the child theme and in the new sidebar you will find the theme settings.

essential-theme-settings

 

 

Global Settings

Consider these settings as super settings, they will be inherited further down the road, you can overrule them if needed.

  • Global colors > Set primary, secondary, and body background-color
  • Global fonts  > Set font for Menu, Header, Body
  • Spacing and Page width > Set the boxed width of the body & top/bottom spaces of section

essential-theme-global-settings

 

 

 

Header Settings

Activate extra functionalities in the header and control all the header variables

  • Sticky header
  • Show language switcher
  • Show Search
  • Add CTA in Header
  • Add Breadcrumb

Style options for header and main menu

essential-theme-header-settings

 

Typography

By default, the fonts are inherited from the global font settings. Here you can overrule them if you want to. You can use a different Google Font or a Custom Font (custom fonts are declared in CSS)

  • H1
  • H2
  • H3
  • H4
  • H5
  • H6
  • Body
  • Body Paragraph (p)
  • Blockquote
  • Link (a)
  • Read More

essential-theme-typography-settings

 

Buttons

Create some button variations here, you can use the settings in different modules or use as a class in the source code

  • Button sizes > Small | Regular | Large
  • Primary CTA (cta_primary) > The main button normally uses you primary color as background color
  • Secondary CTA (cta_secondary) > Normally this is the inverted version of your primary button
  • Simple text button > Converts a standard link to something more fancy

Use the button module and combine size with kind.

is standard href link you can add the code class="cta_primary" or class="cta_secondary" in any Rich text field to create a button.

essential-theme-button-settings

 

Forms Settings

In this section you can control the look of a form and all its elements, field, placeholder, help,...

  • Title
  • labels
  • Fiels
  • GDPR text
  • Help Text
  • Error Text
  • Submit
  • Background color
  • Border
  • Padding

essential-theme-form-settings

 

Table Settings

You can use a table in a Rich Text  object. Here you can control the general look and feel of these tables all over the website, so they look the same.

  • Table head
  • Font color
  • Background color
  • Border
  • Padding

essential-theme-table-settings

 

Blog Settings

In this section you can control the functionalities focussed on the blog, such as listing, hero's, featured,...

  • Listing
  • Blogpost options
  • Topic options

essential-theme-blog-settings

 

Footer Settings

Manage the footer section of each page, width, look, style,...

  • Style Options
  • Social Icons

essential-theme-footer-settings

 

Special Theme Features

All Section Template

We have created an All Section template for you. This template holds almost all sections / modules on one big example template. Just delete the sections you don't need. Move the remaining sections around and you can compose in a minute a new astonishing webpage.

Multilingual

HubSpot CMS is out of the box multilingual. In addition we added some scripts and translation files. That can be used in the blogs and webpages. Here you need to dig into coding. Go to your design manager and search for lang.html

  • Add extra language in the lang.html
  • Create extra language files if needed
  • Add extra words to translation in the language files nl.html en.html
  • Add these words in the blog or webpages  as variables

 

How to: use Custom Fonts and NOT Google fonts

The essential theme has been prepared to work with custom fonts. Here you need some coding to make this work. Go to your design manager and search for _custom_fonts.css

On the _custom_fonts.css file, paste the font code and make sure to name the font-family: 'Custom Font 1' or font-family: 'Custom Font 2'

The essential theme let's you add up to 2 custom fonts.

 

Interesting links

HubSpot CMS license

A HubSpot drag & drop theme only works if you have a HubSpot CMS license. You can not use this theme on your own server.

All information on the HubSpot CMS.

HubSpot drag & drop areas

How HubSpot Drag and Drop Areas work

Drag & drop areas are composed of modules, which are blocks of website content.
These modules may be arranged in horizontal rows or vertical columns.
Rows and columns may be grouped into sections of elements.

By grouping these elements, you can apply background styles to an entire area of your page. You can also drag & drop entire rows, columns, or sections to rearrange your page layout.

  1. Module: an individual block of website content. You can edit your page's text and images within an individual module.
  2. Column: a vertical stack of multiple modules or rows. You can move or rearrange columns on your page and apply a background color or style to an entire column.
  3. Row (*): a horizontal row of modules or columns. You can move or rearrange rows on your page and apply a background color or style to an entire row.
  4. Section: a group of multiple rows or columns. You can move an entire section or apply a background color or style to an entire section.

Check out this HubSpot knowledge page that explains all functionalities.

Different modules

image-png-Sep-15-2020-09-45-05-09-AM

  1. You can search for modules to be used.
  2. Theme modules are modules developed form especially for the theme
  3. Common modules are default HubSpot modules such as Rich Text.
  4. All modules, beware of using these modules, are probably old modules and NO Drag & Drop modules.  It's possible that they do not behave correctly.

Section \ Column \ Row \ module hierarchy

HubSpot resources on drag & drop themes

2 hours of customisation included

We offer 2 hours of customization and free updates! FREE 15-min consultation before you buy, FREE 2 hours of customization service, and FREE updates are just a few things we have in store for our customers.