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.

twitter.com/helpful_hero
youtube.com/c/helpfulhero

 

 

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.

 

 

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.

 

 

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 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:

 

 

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

 

 

Main Navigation:

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.

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

 

 

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.

 

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. 

 

 

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.

 

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.

 

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.

 

 

Then simply drag the modules into the template.

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

 

 

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.

 

 

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 ahead and jump into the EDIT mode of the Global Header module.

 

 

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:

 

The word "Mega Menu 1" would be your nav item's 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 Footer

Exactly like the Global Header, once you edit the footer module all changes will ripple through each template.  From the Design Tools, with a website template open, scroll to the very bottom and click on the Global Footer module.

 

 

Select Your Footer Type

You've got two options to choose from.  Beefy or Minimal.

 

Beefy: Selecting this option will give you the full footer in all its glory. You'll be able to set up additional navigation links, show a recent blog post, and more.

Minimal:  Just as it sounds, this option will only show the logo, copyright, and privacy & terms links (which you can remove as well).

 

Adding Your Logo

This is a good place to start, so let's do it!  The logo is included in the Minimal Footer options, so that's where you can access it.

 

 

I'm sure you'll recognize these options.  The main difference between the global header logo and the footer logo is how you edit the size.  In the footer, you can use the width x height properties.

 

 

Edit Copyright

While you're here in the minimal footer options, you can also take care of editing the small copyright text that falls under the logo.

 

 

Edit Legal Links

Also in the minimal footer options, you can add, remove, or edit the legal links that sit at the base of the page.

 

 

Edit the Footer Navigation

If you have the beefy footer type selected, you'll see the option to jump into each Nav Column.  Go ahead and jump into Nav Column 1. The other two are the same so we'll use this one as an example.

 

 

Here you'll find very simple options to edit the column title and menu links. 

 

 

Edit Blog Post Column

You've probably noticed there is a 4th column that shows a blog post.  Pretty rad, right?   You can easily select which blog (if you have multiple) and which tag you'd like the post to pull from. 

 

 

Don't have a blog or prefer not to show a post in the footer?  No problem-o! I've got you covered.  You can simply select to show a rich text editor and drop in whatever you like.

 

 

Social Media Links

As you're exploring I'm sure you'll see the option to add links to all the popular social media sites.  You can easily turn each ON/OFF.

 

 

Style Options

I've included all the style options you'd need to customize the look and feel of the footer.  Colors, font sizes, spacing... Basically, everything and the kitchen sink.

 

 

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.

Images

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.

 

Video

There are two ways to add video to any of your website pages.

 

Embedded Video

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.

 

Background Video

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.

 

 

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.

 

 

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 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:

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

 

 

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.

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

 

 

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.