1. First Steps

There are few crucial steps to attend before diving into content editing, following these will set you off on the right foot and ensure your site is aligned with your personal preferences.

Navigation

Hubspot navigation menus are easily managed in Content Settings: Content > Content Settings > Advanced Menus. Here you can create different menus for different sections of your website. Quantum utlises the 'default' advanced menu for site navigation. If you have previously created or decide to use an advanced menu other than 'default', you will need to reference that menu in the Quantum templates. Don't worry though, a few simple changes are all that's needed:

  • Header
    • Head over to the Design Manager 'Content > Design Manager'. Once there, click 'Global Groups' and select the 'Quantum' folder, you will see two items aptly named 'Quantum - Header/Footer'.
    • Click on the Header module and you will see a 'Main Nav' menu module. Click the dropdown arrow on that module and select 'Edit Options'. From there you will see the last option is the site map selection and you can choose the correct site map as needed. Click 'Done' and then 'Publish Changes'.
  • Footer
    • Back in the Design Manager, go back into the Global Groups folder and now select the Footer Item. Click the 'Sitemap' module and repeat the same steps as before.
  • Secondary Navigation
    • Now there a few more 'Inner' and 'Thank You' type templates which hold breadcrumb and side navigation type menus.
    • Select 'Templates' in the sidebar and then search for 'Quantum - Inner'. Look out for the 'Breadcrumb/Side Nav' modules in each of these templates and repeat the steps like you did for the Header and Footer modules. Please note that the 'Full Width' templates only contain breadcrumb menu modules.
If any of this seems a little daunting or you have better stuff to be doing then just give us a shout and we'll set the correct sitemaps for you.

2. Template Features

Custom colors

Quantum templates have a checkbox function which allows you to use your own 'Primary Accent Color' which is set in 'Content Settings > Colors and Fonts'. Look out for 'Template Color' module in the page editor when editing your page, it's normally the top module in the page editor list. You can also preview this feature on the demo.

System pages can't be edited in the usual way you would a website page. So, if you have decided to use your Primary Accent Color across your site then you will have to make a small change to the system page templates. Very quick change here! In the Design Manager, head over to 'Templates > Custom > System > Quantum'. Click on each of the templates (6 of them) you find in that folder and then click 'Edit > Body CSS' and add 'custom-color'. Your system pages will now show your Primary Accent Color. If you would like to use Quantum's default color then simply change the value to 'color' which applies the default orange color scheme. Adding 'none' which will show a very faint grey overlay behind the banner and the default orange color for other elements.

Text formatting

Certain modules within templates that contain text often have specific HTML 'tags' that have been added by the designer in the underlying code. Sticking within the parameters of these tags can help in keeping the page's design and styling intact. A really useful tool that can help in that area is the 'Show blocks' option of rich text modules. Here's how to enable that option for when you want to keep text formatting in place:

When in the page editor, you'll notice that header modules often have words which have been enclosed in HTML 'tags'. These tags provide you the ability to apply styling which would otherwise be avaible in the user interface of rich text modules. The most useful of these is the 'b' tag which will apply a bold font weight to any words it encapulates. The 'b' tag can be used following this example: <b>words you would like to be bold</b>. Likewise, words can also be italicised using the 'em' tag: <em>words you would like to be italicised</em>. Lastly, if you would like your header to break to a new line than you can place a 'break' tag at the point you would like a new line: <br>. Please note, the break tag does not need to be 'closed' like the other examples, just the single <br> is fine.

Call-to-action buttons

Aside from regular image call-to-actions, Quantum allows you to create styled call-to-action buttons without any coding (CSS) knowledge. These are useful when you want to have a more stylised call-to-action 'button' than the standard Hubsot options:

Icons

Various modules feature icons which can be changed easily in the page editor. Simply head over to FontAwesome's icons page and search for an icon, click the icon and copy the code from the following page. The code will look something like '<i class="fa ... </i>'. Paste the code into the required field back in the page editor.

Pages

All templates have clear intructions though module labels and placeholder text. Some modules or sections of the website may benefit a more detailed explanation and we'll cover those below:

Inner Pages

