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

CLEAN 5 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. 

First things first…

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

 

 

 

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

 

hs-design-tools-search

 

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.

 

hs-web-pages-create

 

Sounds pretty easy, right?  It is!

The (Glorious) 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.

 

mega-menu

 

1) Select the Menu Menu Style

There are five mega menu style options for you to choose from as a base starting point. Can you see them here in my Mega Menu Demo .  Each is easily customizable with Hubspot’s drag-n-drop modules.  To access the various mega menus jump into the Design Manager.

 

hs-design-tools-nav-1

 

In the search field type “Mega Menu.” This will bring up each of the mega menu global modules along with a home page template example that includes them. Click on CLEAN 5 – Home – Opt 9 – Mega Menu.  This will illustrate how the global mega menu modules are added to each template.

 

mega-menu-search

 

IMPORTANT: Notice that each global mega menu module is added right below the global header module and right above the header separator line thing (that’s a technical term, LOL).

 

mega-menu-placement-1

 

For the sake of this demo, we’ll use Mega Menu Opt 1 as our desired layout. With the file manager open on the left side of the screen, right-click the global mega menu and then select Edit Global Group. This is a fast way to reveal it in the folder to the left.

 

mega-menu-find-in-folder

 

2) Clone the Mega Menu Global Group

Next, you’re going to want to clone (make a copy) the global module by right-clicking the file name and clicking clone. This way you always have the original as a backup. I’d recommend adding a label to identify which navigation item the mega menu is for.

 

mega-menu-clone 

 

Go ahead and repeat this same process for any other navigation items that you’d like to use a mega menu for. For example, if you have a PRODUCTS in your main navigation that you’d like to trigger a mega menu for as well, you’ll want to create another cloned version and call it CLEAN 5 – Mega Menu – Opt 1 – Products.

Note: You don’t have to stick with the Opt 1 style. You can clone any of the variations to use them together.

 

3) Set Up the Mega Menu

Now that you have your cloned version, go ahead and open one of those puppies up if they aren’t already. You’ll immediately notice the column structure that make-up the mega menu.  Here is where you want to edit the content inside the mega menu.

To edit the nav titles which you see here:

 

mega-menu-title-edit

 

Click on each of the header modules.  Then, on the right side of the page, add the title of your choice.

 

mega-menu-title-edit-module

 

That was easy, right?

Next, click on the menu module to create the navigation links you’d like to include in your mega menu, then click the EDIT MENU button.

Important: The menu needs to be set to the Vertical orientation.

 

mega-menu-edit-simple-nav

 

When editing the existing menus, you can simply replace or add to what is already there or just delete everything and start fresh.

Important: These menus will only allow for sub-pages that go one level deep.  Adding a sub-page to a sub-page may turn out looking wonky (another technical term).

 

mega-menu-add-simple-nav-item

 

By now, I’m assuming that you’ve got the gist of how to edit the content in each mega menu. So, I’m going to stop there and carry on to the next step.

 

4) Add the Mega Menu(s) to Each Template

You’ve got all your mega menus set up and ready to rock. Pheeewwww… The hard part is done!  Now, you’ll need to add those global mega menu modules to each template you’re using.

With the template open, click ADD on the right-hand panel and search for Mega Menu. Then simply drag the mega menu module(s) right beneath the global header.

 

mega-menu-add-to-template

 

VERY IMPORTANT: Here is where it gets a smidge technical. You need to add a specific CSS class to the mega menu module once you’ve added it to the template.  Click on the module to highlight it. Then on the right-side add the CSS class:

mega-menu-1

 

mega-menu-add-class

 

For each mega menu module that you add, you’ll need to increment the number in the CSS class you add.  For example:

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

Each module MUST have a unique CSS class.  This is so that we can point the navigation item in the header to the correct mega menu.

 

5) Link a Nav Item to a Mega Menu

In the documentation above I show you how to create an Advanced Menu or the main navigation links at the top of the page. Feel free to reference that if you need to.

In your Content Settings jump over to the Advanced Menu editor which is located under Websites > Navigation.

Go ahead and select a menu if you already have one set up. For this demo, I’m going to start fresh.

Click Add Menu Item.

 

mega-menu-adv-menu-1

 

In the small text field on the left where you add the navigation label (ie. About) is where you’ll need to add a small bit of code.  This code will allow that nav item to trigger the correct mega menu.

This is the code you need.  Free free to copy/paste it.

<span class="mega-drop-1">About</span>

NOTE: If you copy/paste in the above HTML (<span>) into the Advanced Menu label field, take a look at the quote marks ( ” ). If they appear to be slanted, delete them and retype them in.  The slanted quote marks will keep your mega menus for being triggered. 

