<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1021763991361312&amp;ev=PageView&amp;noscript=1">
clean-6-hero-banner

CLEAN 6 Documentation

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. 

All-New CLEAN 6 Module Library

If you're looking for even more great tools to reference when building out your CLEAN website, pop on over to the module library.

Module Library

 

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.

twitter.com/hubspothero
youtube.com/c/hubspothero

 

getting-started-with-clean-6

 

 

The Basics

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.

 

hs-design-tools-nav

 

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.”

 

design-tool-search-1

 

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.

 

select-template

 

Sounds pretty easy, right?  It is!

 

Multi Language Options

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 template or modules that you have to keep organized.  In this video I'll walk you through how easy it is.

 

how-to-translate-global-navigation-in-hubspot

 

 

The Mega Menu

Setting up each mega menu requires a handful of steps in order to take advantage of.  Let’s get started and jump right in.

This video will definitely help.

clean6-setting-up-mega-menu

 

Step 1:

The first thing you're going to want to do is go into HubSpot's Design Tools and open up the CLEAN 6 - Home - Opt 10 - Mega Menu template. 

 

mega-menu-open-template

 

This template is great to reference and includes all of the mega menu layout options.  Note: Just because this template is labeled "mega menu" doesn't mean it's the only template you can use if you want the mega menu.  You can use any of the CLEAN templates. You'll just need to add the mega menu modules to each. 

Don't worry. We'll get into that.

 Step 2:

Decide which mega menu layout option that you'd like to use to create yours. There are four options to choose from. If you plan on using the same layout for multiple mega menus, you will want to clone the mega menu first.

mega-menu-clone

 

Now, go ahead and click on the cloned version in order to open up the global group module.

This is where you can edit the menu items and content that appears in the mega menu.

 

mega-menu-group

Once you've made all the updates to the mega menu you can go ahead and close that tab and repeat this process for any other mega menus you plan on adding.

 

Step 3:

Open up each of the CLEAN templates you plan on using to build your website and add in each of the mega menu modules that you just created.

Do this by clicking the + Add tab then search for "CLEAN 6 - Mega Menu.

 

mega-menu-add

 

Then simply drag the modules into the template.

IMPORTANT: Drop it above the little break line in the template.

 

mega-menu-drag

 

Next. Give each mega menu a CSS class by clicking on the module to highlight it blue and entering...

mega-menu-1, mega-menu-2, mega-menu-3, etc. 

Depending on how many you are using.

 

mega-menu-give-class

 

Step 4:

Once you have all your mega menu modules added to each of the template you're using, it's now time to TURN ON the mega menu feature.  

In any of the templates you have open go aheads and jump into the EDIT mode of the Global Header module.

 

mega-menu-turn-on

 

Step 5:

Now, you're ready to set up your main navigation.  Jump over to your Content Settings and access the Navigation which is located under the Website dropdown.

In order to link a navigation item to a specific mega menu, you'll need to add the tiniest amount of code to wrap the label.

It will look like this:

 

mega-menu-label-1

The word "Mega Menu 1" would be your nav items name.

Around it you want to add this:

<span class="mega-drop-1">Your Label </span>

This is how it works...

mega-drop-1 triggers mega-menu-1

mega-drop-2 triggers mega-menu-2

See the pattern?

IMPORTANT: If you copy and paste the code above and notice the quotation marks ( " ) are slanted or curved, be sure to delete them and type in new ones.  For some reason that screws things up.

Also, please note that the mega menus will not appear when in the page editor, so don't be alarmed. Simple go to the preview mode to see them in action.

 

Global Style

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.

 

global-style-access

 

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.

 

global-style-ui-color

 

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.  

 

global-style-divider

 

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.

 

global-style-typography-opt

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. 

 

 

global-style-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 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. 

 

global-style-google-font-1

 

You'll see a little drawer pop in at the bottom right of the page. 

 

global-style-google-font-2

 

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. 

 

global-style-google-font-3

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.

 

global-style-google-font-4

 

Cruise on back to HubSpot and paste that into the text box. 

 

global-style-google-font-paste

 

Next, jump back to Google and copy one of the font-family lines to your clipboard.

 

global-style-google-font-5

 

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.

 

global-style-google-font-family

 

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:

  • .EOT
  • .WOFF
  • .TTF

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.

 

global-style-upload-font

 

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.

 

global-style-upload-font-screen

 

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.

 

global-style-upload-font-1

 

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.

 

global-style-font-name-3

 

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.

 

global-style-font-placeholder

 

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.

 

global-style-cta-select

 

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. 

 

global-style-buttons-custom

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.

 

cta-builder

 

Go head and give the button a label as you normally would. Then under the Button Style Dropdown select LINK (No Style).

 

cta-dropdown

 

Now, click the Advanced Options dropdown and give the button one of your three custom CSS classes.

  • cta-primary
  • cta-secondary
  • cta-tertiary

 

cta-add-class

 

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.

 

cta-list

 

 

Blog

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.

 

how-to-set-up-a-blog-on-hubspot-using-clean

 

 

Love these and want more?

Enter your email address below and we'll let you know when we add new resources.