There are a selection of inner page templates which are flexible allowing you to add all manner of built-in Hubspot modules plus more custom modules which are included with the template. A Rich Text module is a great way to start off and introduces your content in as much detail as needed. Some lesser used but useful tools of the Rich Text editor include the 'Tools > Show blocks' which can help in preserving text formatting and 'Source code' for users who have HTML experience. Modules can be added in the 'Page Modules' or 'Sidebar' section of the page editor.

Blog

Following these simple steps will ensure your blog is fully optimized to get the most from the Quantum blog template. For the most part, all that's required is changing some values in your content settings. Please navigate to ‘Content > Content Settings > Blog’ and set the following:

- Enable 'Show summaries in listing pages’
- Enable 'Use featured image in listing summaries’
- Set 'Template for Blog Posts’ to ‘Quantum - Blog’
- Enable 'Use same template for blog listing pages’
- Set 'Number of Posts Per Listing Page’ to ‘5’ (this is optional but displays a nice amount of posts on the listing page)
- Click ‘Custom format...’ by 'Publish Date Format’ and enter ‘MMMM d, yyyy’

Custom Colors
When creating your blog post, in the page editor you will find a ’Template Color’ option. Check this box if you would like to use your 'Primary Accent Color' from Content Settings.

Blog Banner
The blog banner can also have different shades of background ‘overlay’. This is a subtle color applied to the background of the banner to help the headline stand out or add visual appeal. By default, the overlay is a very subtle grey but you can change it to the Quantum default orange or your own 'Primary Accent Color' from Content Settings. To do that, navigate to the Design Manager and search for ‘Quantum - Blog’. In the template, find the ‘BLOG BANNER’ module group and click the cog icon and then click ‘Edit CSS Declarations’. In the 'Custom CSS Class (advanced)' field add 'color'. This will change the banner overlay to Quantum's default orange or if you have enabled the 'Template Color' in the blog post editor then your primary accent color will be used.

Whilst still in the template, you can also change the blog banner image with the 'Banner Background Image' module. To do this just click the cog icon and then click ‘Edit Options’.

If you prefer someone else handles these changes then drop us a line and we'll get them sorted for you.

Home with Form

This homepage variation includes a form in the banner. Due to limited space and good practice of keeping important elements 'above-the-fold', it's a good idea to keep the form short and split the form fields into 3 or 4 columns. This can be achieved easily in the form editor by dragging form fields beside each other until they align.

Home with Video Background

The banner features a video which will play in the background behind the banner's headline and subheadline. The video background creates a less 'static' and more interesting experience for the visitor whilst also communicating something about your business.
Video sizing is handled automatically so the video 'fills' the banner's dimensions. It's a good idea to provide a video 'splash' image which is useful for displaying whilst your video initially loads and also replaces the video in some browsers which have limited support for playing videos. The best way to create your splash image is to take a screenshot of the very first frame or start of your video. A screenshot can either be taken using your laptop's shortcut key which is generally 'Command (⌘)-Shift-3' on a Mac or 'Print Screen'/'Alt + Print Screen' on a Windows PC.

About

Intro
You can set the how many 'columns' your text modules span, with the 'Intro - Text Width' option. Selecting '2' will make your text modules roughly 50% wide whereas selecting '3' will make the width roughly 33%. This section is useful as a 'Who', 'What' and 'Why', here is an example if you need inspiration.

Workplace Image Slider
Equal image dimensions help the slider to display smoothly with no adjustments in height. Placeholder images are 970 x 647px. The file manager's 'Clone & Edit' tool can be used to crop image sizes.

Contact

There is a useful section in this template for adding contact information. In the page editor you will find this section labelled 'Contacts', this is where you can add Rich Text modules. Here is an example of some contact details if you need inspiration.

Frequently Asked Questions

It's worth noting here that the questions 'list' which appears at the top of the page is automatically generated. The 'Back to top' links below each question are also added automatically. Both of these features supply a navigation for the FAQs.

Pricing

In the page editor you will find an option labelled 'Package Highlight'. Using this option allows you to highlight a pricing table, this page shows you how a table looks when highlighted.

Resources

Resources items are added in the page editor with the 'Qauntum - Resource' modules. In each module you can define the 'type' of resource and any associated topics. The 'type' and 'topic' values from all of the items are then compiled and placed into filters at the top of the page, which can be used by the visitor to find the resources they are interested in. This page gives you an idea of how it works.