Elements - HubSpot Theme Documentation
If you are reading this, it means you had purchased Elements, our premium HubSpot Theme, so first of all: thanks for your purchase. In this document, we will explain all the basics so you can start using your new HubSpot theme.
Let’s get started with the basics. Once you successfully purchase Elements HubSpot theme from the HubSpot marketplace, you will arrive to a confirmation screen, and after a few minutes (it can take up to 5 minutes for the theme installation to be completed), you should be able to find your new theme on the Design Tools.
You can confirm this by going to Marketing > Files and Templates > Design Tools. Once here, you should see something like this:
If you see the theme as you are seeing it above (note the name may vary), congratulations, the theme has successfully installed.
1. Reinstall Theme
In rare cases, due to a common bug on the HubSpot marketplace, your theme may not arrive successfully to your account.
If this happens to you, no worries, you just need to go to Asset Marketplace > Purchased, and then select Elements HubSpot theme, click Actions, and then Uninstall.
It will take a few minutes, and after that, you need to click Actions again, and then Reinstall.
This will fix any issues that could have occurred. While this is a very unusual issue, in case it happens to you, the solution is simple and easy.
2. Clone Theme
Once your new HubSpot theme is ready, it’s moment to clone it.
While this is not a required step, it is highly suggested to clone the Elements HubSpot theme before start using it.
This is so you always have a clean backup in case you end up modifying any parts of the theme, and want to go back to the original version. Also, it’s a great option in case you create another HubSpot website in the future, so you have a clean version of Elements HubSpot theme ready for it.
In order to do it, you just need to go to Marketing > Files and Templates > Design Tools, and then select the Inbound Elements folder from the @marketplace folder. Once there, you just need to do a Right click, and then click Clone theme.
After that, just wait a few minutes for the clone to be completed, and you’re done. From this point on, please just ensure that if you make changes to the theme, always do them on the cloned version.
3. Frequently Asked Questions
3.1 – Will my website get affected if I purchase/install the Elements theme?
No. Purchasing the Elements HubSpot theme will only install the theme files on your HubSpot account, however, it won’t affect in any wait your current website.
Once you purchase it, you will be able to start creating page by page using your new theme, and you will be able to push it live whenever you are ready, so there is nothing to worry.
3.2 – Can I use Elements HubSpot Theme in more than one site?
The Elements license lets you use the Elements HubSpot Theme on as many sites as you want, within the same company or project.
This means that if your company has 5 websites, you can use Elements theme on all of them, as it’s already included in your license.
However, if you are creating websites for another companies (if you are an agency or a freelancer), you should ask your client to purchase the template so they can have it licensed to receive support and updates.
Once your cloned Elements HubSpot theme is ready, it’s time to start customizing it to match your company brand styling.
In order to do this, you can go to Marketing > Website > Website Pages, and then click Create > Website page. This will show you the Choose a theme screen, choose your Elements backup, and select any page you want to get started with (for example, the Homepage).
Once you are editing the Homepage (or any other page), it will look something like this:
Once you are here, before you start editing the Homepage itself, let’s start with the customization. Click Design > Edit theme settings, and you will be redirected to the Theme settings screen, which looks like this:
In this screen you will have access to all global design customization settings of Elements HubSpot theme. You will be able to select any of the sections, and start editing right away.
We will cover the 3 main (Colors, Typography and Buttons) customization options, however, feel free to dive into all the more advanced ones such as Cards, Layout, etc.
If you click Global Colors in the customization screen, you will be redirected to another screen just like this:
You will see the colors divided into 4 different areas. While the main ones are just Primary and Secondary colors, we highly recommend you to update all of them to colors that match your brand style guide, so even the smallest color detail matches your company brand.
Once you finish updating the colors, just click Apply changes.
Let’s change the typography now. Just as with the Colors, you just need to click Edit on the Typography option, and you will arrive this screen:
Once you arrive here, you will notice the typography is customized in detail by Heading type, as well as by Desktop and Mobile.
This is to give you as much control as possible of the typography sizes, so your website is as consistent and scalable as possible.
You will notice that you can easily choose between 100s of Font families, and this is because Elements HubSpot theme is integrated natively with Google Fonts, so you can use any Google font without any extra work. Just choose your preferred font, click Apply changes, and you are on the other side.
Once you are done with updating the typography, let’s change your theme buttons.
Click Edit on the Buttons tab, and you will arrive this screen:
In here you will notice all buttons are divided by types. Please go one by one to change all of these, so all your theme buttons are updated site-wide.
You will also notice that all buttons have a lot of customization options, such as hover color, animations, border radius, padding and more, so you can customize them as much as you want to fit your brand style guide.
Once you are done with the buttons, you will finish customizing all the basics of the Elements HubSpot theme. However, there are more customization options such as layout width and more, so feel free to keep exploring and customizing as much as you want.
As a final tip, it’s important to mention that even you have all of these customization options as global settings, you also have the option to override these global colors and aesthetics on each individual page. So don’t worry, with Elements HubSpot theme you can have as much flexibility as you want.
The header is one of the most important parts of your website, so let’s continue with it.
Just as before, if you go to edit the Homepage, or any other Website page, you will see the option to edit the Global Header section, as you can see below:
Click “Edit module“, and you will be redirected to the Global Header section, so you can start editing it. Let’s cover individually the Logo, Menu Links and Mega Menus.
Let’s start with the easiest one, the logo.
In the Global header section, you will be able to just click the logo, and then you will see the sidebar options to edit it, as you can see below:
We recommend you to upload the logo as SVG format (Scalable Vector Graphics) as it will be super light and look perfectly sharp on every device. However, if you don’t have a vector version of your logo, a PNG or JPG will work great too.
Once you finish with the logo, let’s continue with the Menu Links.
All the menu links are managed on the Navigation section within the Website settings on HubSpot, so it’s very likely you are already familiar on how to edit them.
In case not, don’t worry, you just need to go to Settings > Website > Navigation. The screen will look something like this:
In this section you just need to select your header (you can also create a new one), add your menu links, and select it in the Elements Theme header, as you can see below:
If you would like to have a Mega Menu (a menu dropdown with a lot of links, just like ours), Elements already has a built in option for it.
You just need to select the number of links and columns you would like the mega menu to have, add the links in the Navigation section, and it will be automatically formatted as a mega menu, no extra work needed.
The settings can be found in the menu section of the Header, as you can see below:
For the footer, the story is pretty much the same as the one in the Header. In order to edit the Global Footer section, you just need to edit any Website page, scroll to the bottom, and you will find the footer.
Just click Edit Module, and you will be redirected to the screen to start editing the footer.
Once you are in the Footer editor, you just need to click the Footer logo, and you will be able to edit it and upload your company logo.
Just like on the header, we recommend you to upload the logo as SVG format (Scalable Vector Graphics) as it will be super light and look perfectly sharp on every device. However, if you don’t have a vector version of your logo, a PNG or JPG will work great too.
Regarding the Footer Links, you will notice these are slightly different than the ones in the Header. Unlike the header ones which are edited right from the Navigation in the Website settings, the footer links are edited right on the footer.
Just click over any of the links, and you will be able to edit them as easy as typing anything else. Once you type something else, just change the hyperlink too, and you will be ready to go.
Last, but not least, lets learn how to set up the Blog and Blog Post template from the Elements HubSpot Theme on your website. You will be surprised of how easy it is.
1. Choose Blog & Blog Post Template
To choose the Blog or Blog Post template, you just need to go to Settings > Website > Blog > Templates, and you will find 2 different drop down selectors.
One will choose the Template for blog posts, and the other one will choose the Template for listing pages (aka, the blog). Select the ones you would like to use (as you probably remember, we have 2 different versions for each), and click Save.
And that’s all for now! If you arrived to this part of the page, it means you already read all the documentation, so kudos for you.
However, it doesn’t end up here. If you find any issue, bug, or just need some help, feel free to send us an email at firstname.lastname@example.org — Our team of HubSpot Experts will be more than happy to help you.