Get started with Hackathon Theme

A Theme is a portable and self-contained package of developer assets designed to work together to enable a marketer-friendly content-editing experience. These assets might include templates, modules, CSS files, JavaScript files, images, and more.

1. Start with Hackathon Theme

Here is our Hackathon Theme installation link: https://app.hubspot.com/marketplace/482618/products/computan/hackathon

After reaching the URL please hit the "Get the theme for free." CTA.

Word

2. Create a page

In HubSpot, navigate to Marketing > Website > Website Pages, then select "Create". Choose a template from your newly uploaded theme by selecting the Hackathon you uploaded from the "Your Themes" section, and then one of the templates within it.

Word

3. Edit theme fields

Word

Word

In edit the Theme field we have the following option to edit the theme settings:

  • Global colors
  • Global fonts
  • Website header
  • Typography
  • Buttons
  • Forms
  • Tables
  • Spacing
  • Footers

Global colors

In Global color, we have three options primary color, secondary color, and menu color. All links and some hover are based on the primary color. All background and section colors are based on secondary color and navigation color is based on menu color.

Global Fonts

From Global fonts, we can change the theme font family globally.

Website Header

We can change the background color of the header

Typography

In Typography We can change the size of heading like h1, h2, h3, h4, h5, h6, font weight, font size, color

Button

we can change button spacing, font size, color, background color, padding from here

Forms

We can change actions related to form like input color font hover focus padding etc.

Tables

We can change heading text color, body background color, body text color, footer text color, border color, vertical spacing maximum content width footer background color.

4. Add Theme modules and Common modules

We can add all modules like theme modules and common modules, rich text, form, and buttons by just drag and added them

Word

5. Publish the page

After adding our modules and fulfilling our requirements, we finally save our changes and publish the page from the Publish button.

Word

Hopefully, this document is helpful for you if you have any additional questions please let us know. For more clarification about the theme you can visit this HubSpot documentation :

https://developers.hubspot.com/docs/cms/building-blocks/themes