CLEAN 6.1 Premium Pack
No one likes reading. Especially documentation... That's why I've included a ton of GIFs and videos to help make this page a bit less boring.
Looking for the CLEAN 6.1 THEME Documentation?
Thank you for going with my CLEAN pack. 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 Tools, you can easily find the templates by clicking on the folder icon on 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!
Global Header & Nav
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 features included in the header. We'll get to those in more detail further down this page.
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 be saved as
The white version will allow you to take advantage of the option to make the header have a transparent background like this:
Whereas 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 set up 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 that's 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 Header "Hat"
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.
Header Call To Action:
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...
Header Style Options
I've packed the global header with loads of style options that you can customize to your heart's 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.
- Standard header color options
- Sticky header color options
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.
With CLEAN 6, it's super easy to translate global elements like your main navigation. Nope! You won't have to bother cloning a bunch of templates or modules that you have to keep organized. In this video, I'll walk you through how easy it is.
Images & Video
One of the first things you'll probably want to do is start adding images and video to your website. Before you do there are a few important things that you need to know to make sure that your images and video are the right size and not slowing down your website.
You want to be very mindful that you're not uploading high-resolution images. Typically if you're downloading images from a stock library like Unsplash or Shutterstock, you're downloading the HIGH-REZ version.
You're going to want to resize each image so they are optimized for the web. There are a variety of places to add images throughout the CLEAN series. Here are two that will cover most cases.
- Hero Banner: 1920px (width) x 1080px (height)
The important part is the width. You can let the height be set according to the ratio of the photo.
- Card Modules: 800px (width) x 600px (height)
This will really depend upon how many cards you're selecting to show in a single row. You may need to increase or decrease the size depending on what you select.
There are two ways to add video to any of your website pages.
This is perfect when you want someone to be able to click play and watch a video like the ones on this page. You can upload them directly to HubSpot with the VidYard integration or simply embed from YouTube, Wistia, Vimeo, etc. Embedded videos won't fully load until a visitor clicks play, so you don't need to worry about compressing these types of videos.
The CLEAN series gives you a way to add background videos to select custom modules. These are great to add even more visual appeal to your website.
NOTE: These are background videos and will be cropped in some way depending upon the browser window size. I do NOT suggest using videos with text in them. It will get cropped out on some screens.
Each clip that you add should be between 5-10MB in file size and generally best if at 720p.
If you don't use Adobe Photoshop or Premiere Pro here is a great way to optimize your images and videos using free online tools.
HubSpot blog templates work a bit differently than webpage or landing page templates. In this short 7 minute video, I'll show you exactly how to get the CLEAN blog templates set up.
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 without 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
Edit the Icon & Text Link Colors
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.
Edit the Divider Style
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.
Adding a Custom Font
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 on/off the ability to embed a Google font or upload a custom font.
How to use a Google Font
I love Google fonts! Their free library of fonts is just awesome and they make it super easy to use 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 you can use and it's 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 affects 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.
How to Upload a Custom Font
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 "placeholder" text in that field. Just delete the text and make sure it looks gray.
Hit that orange PUBLISH button and you're all done!
CTAs & Buttons
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.
- Primary Call to Action (cta-primary)
- Secondary Call to Action (cta-secondary)
- Tertiary Call to Action (cta-tertiary)
- Form Submit Button (default)
- Form Submit Button (alternative)
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.
Creating CLEAN CTAs
First, you're going to want to jump into the CTA manager in your HubSpot account and click CREATE CTA.
Go ahead 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.
Love these and want more?
Enter your email address below and we will let you know when we add new resources.