Before you start using the theme and creating pages: we advise you to create a child theme in the HubSpot design manager!
A 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
HubSpot: Knowledge base & 24/7 support
HubSpot Has a very good documented knowledge base and has a 24/7 support
HubSpot: Get started with the theme
HubSpot: Create and publish a page (general)
- Create and publish a page
- Create and publish a page > Types of templates > is a THEME template
- Create and publish a page > Create a new page
- Create and publish a page > Edit an existing page
- Create and publish a page > Edit content in a module
- Create and publish a page > Edit styles applied to your modules
- Create and publish a page > Optimise for SEO
- Create and publish a page > Edit page settings
- Create and publish a page > Preview tour page
- Create and publish a page > Publish or schedule your page
HubSpot: Edit content in pages using a website theme
HubSpot: File manager, images, videos
Where are the theme settings located
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
- Edit the general settings
- Preview then on some page
- Publish the changes
Consider these settings as super settings, they will be inherited further down the road, you can overrule them if needed.
Activate extra functionalities in the header and control all the header variables
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)
Create some button variations here, you can use the settings in different modules or use as a class in the source code
You can control the look of a form and all its elements, field, placeholder, help,...
The look of a table can be managed here
You can control the functionalities focused on the blog, such as listing, hero's, featured,...
Manage the footer section of each page, width, look, style,...
HubSpot drag and drop areas
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.
- Module: an individual block of website content. You can edit your page's text and images within an individual module.
- 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.
- 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.
- 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.
- You can search for modules to be used
- Theme modules are modules developed form, especially for the theme
- Common modules are default HubSpot modules such as Rich Text
- 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
- create 2 cols with a Rich Text module in each
- in the first col drag an Image module below the Rich Text field
- then clone the Image module in the first row using the icon when hovering
This is the module you are looking add, the FAQ or FAQ accordion module
Blog Latest Feed with Newsletter
Display the latest blogs on a webpage, select blog and topic
Blog Listing tag menus
Display Tags used on a blog
Used on blog overview page, this is used to display the blog posts under a blog
Blog Listings Featured post
Display the most recent featured post.
Blog Listings title
Used to show the title of the blog overview
Used to show the pages if the number of posts is more than what is set on the blog settings.
Blog Post hero slider
Hero slider that display a series of posts from a blog
Blog Related feed
This module is exclusive on a blog post.
Blog Social sharing
This module is exclusive to a blog post. It will let you share your posts on social media
Breadcrumbs Menu section
Use this to display breadcrumbs on your page.
Just add a button on your page and style in your theme style.
This module will display column in 1-4 columns per row. it has different style options to choose from. Use this to display Infos, team and etc.
Global logo slider
Use to a module to display a list of logos. This is a global module.
This module is used on the Header
Use this module as your hero, make sure to set the section as full width. You can use a slider or parallax on each repeater section.