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. Keynote 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 Keynote templates. Don't worry though, a few simple changes are all that's needed:
Keynote templates have a checkbox function which allows you to use your own 'Primary' and 'Secondary' accent colors which are 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, 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:
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 Advisors 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 ‘Advisors - 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’
You can use your own custom color for the blog by adding a special CSS 'class' to the Advisors blog template. The blog template can be found in the Design Manager: Design Manager > Templates > Custom > Blog > Advisors. Please find your blog find in that folder and then click 'Edit > Body CSS' and add 'custom-color'. Your blog will now show your Primary Accent Color. If you decide to revert back to Advisor's default color scheme then it's just a case of retracing your steps removing the custom-color text.
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’.
The homepage template features a Services section which allows you to list services that you offer. If you have bought the Home template by itself then you can list all of your services here. A perhaps better approach is to list a few services here and then link through to a dedicated Services page, there is a dedicated template available which can be purchased here.
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.