Skip to content

Documentation

Released: January 2022 by Kohorta Studio
support@kohorta.co

Introduction

Below you'll find the basics of how to get started with the Absolut HubSpot theme. Once you click the Install button in the HubSpot marketplace, you will arrive at a confirmation screen, and after a few minutes (it can take up to 5 minutes for the theme installation to be completed), you should be able to find your new theme among other themes in several places inside HubSpot:

  1. Settings > Account Setup > Marketplace Downloads
    intro-screen-1
  2. Settings > Tools > Website > Themes
    intro-screen-2
  3. Marketing > Files and Templates > Design Tools
    intro-screen-3

 

1. Reinstall Theme

In rare cases, due to a common bug on the HubSpot marketplace, your theme may not arrive successfully to your account.

If this happens to you, no worries, you just need to go to Settings > Account Setup > Marketplace Downloads, and then select Absolut HubSpot theme, click Actions, and then Uninstall.

intro-screen-4

It will take a few minutes, and after that, you need to click Actions again, and then Reinstall.

intro-screen-5

This will fix any issues that could have occurred. While this is a very unusual issue, in case it happens to you, the solution is simple and easy.

 

2. Create Child Theme

Once your new HubSpot theme is ready, consider an option to create a child theme before making any changes to the theme or building pages with it. While this is not a required step, it is highly suggested.

This is so you always have a clean backup in case you end up modifying any parts of the theme, and want to go back to the original version. Also, it’s a great option in case you create another HubSpot website in the future, so you have a clean version of Absolut HubSpot theme ready for it.

In order to do it, go through the steps below:

  1. In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
  2. In the finder, click the @marketplace folder. 
  3. Right click a theme folder, then select Create child theme
  4. In the dialog box, enter a name for the child theme.
  5. To change where the child theme will be saved, click Change in the File location section. Click a folder, then click Select.
  6. To customize the names of the theme's CSS and JS files, click Advanced options, then enter new file names in the CSS and JS fields. 
  7. To finish the process, click Create child theme.  

intro-screen-6

From this point on, please just ensure that if you make changes to the theme, always do them on the cloned version.

 

3. Create New Page

Once the Absolut HubSpot theme is in your HubSpot account, it’s ready to be applied to your website pages. To create a new page with the Absolut HubSpot theme follow the instructions below:

  1. Go to Marketing > Website > Website Pages.
  2. Click Create > Website page button in the top right area of the HubSpot CMS. This will show you the Choose a Theme screen.
  3. Pick Absolut HubSpot theme or its child theme if you created such among other themes you may have.
  4. Choose a page template next. For example, Absolut | Banner homepage and name it. The name given at this stage is only for internal use inside HubSpot CMS and it doesn't affect webpage URL etc.
intro-screen-7

To make it easier to navigate through all themes and templates you may have, we've added the Absolut symbol to each preview. So any Absolut-related template can be detected in seconds. To make the story short, follow this pic in the top right corner of the thumbnail:

absolut-favico

 

4. Apply Theme to Existing Page

It's possible to apply Absolut HubSpot theme to the current pages inside HubSpot CMS. In order to do this, go through the steps below:

  1. Navigate to Marketing > Website pages.

  2. Open a page you have. If it is published, on a new screen click on the Edit button in the right area of the page. If it's unpublished Content Editor will be available right after the page is open.

  3. Go to the Settings tab and scroll down its content.

  4. Open Advanced Options and scroll down to the Template section of it.

  5.  

    Click Use Different Template and you'll be redirected to screens to choose themes & templates similar to how to create a new page.

intro-screen-8

 

5. Frequently Asked Questions

 
Will my website get affected if I purchase/install the Absolut theme?

No. Purchasing the Absolut HubSpot theme will only install the theme files on your HubSpot account, however, it won’t affect in any way your current website.

Once you purchase it, you will be able to start creating page by page using your new theme, and you will be able to push it live whenever you are ready, so there is nothing to worry about.

 

