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.
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.
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!
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:
/* Custom Font Normal */
@font-face {
font-family: ‘Font Name’; src:
url(‘http://link-goes-here.com/font.eot?’) format(‘eot’),
url(‘http://link-goes-here.com/font.woff’) format(‘woff’),
url(‘http://link-goes-here.com/font.ttf’) format(‘truetype’);
}
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.