How do HubSpot websites work?

Exploring the building blocks of a HubSpot website.

A standard HTML webpage consists of 3 parts:

  • Head
  • Body
  • Footer

In a HubSpot webpage, these components are all split across different sections of the HubSpot CMS:

Site header HTML & Site footer HTML

KB001

Settings -> Website -> Pages

Here you will find the editor for the Global header and footer editor. This is the best place to insert scripts that need to run across every page on your website, for instance, tracking scripts like Facebook Pixel, and meta tags like Google site owner verification.

 

Body

KB001b

Marketing -> Design Tools

Within the Design manager, you are given the option of creating the following objects:

KB001c

To create a template from which a webpage will be made from, select Drag and Drop -> Page. This will create an empty template. From here, you can drag and drop in any of the modules available in the right-hand sidebar:

KB001d

If what you require isn’t available in the list, you have the option to create a Custom Module and insert your own code and styling (but will probably require the assistance of a developer).

Design manager also allows you to attach CSS (Cascading Style Sheet) and Javascript files to each template in the right-hand sidebar:

KB001e

Adding the CSS and Javascript files here would make the style and functionality of each template unique to the template. This approach is recommended as it allows for a new set of styles/scripts to be loaded on another webpage if necessary. (For example, if a new website is being designed, it makes creating new styles for the new templates much easier).

 

The Final Product

Once the template has been completed, it’s time to make the webpage:

KB001f

Marketing -> Web Pages

Simply select the template you created and give your new page a name, and HubSpot will generate your new page for you, creating the following structure:

<html>

               <head>

               *Site Header HTML*

               </head>

               <body>

               *Template*

               *Site Footer HTML*

               </body>

</html>

Within the page editor, you are given the option to insert additional HTML header and footer scripts in the Advanced Options:

KB001g

This option is particularly helpful when adding scripts to track actions on an individual page. For example, form submission triggers on Google Analytics.

This is just a very simple overview of how HubSpot generates the components required for making a webpage and combines them together. To create a website that is visually appealing, you will have to dive deeper into CSS and Javascript and discover their capabilities in the world of Webpage design. 

 

Need further help with website development? Speak with one of our experts to find out how we can help.