You’ve got all the pieces. Now it’s time to start building. Fun!
Header & Main Nav
Buttons & CTAs
typography / fonts
First things first… If you’ve purchased my CLEAN 5 template pack, I want to thank you. I greatly appreciate your business.
If you’re simply in the research phase figuring out which template pack is right for your business, you’ve come to the right place. I’m 100% confident that you’ll love my CLEAN series. If you have any questions, you’re just a few clicks away. Feel free to use my instant chat feature to reach me directly. Not a robot. 🙂
You can also find me on Twitter and Youtube for Hubspot tips, tricks, and upcoming updates to the CLEAN series.
Once you purchase the CLEAN template pack from the Hubspot marketplace, it will automatically be added to your account and ready to use. Then, you’re ready to rock. 🤘
All of the templates are accessible from within Hubspot’s Design Tools.
From the Design Manager, you can easily find the templates by clicking on the folder icon in the top left side of the screen then, using the search to type “Clean 5.”
The good news is that you’re likely not going to need to use the Design Manager very often when editing CLEAN 5 templates. Most customizations can be taken care of right from the Page Editor.
Creating a webpage based on a template is super simple. From Website Pages just click Create New Page, then type CLEAN 5 into the search to bring up all of the templates. Select the one you want.
Sounds pretty easy, right? It is!
Header & Navigation
One of the first things you’re going to want to do is set up the header of your website to show your logo and navigation items. This is a GLOBAL custom module. Any edits you make will automatically ripple to every template.
To make edits to your Global Header you’ll need to go into the Design Manager and open up any of the CLEAN 5 Website Templates. It doesn’t matter which one, but I’d say go with CLEAN 5 – Home – Opt 1.
The first thing you need to do is select the Advanced Menu you’d like to use, if not the default. If you haven’t set up your Advanced Menu, you’ll actually want to do that first.
In the header, click the gear icon to access your Settings. Then in the left-hand nav select Website, then Navigation. It’s pretty intuitive from there.
Once you’ve created your Advanced Menu, jump back the CLEAN Global Header and select it from the dropdown list.
Adding Your Logo:
Now, let’s get your logo added. I recommend uploading two different versions of your logo. A color version and a solid white version. Both logos should have transparent backgrounds and saved as a .PNG file for best results. The white version will allow you to take advantage of the option to make the header have a transparent background like this:
(More on that in a moment.)
Chances are you’re going to want to finesse the size of your logo. Disregard the width x height options. Instead, look for the Logo Size Scroller. This controls the max-height of the logo.
Once you adjust the size of your logo, you’ll want to make sure the navigation elements are nicely aligned. To do this, scroll down a bit and look for the slider that will allow you to adjust the spacing above the navigation.
Header Background Color:
By default, the Global header has a transparent background. This is purely a design aesthetic choice. If you’d prefer a solid color background, you can simply toggle this option off and select the background color of your choice. Depending on the color you choose, you may need to customize the font colors. You’ll need to do this from the Master CSS file which we’ll cover below. Don’t worry, it’s easy.
Header Call To Action:
You can select which CTA you’d like to appear in the top right-hand corner of the page or if you’d like to include one at all. I also give you the ability to hide or show it on mobile devices. If you have a wider CTA, I’d suggest hiding it on mobile so that it doesn’t overlap your logo.
Full-Width Header vs. Aligned with Content:
You have the option to display your header at full-width of the browser window or constrained to the max-width of the content area. By default, the header is set to full width. You can change it by toggling it off here.
Pre-Header Navigation Option – The Header “Hat”:
Included by popular request, you have the ability to include a pre-header menu for additional (but less used) navigation links. This is basically the slim bar that sits above the navigation.
You can turn it on/off and easily control the background color. When you want to add items to just click the little (+) button.
As you’ll notice in the header there is a little search icon. I’m guessing you know what this does. Should you want to turn this off… Yep, you guessed it! There’s a toggle for that.
Typography / Fonts
It’s no secret. I love fonts and how the subtleties of a good font pairing can impact visual design. I’ve given you a few ways to customize the typography of the CLEAN series. Let’s first cover some of those basics.
For the most part, you should make all changes to font sizes and types at a global level from the master CSS file (clean-5-style.css). This will ensure that all headers, body copy, etc. are consistent throughout your website.
Changing the Font Size:
Should you want to adjust the font sizes of your website, there is only one adjustment that you need to make in the CSS file.
First, open up the clean-5-style.css file in the Design Manager.
Near the very top, starting at line 110, you’ll see the text block with all the font customization options. There are two that you can change:
- Base Font Size which controls the font size for the entire website.
- Blog Font Size which controls the font size of blog posts.
By changing the Base Font Size, all other headers (h1, h2, etc.) will scale accordingly so that the ratio and hierarchy of the typography will remain intact.
When modifying the type size, make sure that you’re only adjusting what’s in the quotations.
For the Typography Nerds: I’ve based all type sizes from “Augmented Fourth” using this great little typography tool called www.type-scale.com
Should you want to customize the size of the headers, you can do that by scrolling a bit lower. It’s not something I recommend as it can get tricky, but if you use the Type-Scale tool I mention above, it can help.
The header sizes are separated into three sections. Size for desktop, tablet, and mobile devices. You’ll want to adjust for each device. This might look scary to you. That’s why I labeled it advanced. Should you have any questions, feel free to reach out.
Using a Custom Font:
There are a few steps that you need to take in order to use a custom font. Those steps really depend on if you have the actual font files or you’re using a font repository like Google Fonts, for example. I’ll walk you through both here.
Important note: Custom fonts will only work with web pages. The will not work with email templates. This is not a limitation of the templates. Rather a known limitation across most popular email clients.
This is one of the easiest ways to add a custom font to your Hubspot site. If the font you use happens to be in the Google Font repository, it’s definitely worth going this route.
First, jump over to Google Fonts and find the font you’d like to use. We’ll use Lato for this example.
In the top right corner, click Select this Font.
At the base of the page, you’ll see that the font has been selected. Next, you’re going to want to click the Customize tab and select the font weights that you’d like to include. Keep in mind that the more you include will have an impact on the load times of your website.
Now that you’ve selected your font weights, click the embed tab and copy the code.
Awesome! Now that you’ve got that in your clipboard let’s jump back to Hubspot. You’re going to drop that snippet of code into the Site Header HTML which is located in your Content Settings. Access your content settings by clicking the little gear icon in the header.
Then on the left side click Website then Pages.
Great! You’ll very quickly see the Site Header HTML section. Just paste that bit of code.
Booooom! Part one is done! Now, all you need to do is adjust the CSS file to use your new font. You’ll want to reference back to Google Fonts and look for this.
Venture on back to your master CSS file and scroll down to this section.
I’m pretty sure you can guess where you need to paste the code you copied. Go for it!
That’s it. You’re done! If you feel so inclined to smash something, here you go. Smash it! 🙂
This method of adding a custom font is a bit more involved but relatively easy. For the best results, you’re going to need a minimum of three version of the font file.
.woff .ttf & .eot
If you only have one of these versions, you can use an online converter like Font Squirrel to get the others. Once you’ve got those, you’re going to want to jump into the File Manager on Hubspot.
I’d recommend creating a folder named fonts if you don’t have one already. Then upload all your font files to that folder. Click on the row that has your font file in order to bring up the File Details screen.
From there, simply Copy the URL of the file. You’re going to need the URL for each font file you’ve uploaded.
I’d suggest creating a temporary Google Doc, Word Doc, or somewhere you can paste the URL for use in the next step. You can also just keep this tab open to copy the URL when you needed it.
Next, jump into the Design Manager and open the clean-5-style.css CSS file.
Copy the CSS code below to your clipboard:
/* Custom Font Normal */
font-family: ‘Font Name’; src:
Now, at the top of the font section of the CSS file, paste in the code.
Awesome! You’re almost done. Next, on each line that says URL you’re going to need to paste in the URL of each font file.
Once that’s complete, add in your font’s name.
Great! Just one more step and you’re finished! Scroll down just a bit in the CSS file and replace Rubik with your font name.
That’s it! You’re done. Just hit Publish Changes and you’re good to go.