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. Advisors 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 Advisors 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 'Advisors' folder, you will see two items aptly named 'Advisors - 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 'Advisors - 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.
    • Now the same needs to happen for the Thank You templates. Click on the 'Templates' link in the sidebar and this time search for 'Advisors - Thank you', then follow the same steps as you carried for the 'Inner' templates.
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

Advisors 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 > Advisors'. 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 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.
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.

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, Advisors 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 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’

Custom Colors
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’.

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

Home

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.

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.