Documentation
You’ve got all the pieces. Now it’s time to start building. Fun!
First things first… If you’ve purchased my CLEAN 5 template pack, I want to thank you. 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.
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 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.”
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.
Sounds pretty easy, right? It is!
Header & Navigation
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 Manager and open up any of the CLEAN 5 Website Templates. It doesn’t matter which one, but I’d say go with CLEAN 5 – Home – Opt 1.
The first thing you need to do is select the Advanced Menu you’d like to use, if not the default. If you haven’t set up your Advanced Menu, you’ll actually want to do that first.
In the header, click the gear icon to access your Settings. Then in the left-hand nav select Website, then Navigation. It’s pretty intuitive from there.
Once you’ve created your Advanced Menu, jump back the CLEAN Global Header and select it from the dropdown list.
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 saved as
(More on that in a moment.)
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-height of the logo.
Once you adjust the size of your logo, you’ll want to make sure the navigation elements are nicely aligned. To do this, scroll down a bit and look for the slider that will allow you to adjust the spacing above the navigation.
Header Background Color:
By default, the Global header has a transparent background. This is purely a design aesthetic choice. If you’d prefer a solid color background, you can simply toggle this option off and select the background color of your choice. Depending on the color you choose, you may need to customize the font colors. You’ll need to do this from the Master CSS file which we’ll cover below. Don’t worry, it’s easy.
Header Call To Action:
You can select which CTA you’d like to appear in the top right-hand corner of the page or if you’d like to include one at all. I also give you the ability to hide or show it on mobile devices. If you have a wider CTA, I’d suggest hiding it on mobile so that it doesn’t overlap your logo.
Full-Width Header vs. Aligned with Content:
You have the option to display your header at full-width of the browser window or constrained to the max-width of the content area. By default, the header is set to full width. You can change it by toggling it off here.
Pre-Header Navigation Option – The Header “Hat”:
Included by popular request, you have the ability to include a pre-header menu for additional (but less used) navigation links. This is basically the slim bar that sits above the navigation.
You can turn it on/off and easily control the background color. When you want to add items to just click the little (+) button.
Site Search:
As you’ll notice in the header there is a little search icon. I’m guessing you know what this does. Should you want to turn this off… Yep, you guessed it! There’s a toggle for that.
IMPORTANT NOTE:
If when clicking the search icon, the search field doesn’t appear like the image above, it’s due to a Hubspot bug that they are aware of. I’ll spare you the details.
The good news is the fix is easy. Here is what you need to do.
1) Download this Zip File
Inside is two files that make the “modal window” work:
jquery.modal.min.css
jquery.modal.min.js
2) In Hubspot, go to the File Manager
From here, I’d recommend creating a new folder and naming it “jquery” and then dropping the two files directly in there.
3) Go to the Design Manager and open up the CLEAN 5 – Global -Header module
Once you’re there, on the
Simply click the blue ADD link and then Select from File Manager.
That’s it. You’re done! Just hit the publish button.
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.
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.
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.
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).
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.
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.
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:
Click on each of the header modules. Then, on the right side of the page, add the title of your choice.
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.
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).
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.
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
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.
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>
Next, set the nav item to Item without link by clicking the Actions drop down.
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.
Publish the advanced menu and you’re ready to move on to the final step.
5) 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.
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:
Simply toggle on the nav items that you’ve added the mega menu too.
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.
Global Footer
Exactly like the Global Header, once you edit the footer module all changes will ripple through each template. From the Design Manager, with a website template open, scroll to the very bottom and click on the Global Footer module.
Style Settings:
Right at the top, you’ll see that you have easy access to a few style properties including setting the spacing above and below the footer content, the background color, and menu link color.
Column 1 (About):
Each section of the footer is organized into columns. The first column includes elements such as the logo, mini blurb, and social links. Each very easily controlled from this panel.
You also have control of the social icons and which you’d like to use.
I’ve also given you control of the icon size and color. Cool, right?!?
Column 2 (Nav):
The only option here is to edit the navigation items you’d like to be displayed in the footer. In most cases, you’ll want to stick to the primary pages of your website.
Column 3 (Contact):
Here you can add your company’s contact information including:
Column 4 (Form CTA):
This gives you the ability to add a persistent form at the base of each page in order to increase the likelihood of visitors subscribing to receive your offer or more of your content. Here you can set the title of the column, as well as, select the form you’d like to use.
Copyright line & Base Links:
Lastly, your footer isn’t complete without the standard © 2019 line. You can easily add that here along with creating menu items for pages such as terms, privacy, etc.
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.
Just delete that little sucker and add in your own logo.
Buttons and 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.
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. 💰
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.
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.
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.
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.
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.
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).”
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
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.
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.
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.
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.
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.
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.“
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.
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).
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.
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.
Now that you have that set, click the Select File button to upload your video.
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.
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.
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.
Turning it on will give you this fancy little animation.
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.
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.
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.
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.
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.
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:
- Base Font Size which controls the font size for the entire website.
- Blog Font Size which controls the font size of blog posts.
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.
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.
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.
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.
Now that you’ve selected your font weights, click the embed tab and copy the code.
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.
Great! You’ll very quickly see the Site Header HTML section. Just paste that bit of code.
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.
Venture on back to your master CSS file and scroll down to this section.
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! 🙂
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 Squirrel to get the others. Once you’ve got those, you’re going to want to jump into the File Manager on Hubspot.
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.
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.
Copy the CSS code below to your clipboard:
Now, at the top of the font section of the CSS file, paste in the code.
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.
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.
That’s it! You’re done. Just hit Publish Changes and you’re good to go.