Can I use Absolut HubSpot Theme for more than one site?

The Absolut license lets you use the Absolut HubSpot Theme on as many sites as you want, within the same company or project.

This means that if your company has 5 websites, you can use the Absolut theme on all of them, as it’s already included in your license.

However, if you are creating websites for other companies (if you are an agency or a freelancer), you should ask your client to install the theme so they can have it licensed to receive updates.

 


 

Theme Customization

There are various options for how the Absolut theme can be customized, starting with global settings and going to specific modules.

Global settings are located in the Design section of the Content Editor. Here's how to find it

  1. Open any of your pages based on the Absolut HubSpot theme.
  2. Once you're inside Content Editor, go to the Design tab in the left pane.
  3. Click Edit Theme Settings, and you will be redirected to the Theme settings screen.
    Here, you will have access to all global design customization settings of the Absolut HubSpot theme.

Theme Settings consist of 6 main sections:

  • Global colors
  • Global fonts
  • Layout
  • Typography
  • Buttons
  • Forms
  • Header
  • Performance

Options presented here are applied directly to the corresponding elements of the theme. At the same time, they impact many others automatically via CSS and hubl to ensure visual consistency of the website built upon the Absolut HubSpot theme. For example, base font size influences the margins and paddings throughout the theme templates.

 

1. Global Colors

Global Colors settings allow you to edit 6 main color options of the theme:

  • Primary
  • Secondary
  • Dark
  • Light
  • Success
  • Error

The most crucial here is Primary color value. Changing it automatically recalculates lots of other elements styling. For example, hover color for buttons, form fields backgrounds, some section backgrounds.

It's important to remember that the Absolut HubSpot theme uses up to 4 tints and 4 shades of the primary color as well as the other five colors. Changing them means you're automatically changing styling elements in different places of the theme.

theme-colors-1

Success and Error color values are used for notifications when the system is talking to the user. For example, when the form has been sent or comment left. So be cautious editing those ones.

Once you finish updating the colors, just click Publish.

 

2. Global Fonts

Global fonts section consists of three main fonts — primary, highlight, and secondary.

Primary font is used mainly for headings, like H1…H6, in the theme. Secondary font is used mostly for paragraphs and body texts. However, both headings and body text can be overridden in the Typography section below.

Global fonts works as global settings that impacts all elements in the theme. It is best to specify your brand fonts here. Here you can pick any of Google Fonts without any extra work, click Apply changes, and that's it.

theme-fonts

 

3. Layout

Layout section defines containers width, global corner radius, and page transition.

layout

Three main containers are the default container, system page container, and blog post container.

To change the default container width, edit the Desktop content width slider in Layout settings. It's important to remember that this value can be redefined for a specific page or a section of the page while editing that page directly.

Narrow content width value affects most system pages such as search results, password prompt, etc.

Blog post content width allows controlling the reading experience of your blog. In case you change the font size for the main content, it's good to adjust the width of the blog post container as well. So it keeps recommended number of characters per line of text.

All these parameters above help keep the website's design consistent as well as the corner radius option. It applies to various modules and containers throughout the theme. So it is a global setting. If you'd like to change its value for particular elements it can be done at a page level. 

It's important to remember that all the numeric values in this section are in pixels.

At the bottom of this section, you'll see the checkbox that enables page preload animation, which is a white fadeout, to smooth transition from page to page.

layout-2

 

4. Typography

When it comes to typography settings, base font is a key value. The majority of parameters in the theme are based on its value — paragraphs and headings, margins and paddings, etc. This connection ensures consistency of the overall design.

Changing base font size means all other typographic values will be recalculated automatically based on the relative values defined in the code. However, you can define paragraph size separately here by changing body text size.

Another important design parameter is links. Here, you can define its color and the color for a hover state. 

In case you'd like a bit darker shade of a link color for hover, just clear the Link hover color input field and click Apply changes. The theme will generate a hover color based on the link color automatically. 

typography

 

5. Buttons

Once you are done with updating the typography, let’s change your theme buttons.

