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

    brand-canvas-free-download
       
      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 helpfulhero.com homepage (using CLEAN) ranks. Not too shabby for a media-rich page.

      gt-metrix-grade-2-15-21-1

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

        10 min read

        The CLEAN 6.2 THEME is Now Available!

        Featured Image

        Ohhhhh boy... This is an EXCITING update!  I've made a ton of awesome improvements to the CLEAN theme, all of which I'm going to break down for you in this post. As you know, I'm all about constant iteration based on the feedback and requests I receive from customers just like you.  So, thank YOU!  Thank you for helping me make CLEAN the #1 Best Theme for the HubSpot platform. I really couldn't do it without you. 

        high-level overview

        Don't have a lot of time right now? It's all good.  Here's the TLDR; breakdown. 


        New Custom Modules

        • Global Header - Opt 2
          I've rebuilt the global header from the ground up giving you so much more control and a ton of new options. I geeked out on this one big-time with some dev help from the ADL team.
        • Countdown Timer
          Perfect for an event page, coming soon page, or landing page where a deal will expire at a certain time and date.
        • Hover Cards
          This one snuck in with the last v6.1 update but worth mentioning.
        • Image Gallery Grid
          A super versatile image grid that's great for logos, portfolio thumbnails, or a range of other use-cases.
        • Tabbed Content
          A handy-dandy module for hiding/showing content based on a specific tab a visitor clicks on.
        • Video Carousel
          Looking for a unique playlist-like way to display your video content? This module will definitely be worth exploring.

        Improved Custom Modules

        • Global Footer
        • Hero Banner
        • Content Filter - Opt 1
        • Event Schedule
        • Multi-Column Content
        • Number Count Up
        • Pricing Table
        • Price Comparison Table

        Sweeping Improvements

        • Overall Speed & Performance
        • All new Parallax feature with more options
        • Better integration with HubSpot's image lazy loading update
        • New "wave" design element
        • Code organization and clean up

        Blog

        • Option to add a global sidebar to the blog post page to include a form, CTA, popular tags, etc.
        • Ability to control the column sizes of the post title and featured image
        • Full typography settings for blog post content (H1, H2, H3, etc.)
        • Added control on the type of related, popular, recent posts you'd like to show

        Bug Fixes

        • Content Filter - Opt 2
          URL string to trigger specific filter
        • Header Footer Overrides
          Option to center align logo
        • Image and Text - Opt 2
          Fix for text getting cut off when overlap mode is turned on and viewing on a tablet.
        • Multi-Column Content
          Custom link color for text included in a form
        • Number Countup
          Fixed issue when this module is used twice on the same page 
        • Content Animation Options
          Fixed throughout multiple modules
        • Pricing Feature Compare
          Toggle option when multiple modules are used on the same page
        • Divider Accent Line
          Space defined in the theme settings
        • Recent Posts on Blog
          Fixed summary text breaking format
        • Testimonial Scroller
          Fixed issue where photo, name, and title would get cropped off

         

        Let's start with the fun stuff

        I know, I know... It's like Xmas came 7 months early. Here is a sneak peek at your presents. Just pretend to be surprised when you open them. Deal?  ...deal!

         

        I jam-packed the new global header with a ton of features that you have full control over to make it even more flexible.

        Hamburger Side Menu

        This is the largest and most exciting new addition to the global header.  This side menu is ultimately flexible meaning you can keep it minimal or include a form, content, calls to action, etc.  

         

        global-header-sidebar

         

        Plus, it's completely responsive. If your website is being viewed on a smaller device, the main navigation and CTAs will teleport themselves to the side menu.

         

        global-head-mobile

         
        Option for Two Calls to Action

        As you can see above there are two Calls to Action that you can turn on or off. This had to be one of the most popular customization requests I would receive over the years. Now, it's integrated!

         
        New Global Search UI

        I took a bit more of a minimal approach with the search box.

         

        global-header-search

         

        Navigation Alignment

        Another one of the most frequent questions I'd receive is if there was an option to align the main navigation. Now there is!

         

        global-header-align 

        Improved Header "Hat" Options

        Now you'll have the option to display text for a notification message instead of links if you so choose.

         

        global-header-hat 

        Countdown Timer

        If your company's hosting a (virtual) event or perhaps you're looking to create a little urgency on a sales page, you'll love this one. 

         

        countdown

         

        Set the month, day, year, hour, minute, seconds and you're off to the races!

         

        count-down-settings

         

        Hover Cards

        As I mentioned, this module snuck in with the last update but worth the mention as it's been improved quite a bit. You have full control over how many cards you want to show, their sizes, style, and content within each. 

         

        hovercards

         

        New to this update is the ability to remove the space between each card so they sit flush together and span edge to edge. 

         

        Image Gallery Grid

        I'm going, to be honest with you. I built this module for my own use first. I wanted a simple and streamlined way to show off example images of customers using CLEAN. It turned out to be such a handy custom module that I decided to add it to the theme update for you to use too.

        You have full control over how many images you want to show on a given row. You can link them to other pages and easily rearrange their order with drag-n-drop.

        image-gallery-grid 

        Tabbed Content

        With this new module, you can now create up to 6 tabs of content.  Of course, you'll have full style control over all the colors, the number of columns, and their arrangement. 

         

        tabbed-content

         

        If you love creating video content for your website as much as I do, then you'll love this new module.  You can easily add as many videos along with their thumbnail making it easy to group similar videos together.

        The best part is that this module is super flexible and works for more than just embedded videos but other content as well.

        vid-carousel

         

        Improved Modules

        A majority, if not all, of the custom modules in the CLEAN series, have been improved. Here are those with the most notable updates.

         

        Global Footer

        Based upon popular customization requests, here's what's been added...

        • Ability to select a form to add to each column.
        • Ability to turn on/off the columns from collapsing on mobile.
        • Added dynamic copyright year so it updates automatically.

         

        Hero Banner

        The largest update to the Hero Banner is the new and improved Parallax feature which gives you much more control. 

         

        parallax

        * The new Parallax feature has also been added to each module where you can select an image for the background of the row.

         

        Content Filter - Opt 1

        Perhaps not the most exciting improvement but definitely a popular question and request. Now you can hide the "ALL" filter tab.

         

        Event Schedule

        This custom module got a small update to make it just a bit more flexible.  You'll now have a rich-text editor in the "Full Detail" section so you can add images, videos, calls to action, etc.

         

        Multi-Column Content

        This is one of the most widely used and most versatile modules in the CLEAN theme. With the release of CLEAN 6.2, it gets even more awesome!

        Column Backgrounds

        Now you can set the type of background that you want for each individual column.  Select from a solid color, gradient, or image.

         

        mmc-bg

         
        Column Spacing (padding)

        Yet another super common request I've received.  Now you can easily control the spacing within each individual column.

         

        mmc-padding

         
        "Pull up" and individual column

        It's time to get creative!  Now you have the ability to pull up an individual column and the content within it over the row above.  This is a great way to create a design fluidity throughout your website.

         

        mmc-pull-up

         
        Vertical Align Content

        Sometimes one of the columns is much taller than another due to the content within it.  Now you have the option to vertically center align the column with less content with the one with more.

         

        mmc-valign

         

        Number Count Up

        This module gets a pretty simple update with the addition of new symbols that can be added before or after the number you set.

         

        number-count

         

        Pricing Table

        This module gets a small update to include an additional call to action in the event you're using the feature that will toggle between a monthly and annual price. 

         

        Price Comparison Table

        Added in by popular demand, a second call to action has been added when the price toggle feature is enabled. Also included is the ability to add up to 6 feature rows.

         

        How to Install the Update

        By now you're likely eager to install the updated version.  If you're not familiar with this process, it's very easy.  Simply head on over to the HubSpot Asset Marketplace and click the PURCHASED tab.  You'll see a little yellow dot to indicate an update is available. Just click INSTALL UPDATE.

         

        clean-install-update

         

        Frequent Questions I'm asked

         

        Will this screw up my live website?

        Nope, it won't. If you are using the original theme files it will automatically update those without any negative ramifications.  The only thing you'll need to do immediately access your theme settings under START HERE and select the ORIGINAL global header from the dropdown.

         
        Does this update my cloned version of the theme?

        Unfortunately, it won't and I know this kinda sucks (trust me). The benefit of a cloned theme is that you are able to make customizations at the code level.  If the cloned version was updated with the new files it would wipe out all those customizations. That would suck FAR MORE. 

         

        How do I take advantage of the update if I'm using a cloned version?

        The most straightforward way is to treat the update like you've downloaded a brand new theme and begin to convert your existing web pages over by using HubSpot's Content Staging feature.

        I am aware that this method is less than ideal.  The HubSpot team is aware of this as well. They are currently working towards releasing a far better solution for handling theme updates while still providing a way to customize theme files at the code level. Stay tuned for that. 

         

        There's good news!  "Child Themes" is here.

        HubSpot very recently (soft) launched "child themes." A child theme gives you the ability to customize the theme at the code level while still allowing you to enjoy seamless future updates.  Learn how to set up a child theme here.

         

        Wrapping it all up

        Keeping your website current and continually taking an iterative approach to design is the name of the game.  It's how all great products we know, love, and use are built. It's how CLEAN is built. It should be the same for your company's website. For that reason, I love making and releasing these improvements.

        If you have any questions, don't hesitate to reach out and ask.