Ultimate HubSpot CMS Hub Theme

Get Started with Realize Theme for HubSpot

Thank you for choosing Realize theme.

Realize is a Hubspot CMS theme designed to be an effective tool for productive marketing teams. 

It is very easy to setup and learn how to create your unique pages and once you create your first two or three pages, everything else will be easy and enjoyable.


realize illustrations and icons_4

Get Started with Realize Theme for HubSpot

Realize Theme comes with three types of templates: 

  • Langing and Website Page Templates
  • Blog Post and Listing Page Templates
  • System Page (Subscription Preferences, 404, etc.)

After installing theme all these templates should be available on your HubSpot portal. 

Website/Landing Pages

To set website pages or landing pages, open Marketing/Website Pages or Marketing/Landing Pages, click Create, and then choose one of the templates. 

Blog Template

You can set blog template in Settings/Website/Blog/Templates. 

Blog Settings

System Pages

You can set system pages template in Settings/Website/Pages/System Pages.

System Pages

How can I create a header or footer?

All the page templates of Realize theme contain global Header and Footer that you can customize or just remove from specific pages. 

If you want to create a landing page with a unique header (or footer) you can remove global header/footer modules and add instead modules called Header Local or Footer Local.

How can I set up a menu?

You can set a menu in a header (global or local module): 

Menu setup

How do I brand my pages?

Set the brand color palette and pick fonts for all of your pages by accessing theme settings right from any page.

Click the Design tab / Edit theme settings to open the set of fields responsible for colors, typography, button and form settings, etc. These settings will be applied to all of your website, landing and blog pages.


How do I add a section heading?

Use Text – 1 column module to set the section heading and specify its type.


How do I change a content width?

We use the 12-column grid system to style the content. It means the content always consists of 12 equal units.

When editing module styles in Styles tab, set 'Width to container' for each content item to tell the number of columns the items should take up.

In the example below we give the text the width of 1/2 container, which equals 6/12. And the image takes up 5 of 12 columns.


Prefer to position one element above the other? Simply give either of them the full width.

How can I reduce spacing between two modules?

Set the vertical paddings to the smallest but it's not enough? Reduce the spacing between the modules by merging two together.

To do that, toggle 'Merge with next section button' in the Styles tab/Section settings of the module that comes first. Background of both sections should be the same.

Option is available in every module.


How can I create a CTA with anchor link on my landing page?

You can add an anchor link to a CTA with scroll effect on your landing page.

Find the 'Section id' field in the Content tab of the module you want to have a scroll to, and set the id. The id will be used as a reference to the module.

Go to the CTA that you want to add a link to. In the settings select its functional type 'Scroll to the element' in order to paste the module id.


How do I control the module visibility on different devices?

Hide certain modules for particular devices when consider them to be less important for a user.

Change module's visibility in Section settings to hide a module when viewed on desktop, tablet or mobile.


Get Support

Didn't find an answer? Please contact us if you have issues or new requests

Submit a Ticket/Request