There are three available parameters to change — corner radius, fill color, and label color. These settings impact the way how button types are going to look like. 

Primary, Secondary, and Simple are those button types. 

By default, Primary button takes the fill color specified in theme settings as background. Secondary button takes a darker shade of fill color for the label and a lighter tint for the background. Simple looks like a label without a background but with an arrow preceding label.

buttons

Hover colors are generated automatically based on the background color. Both for Primary and Secondary styles hover color is a darker shade of the normal state background color.

Please go one by one to change all of these, so all your theme buttons are updated site-wide.

Once you are done with the buttons, you will finish customizing all the basics of the Absolut HubSpot theme. However, there are more customization options such as forms, so feel free to keep exploring and customizing as much as you want.

 


 

Header

The header as one of the most important parts of the website has global settings stored in two places — theme settings and global partial settings.

 

Theme Settings

Along with forms, buttons, colors, etc. you can change navigation item colors and header background color, add a bottom border, and make the header fixed-to-top.

By enabling a fixed-to-top header position, you make the header fixed to the top of the page and make it move along while scrolling. Making the header fixed prevents adding new modules (in global partial settings) to it unless the fixed mode is switched off.

theme-header

 

Global Partial

Another place to edit the header is inside global partial settings. In order to edit the header's content, open any page of Absolut theme in Marketing > Website > Website Pages.

Then in the Content tab, click Website Header to open global header settings.

global-header

The system will show a pop up to warn about editing global content. In this pop up, click Open in global content editor.

Now you have access to the header content. Absolut header allows adding additional modules to the header on top of main content as easy as drag-and-drop. Having drag-and-drop functionality in the header provides freedom of expanding header content with prebuilt modules or your custom ones. For example, notification topbar.

To edit the existing header module, click Header navigation bar in the Content tab. Now, in the editor, there are three main sections to edit:

  • Site logo
  • Site menu
  • Header CTA

Besides these three components, Absolut header has a language switcher which doesn't have editing options. However, it's good to remember it only displays once you have multiple languages turned in the HubSpot account.

lang-switcher

 
Logo

Let’s start with the prominent one, the logo.

Here, you can upload an image that will be a global logo for all pages or override the default logo on this exact page you opened header settings.

logo

We recommend you upload the logo in SVG format (Scalable Vector Graphics) as it will be super light and look perfectly sharp on every device. However, if you don’t have a vector version of your logo, a PNG or JPG will work great too.

 

Navigation

Site menu section allows creating or choosing an existing menu from the list.

Creating and editing menus are managed in Settings > Website > Navigation

navigation

 


 

Footer

For the footer, the story is pretty much the same as the one in the Header. In order to edit the Global Footer section, you just need to edit any Website page, scroll to the bottom, and you will find the footer.

Just click Footer, and you will be redirected to the screen to start editing the footer. Absolut footer is drag-and-drop, so you can adjust columns, delete or add modules similar to how you edit the main content of the page inside HubSpot. 

footer

 


 

Blog

One of the pillars of inbound marketing is a blog. Let's match your blog to the rest of the pages using the Absolut theme. 

To choose the Blog Listing and Blog Post template, you just need to go to Settings > Website > Blog > Templates

Then, click on Actions to choose Change template. The next screens will guide you to choose a theme and its blog templates. Pick Absolut and its corresponding templates. Click Save button that shows up at the bottom after templates are chosen.

blog-templates

 


 

System Pages

There is a bunch of system pages that are important for user experience and Absolut also has them. To update default HubSpot templates or your current ones for system pages go to Settings > Website > Pages. Then, open System Pages tab.

Below is a list of pages to update:

  • 404 error page
  • 500 error page
  • Password prompt page
  • Search results page

 

system

 


 

Support

Absolut HubSpot theme is a free theme with no support included.

However, we offer premium support services to help with any customization needed above the core theme functionality. Feel free to send us an email at support@kohorta.co — either Olia or Roman will contact you back.

 

↑ Back to top