Documentation

You’ve got all the pieces. Now it’s time to start building. Fun!

The Basics
Header & Main Nav
Footer
Buttons & CTAs
Hero Banners
typography / fonts
If you are looking for CLEAN 4 documentation, you can find it here.

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.

twitter.com/hubspothero
youtube.com/c/hubspothero

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!

Buttons and CTAs

Having a consistent button style and hierarchy is crucial to any high-performing website. Before getting into how to create CTA’s using the CLEAN button style, first, let me show you how to customize the¬†look of the buttons to reflect your brand.

There are two main button styles. Your Primary and Secondary CTAs.  These are designed intentionally so that you can use them to draw visitors to important actions. They look like this.

 

 

Customizing the color and shape:

To create global consistency of all CTA’s this customization is going to take place in the master CSS file (clean-5-style.css).¬† To find this file, jump into the Design Manager and use the¬†search function.¬† If you haven’t noticed already, this search function is gold.¬†ūüíį

 

 

At the very top of the CSS file, you’ll notice a section that will give you the ability to adjust the Primary and Secondary button color, font size, letter spacing, and how rounded you’d like the corners.

 

 

When making customizations, you’ll want to be sure that you’re only editing within the “quotation” marks. Otherwise, things will get super funky, super fast.

 

 

If you’re unfamiliar with how to find the #hex value of a color you want to use, you can jump over to¬†www.colorpicker.com¬†and find it.¬† Once you’re done all you need to do is hit the Publish Changes buttons.

Creating a CTA:

Now that you have your button style all set up and looking good, it’s time to create a CTA. This can be done from a variety of places, but for the purpose of this demo, we’ll do it from the CTA Manager.

 

 

Click that nice orange Create CTA button in the top right-hand corner to bring up the Simple CTA builder. By default “custom button” will be selected. This is what you want!

In the section labeled Button Content add the text for your button. I suggest keeping CTA labels short and to the point. (ie. “Download Now” vs. “Download Your Free E-book While Available”).

Next, use the Button style drop-down and select Link (no style) and disregard the Button Color option.

 

 

Now, toggle down Advanced Options and give the button a CSS class of either cta-primary or cta-secondary depending on the importance of the button.

 

 

That’s it for this screen! Click Next at the bottom of the page to continue to the CTA Options where you can give the CTA an Internal name, link, and assign it to a campaign. Click Save and you’re CTA is ready to use.

One thing to note. The preview of your button (unfortunately) in the CTA Manager will not show your custom button style. It will show it as “Link (no style).”

 

 

Don’t worry!¬† Everything is cool. Once you add the CTA to any of your pages it will look beautiful.

 

Hero Banners

A distinct characteristic of the CLEAN template series is the big beautiful “hero” banners at the top of each page. “Hero” is actually what they are referred to as in web-lingo. I’m not just being cheeky (this time).¬†ūüźí

There are currently five different Hero Banner modules included in the CLEAN series.  The main difference in each is the type of content displayed within the banner (ie. Text, Video, Form, or Image).

The five include:

  • Hero with Text (Headline, sub-headline, copy, CTA, etc.)
  • Hero with Text & Form
  • Hero with Text & Image
  • Hero with Text & Video
  • Hero with Text, Video, Form

Should you want to add or switch one of these for another, you’ll need to do that from the Design Manager. With any template is open, on the right-hand side click + Add, then in the search start typing “CLEAN 5 – Hero.

 

 

Chance are you won’t need to, but at least now you know. And knowing is half the battle! (10 pts. if you get that reference)

Packed with Customization Options:

Every Hero Banner module is extremely easy to customize directly from the Page Editor. Just click the module to bring up all the editable properties.

 

 

Depending¬†on which Hero module that you’re using, you’ll have the ability to choose from three different background types.¬† Image, Video, or Gradient (or solid color).

 

 

Gradient / Solid color Backgrounds

When selecting a gradient it’s pretty easy to see what’s going on. All you need to do is select the two colors you’d like to blend into one another.