Of course, you can change “About” to anything you’d like. Just make sure it’s inside the <span></span>

 

mega-menu-span-write

 

Next, set the nav item to Item without link by clicking the Actions drop down.

 

mega-menu-no-link

 

Go ahead and repeat that process to build out your top-level navigation.

IMPORTANT:  If you are using more than one mega menu, you MUST use the same pattern of CSS classes as you did when adding the modules to the template.  But this time the CSS class you need to increment is mega-drop-1, mega-drop-2, mega-drop-3, etc.

mega-drop-1 will activate –> mega-menu-1

mega-drop-2 will activate –> mega-menu-2

mega-drop-3 will activate –> mega-menu-3

…and so on.

Because the mega menus are not displayed on mobile devices, I highly recommend adding the sub-pages (child pages) that you are displaying in the mega menu.  This way they are accessible for mobile visitors.

 

mega-menu-child-tem

 

Publish the advanced menu and you’re ready to move on to the final step.

 

6) Turn the Mega Menu On in the Global Header

Wooohoo! You’re almost finished.

Go back to the Design Manager and open up any template that contains the global header module. You’re going to want to open up and edit its settings.  I cover this above if you need a refresher.

First, make sure you’ve selected the advanced menu you just worked on.  Then simply toggle the mega menu option on.

 

mega-menu-on

 

Once you do that, you’ll notice a new set of toggles appear below.  This is there to allow you fine grain control over which navigation items will show the mega menu and which will show the standard drop-down menu.

These are numbered from left to right like this:

 

mega-menu-nav-numbers

 

Simply toggle on the nav items that you’ve added the mega menu too.

 

mega-menu-toggle-item

 

IMPORTANT NOTE: There is a known bug that Hubspot is working on that results in the toggles not staying switched after hitting publish.  This happens randomly. If it happens to you, I’ve found that If you do it a few times the setting will finally take.  I’m continuing to put pressure on them to fix this issue. 

I understand that there are a lot of steps here.  This is what was needed in effort to create an extremely flexible and beautiful mega menu for you to use. If you have any questions, please feel free to reach out.

Landing Pages

The CLEAN series comes with a plethora of killer landing pages that you can use to split test.  I’ve intentionally removed the global header and footer from these templates for the sake of increasing conversion rates.

It’s best practice to reduce what’s called the “choice ratio” on pages intended to convert visitors to leads.

You can certainly add those global elements back in by opening the template in the Design Manager and adding those global modules back in.

 

Adding Your Logo

If you’ve been scratching your head compulsively trying to figure this one out, you’re not alone.  

The white CLEAN logo is simply added to the text module that also contains the headline and sub-headline.  Since it’s white, it looks pretty much invisible in the editor.

All you need to do is click right above the headline and you’ll see it highlighted.

 

lp-logo-edit

 

Just delete that little sucker and add in your own logo.

Buttons & CTAs

Having a consistent button style and hierarchy is crucial to any high-performing website. Before getting into how to create CTA’s using the CLEAN button style, first, let me show you how to customize the look of the buttons to reflect your brand.

There are two main button styles. Your Primary and Secondary CTAs.  These are designed intentionally so that you can use them to draw visitors to important actions. They look like this.

 

cta-style

 

Customizing the color and shape:

To create global consistency of all CTA’s this customization is going to take place in the master CSS file (clean-5-style.css).  To find this file, jump into the Design Manager and use the search function.  If you haven’t noticed already, this search function is gold. 

 

css-search

 

At the very top of the CSS file, you’ll notice a section that will give you the ability to adjust the Primary and Secondary button color, font size, letter spacing, and how rounded you’d like the corners.

 

button-css

 

When making customizations, you’ll want to be sure that you’re only editing within the “quotation” marks. Otherwise, things will get super funky, super fast.

 

css-highlight

 

If you’re unfamiliar with how to find the #hex value of a color you want to use, you can jump over to www.colorpicker.com and find it.  Once you’re done all you need to do is hit the Publish Changes buttons.

 

Creating a CTA:

Now that you have your button style all set up and looking good, it’s time to create a CTA. This can be done from a variety of places, but for the purpose of this demo, we’ll do it from the CTA Manager.

 

cta-manager

 

Click that nice orange Create CTA button in the top right-hand corner to bring up the Simple CTA builder. By default “custom button” will be selected. This is what you want!

In the section labeled Button Content add the text for your button. I suggest keeping CTA labels short and to the point. (ie. “Download Now” vs. “Download Your Free E-book While Available”).

Next, use the Button style drop-down and select Link (no style) and disregard the Button Color option.

 

cta-link-no-style

 

Now, toggle down Advanced Options and give the button a CSS class of either cta-primary or cta-secondary depending on the importance of the button.

 

cta-add-class

 

