Alright, let’s jump right in. Here you’ll find a bunch of useful tips on getting things setup in your Hubspot account using the CLEAN template series. Also, how to do customizations, including colors, fonts, forms, and all that jazz. If there is something that you’re trying to do that isn’t listed here, just click that little orange comment button in the lower right corner and let me know.
Before getting started here is a quick I did on the power of using Hubspot templates.
Once you’ve made the purchase through the Hubspot Marketplace , the template(s) will automagically be added to your account within a few seconds. You can see that they’ve been added by going into the Design Manager and selecting the templates folder in the sidebar on the left. The easiest thing to do is use the search field and start typing “CLEAN 4 -”
Waaalaaa! There they are! Now, let’s start using these suckers.
Ohhh, cloning… It sounds so futuristic and cool. (That’s the nerdy side of me talking.) Cloning is definitely the first thing you want to do before attributing a template to any page that you’re going to create. By default, Hubspot doesn’t allow you to make any changes to the original template as a safeguard. That way you can’t accidentally f’ something up (which is a good thing!) This safeguard will also give you the ability to make quick and easy template-level changes even after you created a page with the template.
You’re going to want to clone any template that you’ll be using along with the CSS file each template uses.
Open up the Design Manager and do a search for clean-4-style.css. Click the highlight the file and then right-click to bring up the action menu. Then click Clone stylesheet.
It will then create a copy of the style sheet right below.
Right-click on the new CSS file, then click Rename stylesheet. I’d highly recommend adding your company name prior to clean-4-style.css like this…
Boom, you’re done! I’ll go into why it’s important to clone the CSS file in more detail later, but the quick reason is to easily adjust the colors of your website.
While in the Design Manager, use the left sidebar to find your new CLEAN templates. I’d suggest starting with a Home Page template.
In the same way that you cloned the CSS file, you can clone a template. Just right-click on the template and click Clone template.
Again, I highly recommend sticking with this convention. It will make your life MUCH easier once you clone a few templates. Keep the original name of the template, but add your company name right in front. So in this case, “Acme – CLEAN 4 – Home Page.”
There is one more quick thing to take care of—attacting the new cloned CSS file you just created. On the right-hand side, just under HEAD AND BODY OPTIONS click the Add link, do a search for your new CSS file and add it. The simply click the X to remove the original clean-4-style.css file.
That’s it! Now just rinse and repeat for the other templates that you want to use.
I know this seems to be a bit tedious, but trust me, you’ll fly through it once you get going. By doing this, you’ll be setting yourself up to make simple and quick template-level adjustments to the layout while building your Hubspot site.
Let the fun begin! Just like the Advanced Menu, you’re going to need to set up your CTAs (buttons) in your Hubspot account to use in each page of your site. Included in the CLEAN theme are three different types of button styles you can and should use.
Hubspot allows you to create both image and CSS-based buttons. Please, for the love of god, avoid using image-based buttons at all costs. They will just look gross. Sorry, as you can tell I feel pretty strongly. 🙂
To create CSS buttons using the CLEAN theme, follow these steps. From the Content drop-down in the main nav bar, go ahead and select Call-to-Action. (You may have a few pre-loaded; don’t worry about those.) Click the Create a CTA button at the top-right of the page. It’s going to open up the CTA creator with an example button.
In the button content section add the text that you’d like to appear inside the button. (ie. Download Now). Next click the button style drop-down and select Link (no style). Disregard the button color entirely. The CSS file will take care of this.
Next, click the Advanced options toggle. This is where you’re going to add one of the three CSS classes I listed above—cta-primary / cta-primary-outline / cta-secondary-outline—to your new button to give it the CLEAN look and style.
Then, click the Next button and be sure to give your CTA a recognizable internal name and link it to your desired page.
Chances are, you want your button colors to match your brand. (As you should!) This is easy and will only take a small edit to the CLEAN CSS file that you’ve cloned.
Jump back over to the Design Manager and open up the CSS file. If you’re not used to looking at code, you might be thinking to yourself “Yikes! What the hell is this goobly-gook!?!” Don’t worry, making this edit is super easy. Near the top of the CSS file, you’ll find a section that looks like this where you’ll edit the colors.
Notice the peach-colored text. Each of those is a HEX value to represent a color. If you don’t know the HEX value of your brand color off-hand, you can visit sites like colorpicker.com to find it.
Don’t worry. You’re not going to hurt my feelings if you don’t like my pretty, rounded buttons. 🙂 If you’re more of the square button type, they are very easy to change. In the CSS file that you used to change the button color, there is a section right below where you can change how rounded you’d like the buttons.
All you need to do is adjust the number in the green text that currently says 25px. If you’d like them to be square buttons, go ahead and change that number to 0px. If you’d like them slightly rounded, I’d suggest between 3-5px. Any more than that and they’ll start looking a little too cartoony in my opinion.
By default, all CLEAN templates use the Open Sans font which I think is pretty kick-ass and versatile. If you’d like to use a different font-family, there are two ways to go about it. One, by using a font repository like Google Fonts or Typekit. Two, by uploading your custom font file to Hubspot directly. Either is fine, but I definitely encourage using a font repository if you can. So, let’s start there.
For this example, I’m going to show you how to use Google Fonts since it’s likely the most practical. Plus, I’m a fan. Each font repository will give you a small line of code to add to your Hubspot site that will enable you to use the font. Using Google Fonts, you can see that little line of embed code (pictured below) once you’ve found a font that you want to use.
Copy that embed code to your clipboard and jump back over to your Hubspot account, then into your Content Settings. Once you’re on that page, scroll down a bit to the Site Header HTML section. You’ll see a text box where you can paste that embed code line so that it looks like this.
Now, just scroll down and be sure to save your changes.
The last step is to go to the Design Manager and open up the CSS file that you’ve cloned. Near the top of the CSS file, you’ll see a section just below where you edited the colors of the theme that will allow you to change the font.
In the peach color text on line 138, you can see where ‘Open Sans’ is currently referenced. All you need to do is replace the word Open Sans with the name of your font. In this example, it would be ‘Roboto.’ Make sure you use the ‘single quotes’ around your font name. Also, do not remove Sans-Serif, for it’s your backup font if your new font can’t be found.
That’s it! Publish changes your edited CSS file and you’re good to go. If you have a font that isn’t in a repository, you can learn how to add it to your Hubspot account by visiting this page in Hubspot’s knowledge base.
Above, I’ve shown you how to simply change the color of the buttons by editing the CSS file. While doing so, you may have noticed other elements that you can control the color of. Here is a quick breakdown of those elements.
The CLEAN template pack uses Font Awesome to make adding or editing icons super easy. It also gives you a way to control the size and color of the icons without having to worry about knowing photoshop.
To adjust the color of the icons all you need to do is go to the Design Manager and open back up that handy-dandy CSS file that you’ve already been working in. Have it open? Great! Right there below where you edited the color of your buttons is where you’ll edit the color of the icons.
Replace the Hex code (green text) with the Hex code of the color that you’d like to use. Remember, you can always jump over to colorpicker.com if you don’t know the Hex code you want to use.
Just below the icon color, you can set the colors for the text links, body copy, and headlines.
Pretty self-explanatory I’d say, but here are a couple design pointers. When selecting a color for your text link, you’ll also need to select the color it will change to when a visitor hovers over it. I suggest using a slightly darker or lighter version of the color you use for the link. This will create a subtle but noticeable state change.
For the body text and headline color, I would suggest having the body text be just slightly lighter than the headline text. This way, the headlines will pop and create a nice visual hierarchy on the page.
In the example above, take a look at the highlighted (or call out) row with the orange background. Easily change the background color and color of the text here in the CSS file.
Remember that you definitely want to create a contrast between the background color and the color of the font so that it’s readable.
If your website will have a second layer of navigation, and chances are it will, you can change the background color of the hover state easily as well.
In the CSS file, you’ll see this section. By now, I’m guessing you know what to do. 🙂
A common question I receive is how to adjust the height of the background image (or “hero image” as it is called in design-speak). Because this is a common request, I’ve made it silly-simple to adjust. Here’s how:
In the Design Manager, go ahead and open up the clean CSS file that you’ve most certainly cloned by now. Close to the very top of the file, near line 75, you’ll see two lines of CSS where you can adjust the height.
I’ve added the ability for you to set the height for the Home page separately from the supporting page. That way, if you’d like a larger and more impactful image on the home page, you can have one.
Make your adjustment, hit Publish, and you’re done! Yep, that’s it.
If you’re a bit more tech-savvy and used to wrestling with some CSS, this breakdown of a few important classes will be helpful. This is especially true if you’re going to be working in the Design Manager quite a bit, moving around modules and creating your own templates based off the CLEAN theme.
This is not a complete list yet. I’ll be adding to it over time. Please let me know if you have any questions.
This class defines the max-width of the content area while allowing background colors or images (like the hero image) to be full-width. This is currently set to 1080px. Best practices are to nest an outer “parent” module with an inner-module container (Page Center) with the class .page-center.
A majority of the web page templates contain a value prop section at the top of the page with a background image and a centered headline + text. Use this class to center the value prop content in the page.
Use this class on the outermost parent module in order to create a full-width highlighted row. As mentioned in the current CLEAN documentation, you’ll be able to control the background color and text color through the variables at the top of the CSS file.
.no-header + .landing-page
To create a landing page that does not include the header space, select the Edit drop-down, then select Body CSS. Append both of these classes to the body in order to have the hero image sit flush at the top of the page.
Just as it seems, this class will center the text of the module that it is applied to.
In order to easily create a consistent top and bottom padding on a module, you can use one of the following classes. For example, if you use .padding20tb, it will add 20px padding to the top and bottom of the module you’ve created.
The horizontal spacer module will become your friend in order to create breathable layouts. Use the following classes to create the desired amount of white space between each module.
Sometimes a line break is nice to separate out different types of content. Using the horizontal space module, add one of these classes to create a subtle, gray line.
Use this class on the outermost parent module in order to separate large content sections with a subtle background color.
Use this class on a content module when you’d like the content to have a narrower width than the global width of the page as defined by the .page-center class.