There's so much you can do with the HubSpot CMS that some features get overlooked. Today, I want to highlight four lesser known CMS features that can help you with conversions and design, and easy ways to make meaningful changes to your website. These changes help you make improvements to your website when you don't have a lot of time or resources to invest in conversion rate optimization or design.
Ready to jump into each of the four features? Let's dive-in.
1. Page-Specific Navigation
When reading conversion rate optimization best-practices, you'll commonly see that having no navigation within your conversion-pages is at the top of the list. For example on a checkout page or an offer page, you don't necessarily keep your entire website navigation as visitors may jump to another page without completing the desired action.
Within the HubSpot CMS it's easy to setup page-specific navigation in a few easy steps.
- Go into Content > Content Settings within your HubSpot portal.
- Click on the Advanced Menus option on the left to load your website menu
- Choose the menu tree you want to look at
- Edit the "Linking to Page" sections based on where you want the navigation menu to lead to. If you remove a link the menu will update and not show that option for the specific page you changed.
Note: To use the above, ensure that you are utilizing the advanced menus module within your template. I would recommend reading, How can I edit an Advanced Menu module? before going through this to ensure you have this configured properly.
2. Built-in Icons
Within the default HubTheme in the HubSpot CMS we built-in a set of vectors icons that you can use within any icon module, or directly within a rich text field. The built-in icons serve as an easy way to add visual elements to your website and landing pages without requiring more text. You can also add these into any custom-theme you are using by installing Font Awesome within your stylesheets.
To start adding icons simply type [fa icon="home"] in any of the various text modules or the icon module. You can find a full-list of all available icons on the Knowledge Base.
Try it out by copying the text above, or adding an icon module into one of your pages.
3. Module Styling
Want to make small design tweaks to your pages? You don't have to know HTML or CSS to do so within the CMS. From changing text styles and size, to adding a background color to your module is easy. This is great if you want to have a specific module, like a special offer or a customer testimonial that you want to get more visibility when visitors are reading through your site.
Let's dive-in.
- From within a page, click the Styling tab
- Choose the module from the list that you want to edit, or alternatively you can browse the preview of your page on the right and select the element you want to change styling for.
- A pop-up will appear over the Style tab that gives you numerous options to change the visual look of your page. As you can see in the screenshot below there are now four new tabs along the left (Text, Spacing, Background, Border) that you can select and change options within each respectively.
4. Page-Specific StyleSheets
Very much like the above visual changes, what if you want to go beyond just changing the visual elements of a module and change the look of a whole page? Maybe you have a co-marketed event, or a charity event that you want to brand differently and you want one page to look separate than the rest of your website. To do so there is an option on each page to use an individual stylesheet.
While you're still in the Styling tab from the above, simply scroll all the way to the bottom of that tab and select the stylesheet that you want to use.
Have you used any of these functions or have any other functionality that you've used and found helpful? If so, let us know in the comments.
