Documentation

After you've successfully downloaded the theme from the HubSpot Marketplace, in HubSpot's navigation go to Marketing > Files and Templates > Design Tools and you should be able to find it under the @marketplace folder on the left-hand sidebar. 

One of the first things you'll want to do is configure your theme settings. When you first download the theme the colours, in particular, may look a little strange as they are pulled in from your branding settings. 

You can configure your theme settings in two ways: 

• By going to Settings (the gears icon in HubSpot's navigation) > Website > Themes and selecting the Conference Theme.
• From any page editor by clicking into the Design tab on the left of the page > Edit Theme Settings

Under your settings, you'll have options to customize your theme's colours, fonts, spacing, text, buttons, forms, tables and styling for your header and footer. 

Read more on HubSpot's "Edit your theme settings" knowledgebase article. 

The theme uses five colour fields that, when changed, will update your website globally: Text, Primary, Secondary and Neutral (For Backgrounds).

These colours are automatically pulled from your branding settings (read HubSpot's "Customize branding for your HubSpot content" knowledgebase article here). 

From your branding settings:

• "Primary" uses the "Primary" colour in your branding settings, this is the main colour, the dark gold on the demo site (#b0882f)
• "Secondary" uses the first colour in your branding settings, this is a secondary accent colour, the dark pink on the demo site (#dec181)
• "Neutral (For Backgrounds)" uses the second colour in your branding settings, it's the cream colour used for backgrounds on the demo site (#4b4b4b)

You can update these colours either from your branding settings or override them here in the theme settings. 

You can also edit the website's background colour from theme settings under Website Body > Background.

HubSpot's drag-and-drop editor should be easy and intuitive to use. For the most part, you should be able to click anywhere on the page to edit, rearrange, add or delete content. 

Follow the instructions here to create a page using one of your theme's templates. Within the page you have several elements: 

• Section: this is the container that wraps your content. To add one, hover over the bottom of any section and a "+" sign will appear - from there you can choose one of the theme's prebuilt sections or a layout. You can also save sections you like for future use. When you have your section, you can edit its background (image, colour, gradient...), spacing and alignment as well as drag content into it.
• Columns: within your sections, columns allow you to arrange your content vertically.
• Rows: within your sections and columns, rows allow you to arrange your content horizontally.
• Modules: while all of the above is mostly structural, modules are where you actually add your content such as text and images. HubSpot includes several default modules such as Rich Text, Image, Form... etc. and your theme includes several custom modules such as Accordion, Blog Posts, Custom Button... etc.

For more detailed tutorials from HubSpot check out this article. 

If you're new to editing on HubSpot, I'd also recommend taking time to review HubSpot's CMS for Marketers certification - in particular the "Creating Pages in the HubSpot CMS" section.

After you've successfully downloaded the theme from the HubSpot Marketplace, in HubSpot's navigation go to Marketing > Files and Templates > Design Tools and you should be able to find your theme under the @marketplace folder on the left-hand sidebar.

To edit the code on any file, template or module, you will need to create a child theme.

Contact me at stephanie@stephanieogaygarcia.com with any questions.