There is a better Way to grow
One of my favorite takeaways from attending HubSpot's INBOUND is their refreshing approach to...
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 Tools, 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 6.”
The good news is that you’re likely not going to need to use the Design Tools very often when editing CLEAN 6 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 6 into the search to bring up all of the templates. Select the one you want.
Sounds pretty easy, right? It is!
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 Tools and open up any of the CLEAN 6 Website Templates.
It doesn’t matter which one, but I’d say go with CLEAN 6 – Home – Opt 1.
Once that puppy's open, go ahead and click on - START HERE ⇨
Right away you're going to see a range of options allowing you to turn on/off some feature included in the header. We'll get to those in more detail further down this page.
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
The white version will allow you to take advantage of the option to make the header have a transparent background like this:
Where as the "Sticky Header" version will appear as a visitor scrolls down the page. Typically you want this logo to be smaller so the nav bar is slim and takes up less screen real estate.
Now that you've got those uploaded you can setup where they should link too when someone clicks the logo. Typically this is going to be your home page.
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-width of the logo.
If you have a wide logo, you're going to want to adjust the size it displays on mobile to avoid it running into the CTA if you have it displayed.
Man... This is simple, right?? Go ahead and back out of this menu and let's keep this party bus rollin'.
The next thing you're going to want to do is set up your main navigation elements. I'm pretty sure you can guess what you're going to click next... Go ahead, click that little monkey.
The first thing you're going to see is a dropdown that will let you select which Navigation menu you'd like to use. It will automatically be set to your DEFAULT menu. If thats the one you're already using, then you're all good. You can leave this as is.
Notice it says (Default Language). This will be really important if you decide to create translated web pages. More on that later. Just know I've made it SUPER AWESOME & EASY to translate global elements.
The "hat" is that slim little nav bar above the main navigation where you can add links you want to make accessible, but aren't primary paths for visitors of your website.
If you have it turned on (in the START options), you'll see how you can easily edit the menu options here.
It's a good idea to place a primary call to action in your header so that it's always easily accessible. You do have the option to turn this ON/OFF in the START menu option. If you have it turned on, you can edit it in the same place you access your Nav Elements.
You also have an option to hide the CTA on mobile. This is super handy when you have a CTA with a long label and it runs into your logo.
Let's move on, shall we...
I've packed the global header with loads of style options that you can customize till your hearts content. Go ahead and pop into the Style Options and you'll see what I mean.
This is where you're going to be able to adjust the colors, font treatments, etc.
You'll notice a group of important color options right at the top.
I highly encourage you to make sure that these two options contrast each other. For example... If your standard header works great on a dark background, make sure the sticky nav works great with a light background.
You will have options when editing each page to select the sticky nav style should you need it, and you likely will in some cases.
There are loads of other customization options I'll cover in the video.
That’s it. You’re done! Just hit the publish button.
This has got to be one of the new features added to CLEAN 6 that I'm most excited about. Now, you can control the entire global style of your website to reflect your brand with out touching a lick of code. Not even CSS. It's all packed into this awesome global module.
Access it by opening up any website template in Design Tools.
Now that we're here, let's rip through the style options available. First, go ahead and click //// UI Elements
These will act as the default across all webpage, landing page, blog, and system page templates. As you're editing each page, there will be an option to override them in case you need to.
A common customization request I would get is to modify the look of the little divider you can add above the content as a minimal design element. Now, I've built it in so that you can control the look and style of it.
You can modify the color, width, thickness, and space between it and the content below.
Hands-down, the most popular customization request I receive is being asked to add in custom fonts. I've streamlined this entire process and have made it incredibly easy to dial in your fonts to mirror your brand style guidelines.
In the Global Style Settings module, click on Typography.
At the very top you'll see where you have the option to turn turn on/off the ability to embed a Google font or upload a custom font.
I love Google fonts! Their free library of fonts is just awesome and they make it super easy to us on your website. Here is what you're going to do...
Pop on over to fonts.google.com and search for the font(s) you want to use. The CLEAN series uses Abel and Roboto, so we'll use those for this example.
When you've found your font click the ( + ) button.
You'll see a little drawer pop in at the bottom right of the page.
This screen will become important in a second. For now, let's go find and add our second font, Roboto.
Roboto is a font that comes with a variety of font-weights and styles so you can use and its important we add those. To do so, click the Customize tab and select the weights you plan on using.
Notice that as you add/remove font weights it effects the load time. It's best to say in the Fast or Moderate range.
Now, jump back to the EMBED tab and copy the standard embed link to your clipboard.
Cruise on back to HubSpot and paste that into the text box.
Next, jump back to Google and copy one of the font-family lines to your clipboard.
Jump on back to HubSpot! You'll notice that you have full control over each type element (H1, H2, H3, etc.). Go ahead and paste that font family on each type element you want to apply it to.
Yes, it's a tad bit tedious but it's the best way to give you maximum control.
I've made this process super-duper easy. First things first... You're going to need a variety of font file types to ensure your font will render across all browsers. The file types you'll need are:
Don't freak out if you don't have these file types. All you need is one font file and you can use a handy-dandy Online Font Converter.
Once you have your font files, click the + Add button.
On the next screen you're going to see three boxes to upload each font file type and a place to add the font name. Do that.
IMPORTANT: If you are using multiple font weights (thin, normal, bold, etc), you will need to upload the font files for each weight. Make sure you give them all the same custom font name.
To add more font files, click the < Back to //// Typography link.
Then click the +Add link and go through the same process until all your fonts are uploaded.
Once you're happy, scroll down through all the typography settings and update each with the EXACT name you gave your custom font. You'll want to add that here.
Important: If you are also including fonts from Google, make sure you remove the font family name from the section right above. There is "place holder" text in that field. Just delete the text and make sure it looks gray.
Hit that orange PUBLISH button and you're all done!
Creating awesome looking buttons couldn't be easier with CLEAN 6. From the Global Style Module, go ahead and click the CTA & Button Styles option.
Here you're going to have the option to style 5 types of buttons that you can use throughout the experience of your website.
The primary, secondary, and tertiary button styles should be treated just as they sound. You're going to want to give the most "visual weight" to the primary call to action. That's a fancy way of saying, make that button POP off the page as the button you most want a visitor to click.
You also have the ability to style the form submit buttons separately along with an alternative version. This alt-version option is only available in all CLEAN custom modules.
All these options as you scroll the page should be pretty explanatory. Once you've dialed in your button style, here is what you need to know about applying it to CTAs.
First, you're going to want to jump into the CTA manager in your HubSpot account and click CREATE CTA.
Go head and give the button a label as you normally would. Then under the Button Style Dropdown select LINK (No Style).
Now, click the Advanced Options dropdown and give the button one of your three custom CSS classes.
Click NEXT at the bottom and continue through the steps.
One thing to note: You may notice that in your list of CTAs that the buttons don't look styled. Don't worry. They will when you add them to a page.
Enter your email address below and we'll let you know when we add new resources.