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.
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
- 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
- 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
- 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!
Global Header - Opt 2
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.
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.
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.
Another one of the most frequent questions I'd receive is if there was an option to align the main navigation. Now there is!
Improved Header "Hat" Options
Now you'll have the option to display text for a notification message instead of links if you so choose.
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.
Set the month, day, year, hour, minute, seconds and you're off to the races!
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.
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.
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.
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.
A majority, if not all, of the custom modules in the CLEAN series, have been improved. Here are those with the most notable updates.
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.
The largest update to the Hero Banner is the new and improved Parallax feature which gives you much more control.
* 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.
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.
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!
Now you can set the type of background that you want for each individual column. Select from a solid color, gradient, or image.
Column Spacing (padding)
Yet another super common request I've received. Now you can easily control the spacing within each individual column.
"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.
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.
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.
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.
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.