Hubmate templates have been built for complete ease-of-use 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 CMS 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 and company branding. Not to worry however as these changes have been made as easy as possible and require no coding knowledge.
Fonts and colors can be customized through the demo page's theme styling tool. Please follow these steps once you are on the demo page:
The font and color choices from the demo tool have now been applied to your template pack.
Hubspot navigation menus are easily managed in Settings: Settings > Website > Navigation. Here you can create different menus for different sections of your website. Keynote utilises 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 'Keynote - Global Header' module. Don't worry though, a few simple changes are all that's needed:
The Keynote template pack uses a 'modular' based approach to web design whereby all pages can be edited, re-ordered and styled in the page editor, without any need to go into the Design Manager to edit templates.
Add modules to this page by using the 'Page Modules' option of the page editor, you can find it by clicking the cube-shaped icon in the left sidebar. 'Keynote' and 'HubBlox' modules have been designed to work with this template so please search using those names when adding modules. The full range of default Hubspot modules can be added too, should you need them.
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, Keynote 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:
All templates have clear instructions through module labels and placeholder text. Some modules or sections of the website may benefit a more detailed explanation and we'll cover those below:
Following these simple steps will ensure your blog is fully optimized to get the most from the Keynote blog template. For the most part, all that's required is changing some values in your content settings. Please navigate to ‘Settings > Website > Blog’ and set the following:
- Set 'Current template' to 'Keynote 2 - Blog'
- Enable 'Use same template for blog listing page'
- Set 'Number of Posts Per Listing Page’ to ‘10’ (this is optional but displays a nice amount of posts on the listing page)
- Enable 'Show summaries in listing pages’
- Enable 'Use featured image in listing summaries’