HubSpot Docs
Version 9.0
HubSpot Theme
The SmartAcre theme is built to use HubSpot’s drag and drop CMS interface where you can add and arrange modules to create different layouts. The SmartAcre theme is built using the most popular and well supported frontend frameworks available. These frameworks are linked below for your reference.
| Framework | Description |
|---|---|
| Bootstrap 5.3 | Bootstrap powers the frontend UI of the SmartAcre Theme. Bootstrap components are used to create navigation drop downs, search modal popups and an off canvas collapsable mobile menu. Using Bootstrap components ensures that the site is accessible and compatible with all current devices. |
| Font Awesome 6 | Use any icon from the Font Awesome 6 Pro library. |
| Google Fonts | Google Fonts provides a free catalog of open-source fonts to choose from. The SmartAcre Theme uses the Inter font by default but can be customized to use any Google Font. |
| Google Maps API | The Maps JavaScript API is used for all map integrations. |
| Google Custom Search JSON API | The SmartAcre Theme uses the Custom Search JSON API to allow your site to search multiple web properties using a Google Programmable Search Engine. See instructions for creating a Google Custom Search engine. |
Theme Settings
Default theme settings can be modified under settings. These settings are mainly used as fallback styles when the main stylesheet does not apply.
Settings > Website > Themes
| Settting | Description |
|---|---|
| Global Colors | Set the primary and secondary colors. |
| Global Fonts | Set the primary and secondary fonts. |
| Spacing | Define the default vertical spacing and width of the site. |
| Text | Define the styles for all typography. |
| Buttons | Set the default styles for all buttons. The theme stylesheet will overwrite the button styles in most instances. |
| Forms | Define the setting for all forms. The theme stylesheet will overwrite the form styles in most instances. |
| Tables | Default styles for tables. |
| Website header | These settings are not used with the theme |
| Website footer | These settings are not used with the theme. |
Navigation Menus
Navigation menus can be modified under Settings. Select the correct menu from the drop down and make any necessary changes.
Settings > Website > Navigation Menus
| Menu | Description |
|---|---|
| Main Menu | The main header navigation of the website. |
| Footer Menu | Most websites have multiple footer menus. One menu for each column of links in the footer. |
Search
The SmartAcre Theme can be configured to use a Google Programmable Search Engine to power the site search of your website.
| Search | Description |
|---|---|
| Google Custom Search | Google Custom Search enables your site to search multiple web properties using a Google Programmable Search Engine. To enable Google search you need to create a Custom Search JSON API key and create a Programmable Search Engine. |
Drag and Drop Template
The drag and drop template is the main template used for creating pages in HubSpot. The drag and drop template uses HubSpot’s drag and drop CMS interface where you can add and arrange modules to create different layouts.
Drag and Drop Modules
Below is a list of the default modules that are included with the SmartAcre Theme. In addition to default modules, custom modules can be created and tailored for each site.
| Module | Description |
|---|---|
| Rich Text | Insert a standard WYSIWYG editor. |
| Image | Place an image. |
| Video | Embed a video. |
| Form | Embed a form. |
| Call-to-Action | Insert a call-to-action. |
Flexible Template
The flexible template is a stand alone template that can be used for creating landing pages in HubSpot. The flexible template is different than the drag and drop template in that it uses HubSpot flexible areas with custom modules that are built specifically for the flexible template.
Flexible Header & Footer
The flexible template allows you to modify the header and footer on for each landing page. Below is a list of what is customizable for each landing page.
| Option | Description |
|---|---|
| Local Header Logo | Change the header logo for the page. Changes apply to the current landing page only. |
| Local Footer Logo | Change the footer logo for the page. Changes apply to the current landing page only. |
| Global Footer Social Links | Modify the social links in the footer. Changes apply globally to all landing pages using the flexible template. |
| Global Footer Technical Info | Modify the copyright text in the footer. Changes apply globally to all landing pages using the flexible template. |
Flexible Modules
To add a flexible template module click the “contents” icon in the left sidebar, then click “+ Add new module” and search for modules that start with “Flx”.
Content > + Add new module > Search for "Flx"
Most “Flx” modules have an Options dropdown with the following set of options that allow you to customize each module.
| Option | Description |
|---|---|
| Anchor Label | The label of the layout section. This text is used to create an html ID that can be used as an anchor link for the section. |
| Background Color | Add a background color. |
| Padding Top | The top padding of the layout container. |
| Padding Bottom | The bottom padding of the layout container. |
| Horizontal Align | The horizontal alignment of the columns (modules). |
| Vertical Align | The vertical alignment of the columns (modules). |
| Full Screen Width | Toggle full screen width on to make the layout section expand outside the container to the full width of the screen. |
Below is a list of the default modules that are included with the Flexible Template. In addition to default modules, custom modules can be created and tailored for each site.
| Module | Description |
|---|---|
| Flx Aspot Lp Module 2023 | Standard aspot module with background image. |
| Flx Aspot Form Lp Module 2023 | Aspot with a right column form overlay. |
| Flx Content Lp Module 2023 | A repeater of content modules. Define the width of each content module to create custom column layouts. |
| Flx Form Lp Module 2023 | Insert a single form in one column. |
| Flx Logos Lp Module 2023 | A repeater of image modules designed for adding rows of logos that can be linked with the ability to open in a new tab if needed. |
| Flx Logo Carousel Lp Module 2023 | A repeater of image modules that creates a carousel. It’s designed for adding rows of images that can be linked with the ability to open in a new tab if needed. |
| Flx Quote Carousel Lp Module 2023 | A repeater of quote modules that creates a carousel. Use this module to create a carousel of client quotes or testimonials. |
| Flx Meeting Lp Module 2023 | Embed a meeting calendar to allow people to easily schedule meetings with your team. |
| Flx Two Column Left Media Lp Module 2023 | Two column layout with an image on the left. |
| Flx Two Column Right Media Lp Module 2023 | Two column layout with an image on the right. When the site responds to a mobile layout the image will be ordered first. |
| Flx TwoCol Form Lp Module 2023 | Two column layout with a form on the right. |
Style Guide
The style guide is a reference for all content styles that can be used in each rich text editor. Below are examples of CSS classes and code that can be used to create the style for each element.
Typography
A set of harmonious typography scale.
| Code | Example |
|---|---|
<h1> |
Heading H1 |
<h2> |
Heading H2 |
<h3> |
Heading H3 |
<h4> |
Heading H4 |
<h5> |
Heading H5 |
<h6> |
Heading H6 |
.text-lg-overline |
Large Overline Heading |
.text-md-overline |
Medium Overline Heading |
.text-sm-overline |
Small Overline Heading |
.text-xs-overline |
Extra Small Overline Heading |
Add class .text-lg to create paragraph large text style. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Add class .text-md to create paragraph medium text style. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae congue nullam consectetur ornare sed in leo.
Add class .text-sm to create paragraph small text style. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae congue nullam consectetur ornare sed in leo.
Add class .text-xs to create paragraph extra small text style. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae congue nullam consectetur ornare sed in leo.
Example blockquote text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Unordered list
- Unordered list bullet
- Unordered list bullet
- Unordered list bullet
- Unordered list bullet
Ordered list
- Ordered list bullet
- Ordered list bullet
- Ordered list bullet
- Ordered list bullet
Buttons
A button is used to trigger actions based on a user’s interaction.
| Code | Example |
|---|---|
class="btn arrow-right" |
Learn More |
class="btn arrow-left" |
Learn More |
class="btn btn-primary arrow-right" |
Learn More |
class="btn btn-primary-outline arrow-right" |
Learn More |
class="btn btn-secondary arrow-right" |
Learn More |
class="btn btn-secondary-outline arrow-right" |
Learn More |
class="btn btn-white arrow-right" |
Learn More |
class="btn btn-white-outline arrow-right" |
Learn More |
Links
A link is used to trigger actions based on a user’s interaction.
| Code | Example |
|---|---|
| Stand Alone Link | |
class="arrow-right" |
Link with arrow right |
class="arrow-left" |
Link with arrow left |
class="link-external" |
External link |