Hubmate templates have been built for complete ease-of-use when editing and you will most likely find that customizing your content is a breeze. The following guide will ensure you get the most from the templates and you may pick up some handy COS tips along the way.
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.
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:
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.
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.
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:
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.
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:
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.
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’
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.
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’.
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.
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.
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.
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.
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.
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 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.