Before you Start

Each CMS has its own behavior.
Working with a theme does not mean you should not understand some essentials about building a website, web design, creating pages, using images, videos,...

Here we listed some interesting articles and videos.
It will help you build an awesome website!

If you you want to make changes to the theme / templates / modules / files yourself. Just clone the theme on your portal and use the cloned version.

usable-design-hover

0. Before you start creating pages!

We advise you to clone your theme in the HubSpot design manager and start using the cloned version!

Doing this you will be able to update, add, create,... extra features to the theme in the future.
If you do not start with a copy, you will get stuck at some point
and will need to redo things. 
How to clone a theme

1. HubSpot Knowledge Base & 24/7 support

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

2. HubSpot: CMS

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.

3. HubSpot: Get started with The News theme

8. HubSpot: Some advanced functionalities

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

modules

  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

(*) creating a row is sometimes hard ;-) but follow these steps, and you will get one

  1. create 2 cols with a Rich Text module in each
  2. in the first col, drag an Image module below the Rich Text field
  3. then clone Image module in the first row using the icon when hovering