Documentation
Frequently Asked Questions about the HubSpot Geometry Theme
Have more questions? A feature request? Is something missing below?
Send me an email at stephanie@stephanieogaygarcia.com
Setup
Get started with the Geometry theme
-
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 several colour fields that, when changed, will update your website globally: Text, Primary, Secondary, Accent Color 1, Accent Color 2, Accent Color 3 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 yellow on the demo site (#F8BF2F)
- "Secondary" uses the first colour in your branding settings, this is a secondary accent colour, the blue/turquoise on the demo site (#85D6D5)
- "Accent Color 1" uses the second color in your branding settings, the red/coral on the demo site (#F97D43)
- "Accent Color 2" uses the third color in your branding settings, the purple on the demo site (#BD7DCD)
- "Accent Color 3" uses the fourth color in your branding settings, the green on the demo site (#41B57C)
- "Neutral (For Backgrounds)" uses the fifth colour in your branding settings, it's the light gray colour used for backgrounds on the demo site (#F6F6F6)
You can update these colours either from your branding settings or override them here in the theme settings.
-
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.
Support
Get help with your theme
-
Contact me at stephanie@stephanieogaygarcia.com with any questions.