Hiker HubSpot Theme Documentation

Hiker - HubSpot Theme

Thank you for purchasing Hiker!

Hiker – is a travel blog HubSpot theme for creative people. Hope you’ll enjoy using Hiker as much as we enjoyed developing it.

• Demo Site
• Online Documentation
• Our Portfolio

Installation

• Download theme from Themeforest
• Unzip that folder on your PC/Mac
• Inside that folder, you will find a zip hiker.zip (this is the Hubspot theme)
• Go to your HubSpot dashboard, Click on the settings icon on the right top, then locate and click on Website > Themes from the left panel
• Upload theme using the Top right corner Upload button

Theme Structure

- hiker
|- css
|- images
|- js
|- modules
|- templates
|- fields.json
|- theme.json

Theme Settings

To edit your theme settings, you’ll first need to create a page with a theme template. The theme settings can be accessed within the page editor by clicking the Design tab on the left. Then click Edit theme settings.

Customizing colors, fonts, and spacing will set the default styles for all the elements on your page. If you want to edit specific details such as link colors, button colors, or default form colors, click Edit next to More settings to view additional theme settings available for your templates.

Theme Modules

We prepared 22 custom modules for Hiker theme, which you can use to build your pages.

Theme Templates

Hiker theme comes with 15 predefined page templates. You can use them to easily get started building your new page.

Setup Homepage

1. Log in to Hubspot, from the top panel, go to Marketing > Website > Website Pages
2. From the top right corner button, click Create > Website page
3. On the next page, select the Hiker theme
4. On the next page, select the Home template
5. Make sure to address the new page with a name, eg Homepage
6. Click Create page button

Once you finish the above steps, the Page will load with default modules, and populated with demo content, you can then point, click and edit the content to suit your needs. You can also drag/drop other modules as needed from the left panel, as well as you can delete the unneeded modules by hovering them on the page editor.

Setup Header

When you are on the page editing screen, you need to do the following to set up the header:

• Click on Contents > Website Header
• Click on the Open in global content editor button

Once opened the global editor, you can set up your logo, navigation, social icons, etc…

Setup Footer

When you are on the page editing screen, you need to do the following to set up the footer:

• Click on Contents > Website Footer
• Click on the Open in global content editor button

Once opened the global editor, you can set up navigation, social icons, etc…

Setup Blog

• Log in to HubSpot, from the top panel, go to Marketing > Website > Website Pages
• From the top right corner button, click Create > Blog post
• Enter the title and the content for this post

Setup template for the Blog posts and Blog listing pages

• Click on the settings icon on the right top corner
• From the left panel, Locate Website > Blog
• From the second tab Template, select and apply the Hiker templates for the Blog post and Blog listing page

Setup System Pages

• Click Settings icon in right side of navbar
• Click Website > Pages > System Pages and selsct the Hiker system pages

Custom CSS and JS

To easily add CSS and JS customizations we prepared blank files for you in /css/custom-styles.css and /js/custom-scripts.js

Credits

All images, that you can see on the demo site available within the theme package thanks to the Unsplash license https://unsplash.com/license.

Thank You!

Thanks for using Hiker. We take great pride in creating solid themes and strongly believe in robust customer service practices. Should you have a question that neither this documentation file nor Themeforest’s forums can resolve and we’ll do our very best to assist you.

If you like our theme, please take 1 minute to rate it on Themeforest:

• Go to Themeforest and login with your credentials.
• Hover on your account name in the top right corner of the screen. Click Downloads link and you will see your purchases list.
• Click stars next to our theme to leave your rating.
• It will help us a lot to keep being motivated to release new theme updates and improvements for free.

We hope you will enjoy using it for your next project!