That’s it for this screen! Click Next at the bottom of the page to continue to the CTA Options where you can give the CTA an Internal name, link, and assign it to a campaign.Click Save and you’re CTA is ready to use.

One thing to note. The preview of your button (unfortunately) in the CTA Manager will not show your custom button style. It will show it as “Link (no style).”

 

cta-demo

 

Don’t worry!  Everything is cool. Once you add the CTA to any of your pages it will look beautiful.

Icons

The CLEAN series takes advantage of the awesomeness of the (free) FontAwesome icon library.  Each custom icon module will give you the option to select from a long list of icon choices, but there are many more that can easily be added.

 

Add More (Free) Font Awesome Icons

Want to add an additional icon to the dropdown list you can select from?  Here is what you need to do.

Open up the Design Manager and do a search for: CLEAN 5 – Row – Icon

 

clean-5-icon

 

Let’s start with the 3 Column version. Open that puppy up.

You’re going to see a bunch of code. Don’t be frightened. You won’t need to touch that.

On the right- side, you’ll see a bunch of fields. Scroll down to the one that says Icon 1 (Font awesome) and click EDIT.

 

clean-icon-edit

 

You’re going to see a huge list of the available icons in the dropdown. Scroll all the way to the bottom of that list and click + Add another choice.

 

clean-icon-add

 

Now, jump over to FontAwesome.com and find the icon you’d like to add.

Let’s say you want to add a Pizza icon.  I mean who doesn’t like pizza, right?!?

What you need are the two CSS classes that create the icon.

 

clean-icon-pizza

 

In this case, what we need is simply this:

fas fa-pizza-slice

Note: if you click the line it will copy that entire code snippet to your clipboard which is ok, but you’ll have to delete some of it when pasting it into the field in Hubspot.

Jump back to Hubspot and drop that CSS class into the field on the right along with a descriptive label on the right so you can find it.

 

clean-icon-pizza-add

 

Important Note: You’ll need to repeat this process for each icon dropdown in this custom module.  Clicking the little wrench icon at the top of that sidebar will get you back to the list where you can find Icon 2 (Font Awesome) and repeat this process.

 

font-awesome-icon-mod

 

After you’re done be sure to PUBLISH the updates to the custom module.  Then you can go back to the web page editor and select your newly added icon. Hooray!

Hero Banners

A distinct characteristic of the CLEAN template series is the big beautiful “hero” banners at the top of each page. “Hero” is actually what they are referred to as in web-lingo. I’m not just being cheeky (this time). 

There are currently five different Hero Banner modules included in the CLEAN series.  The main difference in each is the type of content displayed within the banner (ie. Text, Video, Form, or Image).

The five include:

  • Hero with Text (Headline, sub-headline, copy, CTA, etc.)
  • Hero with Text & Form
  • Hero with Text & Image
  • Hero with Text & Video
  • Hero with Text, Video, Form

Should you want to add or switch one of these for another, you’ll need to do that from the Design Manager. With any template is open, on the right-hand side click+ Add, then in the search start typing “CLEAN 5 – Hero."

 

hero-add-mod

 

Chance are you won’t need to, but at least now you know. And knowing is half the battle! (10 pts. if you get that reference)

 

Packed with Customization Options:

Every Hero Banner module is extremely easy to customize directly from the Page Editor. Just click the module to bring up all the editable properties.

 

hero-edit-screen

 

Depending on which Hero module that you’re using, you’ll have the ability to choose from three different background types.  Image, Video, or Gradient (or solid color).

 

hero-gradient

 

GRADIENT / SOLID COLOR BACKGROUNDS

When selecting a gradient it’s pretty easy to see what’s going on. All you need to do is select the two colors you’d like to blend into one another.

You can also control the angle in which you want the gradient.

 

hero-gradient-angle-1

 

If you’d like to use a solid color, all you need to do is make sure the same color is selected in both options.

 

IMAGE BACKGROUNDS

In most cases, you’ll probably want to use an image background. There are a few important things you need to know.

Due to the nature of the Hero Banner needing to work across all sized devices, there are a few (very) small trade-offs.  The main one being that part of the image (top, bottom, left, right) is bound to get cropped out depending on the width and height of the browser the site is being viewed on.

Recommended Image Size:

  • 2000 x 1333px @ 72dpi (if Parallax is ON)
  • 2000 x 800px @ 72dpi (if Parallax is OFF)

I’ve found these sizes to be the best balance between load time and looking great across all devices. The width is what is most important to set to 2000px. You can let the height be defined by the ratio of the photo unless you decide to manually crop.

Things to avoid: It’s best practices never to embed text on a background image because of the variability of the crop.

 

VIDEO BACKGROUND

