1. Template Setup

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

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:

  1. To the top left of the demo screen, you will see a paintbrush icon.
  2. Click the icon and play around with the font and color options until you are happy with how the page looks.
  3. The page styles tool outputs an embed code for a CSS file on your portal.
  4. Head over to the Design Manager (Marketing > Files and Templates > Design Tools) on your portal and search for 'keynote-styles.css'.
  5. Copy the embed code from the page styles tool and paste it in keynote-styles.css file, replacing all of the existing code.

The font and color choices from the demo tool have now been applied to your template pack.

Logo and Menus

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:

  • Header
    • Head over to the Design Manager 'Marketing > Files & Templates > Design Tools'. Once there, search for 'Keynote - Global Header' and click on the module.
    • Once in the module you will see a button labelled 'Edit global and smart content' to the right of the screen. Click that button and then change any of the settings as needed, including choosing the menu you would like to display. Click the publish changes button once you are happy with the changes.
  • Footer
    • Back in the Design Manager, follow exactly the same steps as above but this time search for 'Keynote - Global Footer'.
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. Using Your Templates

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.

3. Template Features

Text formatting

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

4. Pages

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:

Blog

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’