Documentation
Getting Started with the Modern Pro HubSpot Theme
Getting Started
Welcome to Modern Pro, the greatest HubSpot theme to exist in the entire universe—we think so at least. If you have questions about anything related to Modern Pro, you're in the right place. If for some reason you can't find an answer to your question feel free to reach out to support@kelp.agency and we'll get back to you.
Theme Options
The first thing you'll likely want to do with Modern Pro is update the theme options. By default, Modern Pro will inherit your company's brand colors and logos that you entered into your HubSpot settings. They may not always be exactly what you want to use on your website so you can also override them all or one-by-one as needed.
To access the theme settings follow these steps:
- In your HubSpot account, click the settings icon in the main navigation bar.
- In the left sidebar menu, navigate to Website > Themes.
- Find Modern Pro and click View Theme.
From here you can update all the various visual styles across the entire theme.
Global Colors
Primary Color
This is the main color used throughout the website.
Secondary Color
This is used in combination with the primary color but not is not as prominent.
Accent Color
This color is used in combination with the primary and secondary colors. Not sure if this is true... Dustin?
Section Color
This is the default Drag-and-Drop section background color.
Section Alternate Color
This is used as the default Drag-and-Drop alternating section background color to help differentiate different sections of content. If you prefer not to use this, keep it the same color as the Section Color.
Global Fonts
Body Font
This is the font to be used on the majority of paragraphs of text on the website. It should be easy and enjoyable to read.
Heading Font
This is the font used on all headings by default. Since this is only used on heading text you could use a display font here that shows a bit more character.
Navigation
This controls the look of the main navigation in the header used across the theme. It will inherit the global colors and fonts by default but you can override specific things such as hover color here as needed.
Footer
This is the font used on all headings by default. Since this is only used on heading text you could use a display font here that shows a bit more character.
Roundness
Does your company present itself as a soft pillow or more like a sharp rhombus? Maybe somewhere in between? Change how round every corner on the site looks with this handy setting.
Templates
Modern Pro comes is designed for total customization and can be used to build virtually any type of website. We built a handful of page templates that include modules pre-selected in a specific layout for ease-of-use. But the real beauty of Modern Pro is the "Blank" template that allows you to build anything you want without any limits! Here's a list of all the templates currently out for Modern Pro—more coming soon!
- Blank - page template
- Home - page template
- Portfolio - page template
- Landing Page - page template
- Blog Listing - blog template
- Blog Post - blog template
- 404 - system template
- 500 - system template
- Password Protected - system template
- Search Results - system template
- Subscription Preferences - system template
- Subscription Update - system template
- Subscription Unsubscribe - system template
Page Templates
You can use page templates when creating a new website page or landing page. Read HubSpot's useful knowledgeable article for additional information on how to use page templates.
Blog Templates
Blog templates can be applied to a blog via your HubSpot settings page:
- In your HubSpot account, click the settings icon in the main navigation bar.
- In the left sidebar menu, navigate to Website > Blog.
- In the Templates tab apply the Restaurant Pro Blog Listing and Blog Post templates via the two drop downs and hit save.
For additional information on setting up your blog visit HubSpot's knowledgeable article here.
System Templates
Similar to blog templates, system templates can be applied via your HubSpot settings page:
- In your HubSpot account, click the settings icon in the main navigation bar.
- In the left sidebar menu, navigate to Website > Pages.
- Click the System Pages tab.
- Click the corresponding dropdown menus to select your 404 error page, 500 error page, Password prompt page, and Search results Restaurant Pro templates then hit save when done.
For additional information on system templates read HubSpot's knowledgeable article here.
Modules
Card
The card module allows you to create card like visual to neatly organize content in a friendly way.
Filter List
This module enables you to create a filterable list of items. It's great for sorting through large collections of categorized data in a user friendly way.
Social Follow
Link to your social profiles with this module.
Social Sharing
Add social sharing links to any page on your website easily without slow loading iframes.
Image Carousel
Exactly like it sounds, you can easily add photo slideshows (aka carousels) to your page with this module. On mobile it supports swiping for a great user experience.
Maps
The maps module embeds an interactive Google Map and enables you to customize the map marker color and add up to 10 locations. Google requires an API key for this to work. Steps to get your API Key:
- Create new project in Google Cloud.
- Go to the Billing page and enable billing. You won't be charged as long as you stay within the free quota.
- Enable the Maps JavaScript API and the Geocoding API.
- Go to the Credentials page click Create credentials > API key
- Optionally as a final step, you can then restrict your API Key to your domain for more security.
Once you have your key, copy and paste it into the module API Key field and you're good to go.
Blog Listing
This module can only be used on blog listing templates. It allows you to customize the look of your blog listing.
Blog Pagination
This module enables you to customize the blog pagination links and can only be added to blog listing templates.