Video backgrounds are cool but need to be used wisely as they can easily increase the load time of your web page. You’re going to want to make sure they aren’t too long as an effort to keep the file size small.

Once you have your video file, you’ll need to select the file type.  I highly encourage you to use an MP4 file.

 

hero-video-type

 

Now that you have that set, click the Select File button to upload your video.

 

hero-video-upload

 

Important note: When naming your video file, be sure you don’t include any spaces in the file name. (ie. do-it-like-this.mp4  vs. not like this.mp4)

 

Image &  Video Overlay Color:

When you select either an image or video background you will also be giving the choice to set a color overlay which sits over the image but behind the text. This will help the content in the banner pop off the background and be more legible in some cases.

 

hero-img-overlay

 

Keep in mind that you will want to make sure you also set the Alpha transparency. I typically find that somewhere between 40-60% looks the best.

 

Setting the Height:

You have access to a few height settings so that you can get your Hero Banners looking awesome.

Your first choice is if you’d like the banner to take up the full screen, no matter what size the browser window is.

 

hero-full-size

 

Upon selecting Fullscreen, you will be given an option to Show an Animated Scroll Indicator. If you have additional content on the page, this will help a visitor to your website understand that they should scroll for more.

 

hero-show-scroll

 

Turning it on will give you this fancy little animation.

 

hero-scroll-demo

 

If you prefer to set your own height, you can do so with the three sliders that follow below.

 

HERO HEIGHT ON DESKTOP (VW)

Use the slider to adjust the hero’s height to suit your content.  Okay, so what does the VW mean you might be thinking.  This stands for vertical width.

 

hero-height-desktop

 

Basically, this allows the banner’s height to scale appropriately with the width and size of a visitor’s browser window. In turn, it helps keep the most amount of your image from being cropped on large screens.

 

HERO MINIMUM HEIGHT (PX) – DESKTOP / TABLET

For smaller screen sizes you’re going to want to set a minimum height that the banner will not pass.  This will help ensure that none of your content gets clipped or is out of view.

 

HERO HEIGHT ON MOBILE DEVICES (PX)

It’s a safe bet you can guess what this adjustment slider is for. Since on mobile, your content inside the banner will stack, it’s important you set a height accordingly.

 

Parallax Scrolling Effect:

Everyone loves the silky smooth scrolling effect. What’s not to love?!?! With each hero banner, you will have the ability to turn on or off the parallax scrolling effect.

 

hero-parallax

 

But Kevin, why would anyone ever want to turn that off?  I wonder the same thing myself. 

All cheeky comments aside, by selecting the parallax option your background image the lower half of your background photo is more prone to being out of view. This is to account for the area of the photo that needs to scroll into view.

 

Adding Text Content:

The hero banner gives you the ability to freely add any text content that you’d like via a rich text module.

 

hero-text

 

Important Note:  In 99% of cases you should avoid adding any specific style to the content via the text editor. Things like adjusting font sizes, color, etc. will override the theme styling. 1% of the time this is necessary, but generally, you will want to rely on global styles in order to create consistency.

 

STYLE SETTINGS

Right below the text editor are a few style settings that will help you get to your desired look while keeping thing simple and … well, CLEAN.

 

hero-text-style

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.

 

css-search-1

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:

  1. Base Font Size which controls the font size for the entire website.
  2. Blog Font Size which controls the font size of blog posts.

 

font-size

 

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.

 

font-size-edit

 

For the Typography Nerds: I’ve based all type sizes from “Augmented Fourth” using this great little typography tool called www.type-scale.com

 

ADVANCED

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.

 

font-header

 

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.

 

GOOGLE FONTS:

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.

 

font-google-select

 

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.

 

font-google-custom

 

Now that you’ve selected your font weights, click the embed tab and copy the code.

 

font-google-copy

 

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.

 

font-google-embed

 

Great! You’ll very quickly see the Site Header HTML section. Just paste that bit of code.

 

font-google-paste

 

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.

 

fonts-to-css

 

Venture on back to your master CSS file and scroll down to this section.

 

font-css-edit

 

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! 

 

thatwaseasy

 

FONT FILES:

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 Squirrelto get the others. Once you’ve got those, you’re going to want to jump into the File Manager on Hubspot.

 

font-file-file-man

 

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.

 

font-copy-url

 

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.

 

css-search-2

 

Now, at the top of the font section of the CSS file look for this section.

 

font-code-css

 

 

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.

 

font-custom-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.

 

font-name-custom-2

 

That’s it! You’re done. Just hit Publish Changes and you’re good to go.

 

Fill Out This Form

Lorem ipsum dolor amet shabby chic cold-pressed vaporware, gochujang ugh drinking vinegar helvetica meggings hella organic biodiesel.

Get Free Widget