Setting up different websites that have their own unique style and global elements is easy by using child themes. Let me show you.
This article is for you if you have multiple domains in your HubSpot account or you're creating a series of microsites using the same domain. Either way, the process is the same.
1) First things first. Create your child themes.
Each website needs to have its own child theme in order to accomplish this. If you're not familiar with how to create a child theme, don't worry. I've got you covered and have a video here on how to create a child theme.
Go ahead and set up a child theme for each of your websites now.
2) Clone the Global Module to the Child theme
Each child theme needs to have its own set of global elements which is the Global Header and Global Footer module. The good news is that HubSpot now makes this SUPER easy.
In the PARENT theme open up the MODULES folder and find the Global Header(v2) and Global footer. Simply right-click them and then CLONE TO CHILD THEME.
Next, it will ask you to select which CHILD theme you want to add it to. You know what to do.
Optional: Clone the attached CSS and JS files.
This step is only necessary should you or someone on your dev team want to make any code-level edits to the CSS or JS files. If not, skip this step and proceed to step 3. You can always change your mind later.
If you do, the process is very similar to the above.
First, the CSS file (global-header-v2.css):
Next, the JS file (mega-menu.js):
The last step is to make sure these two files are correctly attached to the global module. All you need to do is open up the global module inside your child theme and scroll all the way down the right sidebar. First, you're going to want to remove the two attached files by clicking the X.
Then click the Add link and be sure to locate the version of the files that are WITHIN YOUR CHILD THEME.
Do the same thing for the mega-menu.js file.
Is this starting to make sense now? I knew it would. You're awesome like that.
Repeat this process for the Global Footer.
Now that you've done the first one, the other global module should go super fast. As a heads up, the global footer only has a CSS file so you won't need to worry about a JS file for this one.
You got this! I believe in you.
3) Clone Your Child Theme
As I mentioned above you'll need to create a child theme for each website or microsite you plan on making. Now that you've done the legwork above, this part is easier.
Go ahead and right-click on your new, fancy child theme and select CLONE THEME. Be sure to give it a unique name so can easily find it when creating web pages.
IMPORTANT: Once that's done processing go ahead and click on the new cloned theme and open up the Global Header module. Then on the right sidebar scroll all the way down until you see the attached CSS file.
Click the X to remove it. You'll re-add the correct one in YOUR NEW CHILD THEME. Again, if you skipped this step above, you won't need to worry about it.
Now click the ADD link and then type in global-header-v2 and look for the one that is inside your child theme.
Pay attention to this part as it needs to say the name of the child theme you set up.
Repeat that process for the mega-menu.js file and then do the same thing for the global footer module.
4) Give yourself a high-five
I know that was a lot of steps but now you're done and ready to set up multiple websites inside your HubSpot account.
Plus, Baby Yoda is really proud of you right now. So... there's that. :)
