Documentation & Support
Getting Started with the Industrial HubSpot Theme
Step 1
Do you currently have a HubSpot site or blog, and you want to rebrand? Or is this a new site?
If you are rebranding, you will need to make updates without impacting your current site. Read guide
If this is a new site, you can move on to step 2.
Are you a developer and planning on customizing the theme code? Create a child theme
Step 2
Are you new to using HubSpot themes? If so, I highly recommend reviewing these educational resources before going further, customizing the theme.
- The HubSpot CMS for Marketers (course)
- How to edit content and layout in drag and drop templates (article)
- How to Create a Website Using a HubSpot Theme (article)
- Learn about Growth-Driven Design (video)
Some Common Questions
Step 3
Plan your site architecture. How should your top navigation menu look? What about the footer navigation? Once you have this ready, update your default or create a new navigation menu.
Create your navigation menu. Read guide.
Edit the global header (guide) and select your menu.
When editing a page, hover over the header and click on it when it turns orange. Then click the edit global content button.
Click on Primary Navigation and select your menu
Step 4
Begin building your pages using the provided templates
Step 5
Go to the theme settings panel and click on the header to open the global partial editor screen. Select your new menu from the dropdown list: update colors and fonts and anything else you would like to update to the theme.
Step 6
Navigate your site and begin sketching on paper what content and images you need for each page. I recommend doing this on paper vs. on screen because you can work through layout issues a lot quicker. Once completed, edit the pages and begin entering your text first.
You can use placeholder images for now so you can visualize your page layout. Once things are looking good, you then need to source images for your design. Here are some excellent sources for free photos and royalty-free images.
Canva Image Templates
- Hero Mobile
- Hero Desktop
- Hero Desktop – parallax
- 16:9 images
- 4:3 images
- Landing Page Background Image
- CTA Image Button
- Blog Post Background
Step 7
Update your blog templates from the theme. Read guide
Module Documentation
Section Modules
These modules are intended for use in a 1 column section because they are wide content. Some even include column grid options.
- Hero Section
- Image Row Section
- Cards List Section
- Company History Section
- Global Locations Map Section
- Page CTA Section
- Page Title Section
- Product Details Section
- Related Links Section
- Team Members Section
Content Modules
You can include the following in multiple column layouts without impacting the design.
- Hover Image Blocks
- Icon Text
- Blog SVG Sharing Buttons
- Document Image Shadow
- Jump Links Navigation
- Landing Page Header Buttons
- Pillar Page Link
- Social follow
- Vertical & Horizontal Spacer
- Tabbed Content
- Responsive Video Embed