You can also control the angle in which you want the gradient.

 

 

If you’d like to use a solid color, all you need to do is make sure the same color is selected in both options.

Image Backgrounds

In most cases, you’ll probably want to use an image background. There are a few important things you need to know.

Due to the nature of the Hero Banner needing to work across all sized devices, there are a few (very) small trade-offs.  The main one being that part of the image (top, bottom, left, right) is bound to get cropped out depending on the width and height of the browser the site is being viewed on.

Recommended Image Size:

  • 2000 x 1333px @ 72dpi (if Parallax is ON)
  • 2000 x 800px @ 72dpi (if Parallax is OFF)

I’ve found these sizes to be the best balance between load time and looking great across all devices. The width is what is most important to set to 2000px. You can let the height be defined by the ratio of the photo unless you decide to manually crop.

Things to avoid: It’s best practices never to embed text on a background image because of the variability of the crop.

Video Background

Video backgrounds¬†are cool but need to be used wisely as they can easily increase the load time of your web page. You’re going to want to make sure they aren’t too long as an effort to keep the file size small.

Once you have your video file, you’ll need to select the file type.¬† I highly encourage you to use an MP4 file.

 

Now that you have that set, click the Select File button to upload your video.

 

 

Important note: When naming your video file, be sure you don’t include any spaces in the file name. (ie. do-it-like-this.mp4¬† vs. not like this.mp4)

Image &  Video Overlay Color:

When you select either an image or video background you will also be giving the choice to set a color overlay which sits over the image but behind the text. This will help the content in the banner pop off the background and be more legible in some cases.

 

Keep in mind that you will want to make sure you also set the Alpha transparency. I typically find that somewhere between 40-60% looks the best.

Setting the Height:

You have access to a few height settings so that you can get your Hero Banners looking awesome.

Your first choice is if you’d like the banner to take up the full screen, no matter what size the browser window is.

 

 

Upon selecting Fullscreen, you will be given an option to Show an Animated Scroll Indicator. If you have additional content on the page, this will help a visitor to your website understand that they should scroll for more.

 

Turning it on will give you this fancy little animation.

 

 

If you prefer to set your own height, you can do so with the three sliders that follow below.

Hero height on Desktop (vw)

Use the slider to adjust the hero’s height to suit your content.¬† Okay, so what does the VW mean you might be thinking.¬† This stands for vertical width.

 

Basically, this allows the banner’s height to scale appropriately with the width and size of a visitor’s browser window. In turn, it helps keep the most amount of your image from being cropped on large screens.

Hero Minimum Height (px) – Desktop / Tablet

For smaller screen sizes you’re going to want to set a minimum height that the banner will not pass.¬† This will help ensure that none of your content gets clipped or is out of view.

Hero Height on Mobile Devices (px)

It’s a safe bet you can guess what this adjustment slider is for. Since on mobile, your content inside the banner will stack, it’s important you set a height accordingly.

Parallax Scrolling Effect:

Everyone loves the silky smooth scrolling effect. What’s not to love?!?! With each hero banner, you will have the ability to turn on or off the parallax scrolling effect.

 

But Kevin, why would anyone ever want to turn that off?¬† I wonder the same thing myself.¬†ūü§Ē

All cheeky comments aside, by selecting the parallax option your background image the lower half of your background photo is more prone to being out of view. This is to account for the area of the photo that needs to scroll into view.

Adding Text Content:

The hero banner gives you the ability to freely add any text content that you’d like via a rich text module.

 

Important Note:  In 99% of cases you should avoid adding any specific style to the content via the text editor. Things like adjusting font sizes, color, etc. will override the theme styling. 1% of the time this is necessary, but generally, you will want to rely on global styles in order to create consistency.

Style Settings

Right below the text editor are¬†a few style settings that will help you get to your desired look while keeping thing simple and … well, CLEAN.

 

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:

  1. Base Font Size which controls the font size for the entire website.
  2. 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.