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.

Introduction

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:

Purchased Theme - Elements HubSpot Theme

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.

Clone Theme - Elements HubSpot Theme

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.

Theme Customization

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:

Customize Theme - Elements HubSpot Theme

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:

Customization - Elements HubSpot Theme

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.

1. Colors

If you click Global Colors in the customization screen, you will be redirected to another screen just like this:

Customize Colors - Elements HubSpot Theme

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.

2. Typography

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:

Customize Typography - Elements HubSpot Theme

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.

3. Buttons

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:

Customize Buttons - Elements HubSpot Theme

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.

Header

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:

Edit Header - Elements HubSpot Theme

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:

Edit Logo - Elements HubSpot Theme

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:

Edit Menu Links - Elements HubSpot Theme

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:

Edit Menu - Elements HubSpot Theme

3. Mega Menu

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:

Edit Mega Menu - Elements HubSpot Theme

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.

Edit Footer - Elements HubSpot Theme

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.

Edit Footer Logo - Elements HubSpot Theme

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.

Edit Footer Links - Elements HubSpot Theme

Blog

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.

Select Blog - Elements HubSpot Theme

2. Change Blog Pages Copy

Unlike landing pages or normal website pages from the Elements theme, the Blog page is a hard coded template, as it’s not possible yet in HubSpot to make blog templates editable with the friendly HubSpot interface (when that happens, we will ensure to update ours right way).

Considering that, we are here to explain you how to change the text/copy in the Blog v1 and Blog v2 pages.

1. You need to go to Marketing > Files and Templates > Design Tools.

2. In the File Manager, locate Elements theme, open its folder, then open Templates, and finally locate ‘Elements – Blog 1.html‘ (Or in case you are using Blog 2, choose that one).

Edit Blog Text from HubSpot Theme

3. Open the file, and you will arrive into an HTML code template. This may look a little tricky, but it’s not, no worries.

4. Use the ‘Search’ function of your browser to locate the text you want to change, and just type your new text. Once you are ready, click Save.

5. If you also want to edit the HubSpot form for the subscribe to our newsletter opt-in, you can just change the ‘form_id‘ below the text to your preferred form.

Editor HubSpot Theme Form ID

6. In order to get your form ID, you just need to go to Marketing > Lead Capture > Forms > Select the form you want to use > Share > Embed code, and then copy and paste the ID you have in there.

7. Go back to the Blog template file, copy and paste your form ID, and you are ready to go.

Miscellaneus

1. Change pages included in Search results

If you would like to limit which type of pages show as results in the Search, you can easily do so the following way.

You need to modify each of the 2 search options individually, and it can be done in the following way:

Header Search
To modify the search results from the search in the header navigation, you need to do the following:

1. Go to edit any page, and then click on the Header to edit it. It will ask if you want to edit the Global content, click ‘Open in global content editor‘ to proceed.

2. Select the ‘Elements – Header Search‘ element from the left sidebar.

HubSpot Theme Search Module

3. On the sidebar you will see an option that says ‘Search results include‘. Choose the types of contents you want the header to search, and click Apply Changes.

Edit Search HubSpot Theme

Search Page
To modify the search results from the search in the Search page, you need to do the following:

1. Go to Settings > Tools > Website > Pages > System Pages

System Pages HubSpot Theme

2. Go into the section where it says ‘Search results‘ and click Edit

3. It will open a file that includes the Search functionality setup.

4. Go to the line 29 where it has the content_types and add true/false depending on which sections you want to be searched for.

Edit Search Results HubSpot Theme

Figma File

As promised, the Elements HubSpot theme includes the editable Figma design source file that you can use to easily edit any graphics, or re-create layouts easily on Figma.

If you want to get the Figma file, please send us an email to figma@inboundelements.com with your purchase confirmation, and we will send you the Figma file within 24 business hours.

Support

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 support@inboundelements.com — Our team of HubSpot Experts will be more than happy to help you.