Documentation

Go to your settings by clicking on the gear icon in the top right corner.
In de sidebar select website  \ themes
There you will find our popular theme
Click on it and in the new sidebar you will find the theme settings

1. Edit the general settings
2. Preview then on some page
3. Publish the changes

Set you 2 main colors

Her you can set fonts, colors, and activate functionalities in your header.

1. activate an config top header
2. manage spacing
3. extra styling options, font colors,
4. activate top header
5. show search
6. show CTA right of menu and mange colors
7. make header sticky or not

Here you can manage all foint settings on the basic Html typography such as h1, h2, h3,... + config off buttons

extra functionality use class="cta_primary"  or class="cta_secondary",...  in the source code of your rich text in a href

Here you can style your forms
form label, input fields, GDPR text, etc

Manage all items on the blog listing and blogposts

Manage all items on the cases listing and  case blogposts

Manage the Content width and the space between the sections here: 

Manage the Stylings of the footer here

Manage the Stylings of the footer (LP) here

Using a lot of different fonts is not a good idea, it will make your website messy and it will slow down your website.

The HubSpot theme's are using google fonts. Its possible to override google fonts and use customs fonts but then you will need to add a little code yourself. Contact us on how to deal with it.

How HubSpot Drag and Drop Areas are working

Drag and 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 together, you can apply background styles to an entire area of your page. You can also drag and 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

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, probably they are 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 first col drag an Image module below the Rich Text field
3. then clone Image module in first row using the icon when hovering
   

This is the module you are looking add, the FAQ or FAQ accordion module

Display the latest blogs on a webpage, select blog and topic

Use this module to display your team / your products. Each card can hold an image, title, description. Add as many cards as you like, the 5th card automatically goes to the next row.

Just add a button on your page and style in in your theme style.

Manage your different pricing plans, use different currencies, switch to monthly & annual pricing. 

This module is used in the footer, each row of the footer you can add, text, image, social, menu's,... 
Think out of the box, use this module as a pillar page navigation.

The default Form Module does not contain an option to control the text color of the GDPR text. This Module contains colours field wherein you can modify the text on your form and also lets you control the colour of your submit button.

See it in action here

This module is used on the Header

This module is used to add text on your Hero, the paragraph font size of this module can be controlled on the theme settings (Typography > Hero Paragraphs). it also contains a colour field at the bottom, to control the colour of the text. 

See it in action here

This module is also used to add text on your Hero, the paragraph font size of this module can be controlled on the theme settings (Typography > Hero Paragraphs). 

This module lets you add a series of texts that looks like its typing.

Note: Use this keyword "%%typing%%" to insert the typing text on the header. 

This module have the ability to control the Background colour, background colour in hover and many more. It will let you add an icon at the top, a text and custom link.  Just like the example below:

See it in action here

This image slider module lets you control how the slider will behave that fits your needs. It contains options like the items to be shown per slide.

Here the slider settings options available on this module

See it in action here

Use this module to display a series of images with a caption on the left. Clicking the caption will let you navigate to a different image.

See it in action here

Use this module if you want to control the alignment (text, right, and center) of the image and it also has an option to hide and show the image on desktop, tablet, and mobile.

See it in action here

Use this module to show the submit button and a field on one line. Be aware that you can only add one field on this form in order to preserve the look.

See it in action here

Use this module if you need a link with an icon. 

See it in action here

Use this module to add the map of the company and it will let you turn on/off the grayscale of the map

See it in action here

Use this module to add a gallery, when an image is clicked it will popup and will let you navigate to the next image

See it in action here

This module is used on the header

Use this module to add information about the company like address, email and phone number

See it in action here

Use this module to add the branches of the company from other countries. 

See it in action here

Manage the pricing using this module

See it in action here

Use this module to add a series of buttons with icons.

Use this module to control the color of the text

See it in action here

This module is typically used on the thank you page. add this module to add the social media of the company

See it in action here

This is a module that can be found on the blog post and cases post. 

You have an option to switch this on/off by going to the theme settings > blog > post > display social share

See it in action here

Use this module to add spacing between your columns or rows. This module lets you define the spacing on mobile, desktop and tablet.

Use this module to add contents that can navigate thru the tab

see it in action here

Use this module to add the team members of the company

see it in action here

Use this module to add the testimonials. This module lets you define the number of items to show per slide

or

or

see it in action here

Use this module to swap the contents of your image and text on the desktop. On mobile, the image will always show at the top of the text.

see it in action here