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.
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.
3. Edit theme fields
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
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.
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