Today, I'm super excited to announce the beta release of the all-new "Magic Module" that will be included in the CLEAN Pro (v58) update. This is the first custom module as part of a much greater update to the CLEAN Pro series that will be incrementally rolled out in the coming year.
This monumental leap forward is geared to serve two main objectives:
For the first month or two, the Magic Module will be in a "beta release period." Like with all new software or major feature releases, there can sometimes be small kinks to work out. I intentionally design CLEAN modules to be incredibly versatile and with that comes a myriad of edge cases. Some of which slip through Kip's QA testing.
This is where I need your help.
If you happen to notice a bug when using the module or maybe you even have an idea for an additional feature that would make it NEXT-LEVEL, please, do me a solid and let me know.
You can report bugs or submit ideas and feedback here. I'll get Kip right on it.
Quick Note: The Magic Module is not included in any of the existing CLEAN templates by default while it's in the beta period. To use it, you must drag-n-drop it into the page.
Here is the TLDR; version of what's included in the Magic Module along with jumping-off points that go into more detail.
This covers many of the high-level updates and improvements that you'll get to experience using this module. There are a bunch of other little subtleties and style attributes you'll discover as you start experimenting with it.
Just so that we're on the same page, here's how these elements will look in the HubSpot CMS.
You'll notice when using the Magic Module that the Styles tab is now available. In it, you'll be able to control various aspects of the Section (outer container), Row (inner container), and Columns (content containers).
Let's take a quick peek into the /// Column Settings so you can get the lay of the land. This is where you'll be able to set things like the background, spacing, and more advanced Design Extras for each column in your layout.
This is where things get really fun, albeit these are advanced-level features. Here you'll be able to control things like:
One of the more common questions I've received... Ok ok, let's be real. They were more like friendly complaints about the current background video feature throughout CLEAN. The issue was that when the video completed its loop there was a very subtle but noticeable flash in the transition because of a feature that allows multiple clips to automatically be stitched together. Since most people only upload one video clip, the "stitching feature" was useless, so I scrapped it.
The Magic Module will support a single video clip for both the Section and Row background, which removes the flash and gives you a seamless video loop.
Because the video stitching feature is being removed, the JavaScript that was required has been removed too. Hello, faster page loading. :)
Since the video is meant to cover the entire background of the container (section or row) and to allow for different screen sizes and ratios, a portion of the video is always going to get cropped out.
Well, now you'll have more control over the video's position, and can decide if you'd rather show the top, center, or bottom of the video.
The beauty of using CLEAN modules is that they give you far more control over the column's structure and how it's displayed on mobile. Up until now, most CLEAN modules let you add up to four columns with a few exceptions.
Now you can easily set up to six columns, have control over the arrangement, and even set a priority stacking order when viewed on mobile.
To further streamline the CLEAN Pro theme's code set and reduce unnecessary loading of JavaScript and CSS, you'll now have the power to turn off any cool features you don't need (like Lottie animation or rotating text).
I'll be honest, this feature may take a little getting used to since it requires an extra step. I'd love to know what you think.
Under the START HERE section, you'll see where you can turn each of these on.
IMPORTANT NOTE: When you're building a page, pay attention to what you're optimizing for (either UX or SEO). If you're optimizing a page for SEO, I'd encourage you to keep the bells & whistles to a bare minimum.
Have you seen this article of mine?
5 Tips to Increase the Speed & Performance of your Web Pages
I want to give you (and let's be honest... myself) a better way of adding various content types to a specific column without locking the content into a specific stacked format. Ladies and gents, now we have it!
In each content column, you'll see you can add multiple of the following content types:
Then you can easily drag-n-drop to rearrange their order.
I'm just as excited about this one as you are. Believe me! Let's just make a promise to each other right now. Wait, wait... This needs to be a pinky promise.
Just because we can add an animation to something doesn't mean we should.
Pinky swear? Ok, me too! :)
I say that in jest while also being 100% serious. Animations are awesome but like all things, they're best used in moderation.
With all that said, you now have far greater control over the types of animations you can add, their speed, delay, and how many times they repeat.
You can animate an entire column and even the elements within it. It's pretty rad!
Just remember our promise. :)
I'm sure you've been to a website where various elements on the page subtly move at different speeds as you scroll down the page. It's a very "gee-wiz" feature, and I freakin' love it. Once again, only when used with restraint.
Now, you'll be able to achieve the same look and feel with the Magic Module.
When selecting from the list of animation types, choose Parallax Element. You can use this feature on the entire column, or for individual content types in the column.
Use the slider to set how fast you want the element to scroll up or down the page (0.1 can go a long way).
Warning: This is an advanced-level feature and you may have to play with it to really make it look great, but the options are endless. Also, this feature will only apply to tablet and desktop devices. It's currently disabled for mobile devices.
Lottie files are growing in popularity due to their file size and ability to add a level of pizzazz to any website. Their growing library of animated illustrations is pretty awesome if I do say so myself.
Now you can include a Lottie file simply by copying/pasting the Lottie Animation URL into the Magic Module.
Then, directly in the module, you can control the size and position of the Lottie Animation.
Here are some of the questions I've been getting. Maybe you have the same one.
Well, it sounds cool plus I'm a fan of alliteration. In all seriousness... There are a handful of modules in the CLEAN theme which are multi-purpose and can do a lot. That's the Magic Module x 1,000,000! It's the type of module that someone can get extremely creative with when building out a page. In short... It's MAGIC.
It's been designed in a way to eventually take the place of current modules like the Hero Banner, Image and Text, and Multi-Column Content modules. It can do pretty much everything these modules can do, and then some. From a technical standpoint, those existing CLEAN modules will never be removed from your account.
My #1 priority when releasing theme updates and improvements to various modules is to never do something that could break your website. Over the past couple of years, the HubSpot team has been adding a lot of great new features. The only way (currently) to take advantage of these new features is by building and releasing new modules and doing it in a way that will support future updates.
Yes. However, I'd encourage you to do extra testing when using this module for a page you're pushing live. Especially, if you plan on using some of the more advanced-level design features.
If you're really pushing the Magic Module to the limits, then a little bug may show itself. Before reporting it, I encourage you to explore all the options in the module to ensure you haven't overlooked a setting or switch. For all bug reports, ideas, and feedback you can go here. I greatly appreciate your help.
It never ceases to put a huge grin on my face when I see a unique and beautiful website created with CLEAN. Especially, when I have to look at the code to verify it's a CLEAN website. The Magic Module pushes even further in this direction to give you the tools and power to craft and optimize a beautiful website.