Buy Theme

Take your brand from barely noticed to wildly loved with my Brand Canvas and 3-Step Guide.

Yep. It's totally FREE. No fluff. No B.S.  Just actionable steps you'll wish you took months if not years ago.


Curious?? Learn More

      The CLEAN 6.2 Theme

      Take full advantage of the new and improved HubSpot CMS experience with the CLEAN theme.

      Theme Support & Reference

      Have a question and looking for an answer? I've likely got a video for that or an article that covers it.

      Built for Speed, Performance, AND an awesome UX.

      GTmetrix is the gold standard in analyzing the speed and performance of a website. Here is how the homepage (using CLEAN) ranks. Not too shabby for a media-rich page.


      Report generated: Mon, Feb 15, 2021 at 1:03pm CST

        CLEAN 6.1 Premium Pack


        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. 


        Looking for the CLEAN 6.1 THEME 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.





        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.




        Sounds pretty easy, right?  It is!


        Multi-Language Options

        With CLEAN 6, it's super easy to translate global elements like your main navigation.  Nope! You won't have to bother cloning a bunch of 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.


        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.


        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.



        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.






        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


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





        Love these and want more?

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