BEST PRACTICE

General advice

Before you start using the theme and creating pages: we advise you to clone your theme in the HubSpot design manager and use the cloned version!

By doing this you will be able to update, add, create,... extra features to the theme in the future.
If you do not start with a copy, you may get stuck at some point and may need to redo things.

Theme includes

Two (2) Subscription Confirmation Pages

• Subscription Confirmation 01
• Subscription Confirmation 02

One (1) backup unsubscribe template

• Backup unsubscribe template

One (1) subscription update confirmation template

• Subscription Update Confirmation

One (1) subscription-preferences

One (1) search results template

• Search Result

Two (2) error page templates

• 404
• 500

One (1) password prompt template

• Password Prompt

One (1) membership-reset-password

One (1) membership-reset-password-request

Pages

• About Us
• Blank Page
• Coming Soon
• Case Study page
• E-book pages
• Contact Us
• Under Maintenance
• FAQ
• Gallery page
• Home
• Landing page 
• Pillar page
• Podcast page
• Pricing page
• Product page
• Product service pages
• Service page
• Support_Page_01
• Team_member_01
• Testimonial Page 01
• Thank You
• Terms Page

Introduction

Once you successfully purchase the Modularized theme from the HubSpot marketplace, you will arrive at 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:

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 Modularized 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.

Clone Theme

Once your new HubSpot theme is ready, it’s time to clone it. This is not a required step, it is highly suggested to clone the Modularized Theme before starting using it. By cloning the theme you will 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.

In order to clone the theme, you just need to go to Marketing Files and Templates Design Tools, and then select the modularized theme folder from the @marketplace folder. Once there, you just need to do a Right-click, and then click Clone theme. (please check the screenshot below)

Theme Customization

Once your cloned Modularized Theme is ready, it’s time to start customizing the theme as you need.

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 Modularized Theme backup, and select any page you want to get started with (for example, the Homepage01).

You can edit the Homepage01 (or any other page), it will look something like this:

Before you start editing the Homepage01 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:

Colors

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

You can easily change the primary and secondary color by selecting the corresponding color. Or you can give the corresponding hex value of the color.

Font

Same as the color you can change the global font directly from here. You will notice that you can easily choose between 100s of Font families, and this is because 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.

Typography

Let’s change the typography now. Just as with the Colors, and font you just need to click Edit on the Typography option, and you will arrive at this screen:

Once you arrive here, you will notice the typography is customized in detail by Heading type. You can adjust the heading one (h1), heading two(h2), etc font-size from here. This is to give you as much control as possible of the typography sizes, so your website is as consistent and scalable as possible.

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 at this screen:

Here you will notice that the button has a lot of customization options such as corner radius, background color, border-width, border-color you can easily control each of the properties. 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 Modularized theme. However, there are more customization options such as forms, tables, spaces, and more, so you can customize each of them as you want.

Header

The header is one of the most important parts of the website. If you go to edit the Homepage or any other Website page, you will see the option to edit the Global Header section, or by simply clicking on the header it will show a global content editor popup as you can see below:

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:

Menu Links

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 with 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:

Search Bar

In the header section, we have a search bar. If you don’t need the search bar there is an option to hide it please check the below images for your reference.

In case not, don’t worry, you just need to go to Settings > Website > Navigation. The screen will look something like this:

Mod search icon is used to hide the icon and in the site search, we can hide the search bar. If you click on the mod search icon you will redirect to a new screen which is shown below. Here is an option to hide the icon and replace the icon.

If you click on the site search icon you will redirect to a new screen as in the image below. By selecting the checkbox you can remove the search bar.

Note: If you want to hide the search bar you should hide both the search icon required and the search required.

Footer

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.

Logo

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.

Footer Links

Regarding the Footer Links, you will notice these are slightly different from the ones in the Header. Each section has different menus. By clicking on the corresponding menu you can change the link and text which is the same as in the header menu. One of the footer menu screenshots is given below.

Home page 01

We have already discussed how to set up the header and footer of a website page. The next part is the inner sections(which means the sections between the header and footer) of the pages. Let’s start with the home page 01 banner section, by clicking on each section you can see the edit option on the right side, same as the header and footer.

Banner section

The right side of the module has different options such as animations( we can change the animation effects by simply selecting the options.), primary color, banner height( we can adjust the banner height)

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.

Also, there are options to add background overlay color. The banner also has a slider option you can add multiple images to the slider. This module has many such options.

MOD Multi-Column Content M06

On the right side of the above images, you can see the edit options. There is an option to add multiple box content. also, you can add different contents to each box. There is an edit option in each box, by clicking it you will lead to the content section where you can add content as you need.

MOD Multi-Column Content M05

This is a swappable section where you can simply change the positions of the image and content to the left or right. By selecting the image position option on the right side you can replace the image and change the content along with some animation.

MOD Call to Action M01

This is a call to action section. It has a CTA button and text. We can change the position of the CTA and text. Also, we can change the CTA by replacing it with the new one or we have an edit option by using it we can change the color, font size, background color, and also the link where the CTA leads.

MOD Logo Slider M01

This is a logo slider section. We can add multiple logos to this section. There is an option to remove the arrow in the section. You can add header contents by selecting the checkbox.

These are the modules on the home page01 in the same way we can edit the remaining pages in the theme.

Blog

Let's learn how to set up the Blog and Blog Post template from the modularized theme on your website.

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 (the blog). Select the ones you would like to use (as you probably remember, we have 2 different versions for each), and click Save.

Change Blog Pages Copy

Unlike landing pages or normal website pages from the Modularized 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 the right way).

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

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

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

3. Open the file, and you will arrive at 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.

Support

And that’s all for now! However, it doesn’t end here. If you find any issue, bug, or just need some help, feel free to send us an email at developer@wx.agency — Our team will be happy to help you.