01
Getting started
DM Bold works on any HubSpot account with Content Hub (CMS) that can use themes. The blog templates need HubSpot's blog tool, and the contact module uses HubSpot forms.
- Install the theme. Get DM Bold from the HubSpot Template Marketplace. It is added to your account automatically and appears in the Design Manager under
@marketplace. - Create your first page. Go to Content › Website pages › Create, choose the DM Bold theme and pick a template: Home, About, Services, Work, Pricing, Contact or Landing page.
- Set your brand. In the page editor, open Theme settings, upload both logos (one for light backgrounds, one for photos and dark backgrounds) and choose your accent colour and fonts. Changes apply to every page that uses the theme.
- Edit the header and footer. Click the header or footer on any page and choose Edit global content. Select your main menu, set the header button and add your footer links once for the whole site.
- Replace the photos. The demo uses AI-generated photos made for this theme. Upload your own team, office and project photos in each module before going live (see Photos and images).
- Connect your form. Choose your HubSpot form in the Contact module.
- Connect the blog and system pages. Assign the blog and system templates as described in Blog and System pages.
02
Theme settings
Open any page that uses DM Bold in the editor and click Theme settings. Every option below applies site-wide.
| Group | Settings | Tips |
|---|---|---|
| Brand | Logo for light backgrounds, logo for dark backgrounds and photos, logo height | The light logo is shown in the transparent header over the hero photo and in the footer. Use SVG or a transparent PNG. |
| Colours | Accent, ink, page background, cards and panels, body text, lines, text on accent | The accent is used for buttons, highlighted words and badges. If you choose a dark accent (blue, purple), set Text on accent to white. |
| Typography | Heading font, body font, base size, labels and numbers font, heading scale | Heavy, condensed-looking fonts (weight 700–800) keep the bold look of the demo. |
| Shape | Image and card radius, button shape (pill, rounded, square) | Radius 0 and square buttons give a sharper, editorial feel. |
| Forms | Field background, field border, form panel background | Applies to every HubSpot form in the theme. |
| Header | Sticky on scroll, transparent over the hero photo, background | When the first section of a page is a Hero, the header sits on top of the photo in white and turns solid when visitors scroll. |
| Footer | Background, text, theme credit | |
| Layout | Maximum content width, vertical section spacing | |
| Effects | Animations, film grain on photos | Animations include the slow zoom on the hero photo, the marquee, scroll reveals and counters. They are skipped for visitors who prefer reduced motion. |
| Blog | Show author, reading time, share buttons |
04
Templates and sections
| Template | Type | Includes |
|---|---|---|
| DM Bold · Home | Page | Full-screen photo hero, client logos, services with photos, marquee, photo and text, big numbers, case studies, process, testimonials, photo gallery, FAQ, call to action over photo |
| DM Bold · About | Page | Page header with photo, story, big numbers, team portraits, marquee, gallery, testimonials, call to action |
| DM Bold · Services | Page | Page header, services, features with icons, process, pricing, FAQ, call to action |
| DM Bold · Work | Page | Page header, filterable case studies, client logos, big numbers, testimonials, call to action |
| DM Bold · Pricing | Page | Page header, three plans, features, FAQ, call to action |
| DM Bold · Contact | Page | Contact channels and HubSpot form, gallery, FAQ |
| DM Bold · Landing page | Page | Header without navigation, campaign hero, logos, process, big numbers, testimonials, form, FAQ, minimal footer |
| DM Bold · Blog listing / Blog post | Blog | Featured post, topic filters, pagination, subscription; article page with share buttons, author box and more articles |
| DM Bold · Error 404 / 500 | System | Editable message and buttons over a photo with an oversized error code |
| DM Bold · Search results, Password prompt, Subscription preferences, Backup unsubscribe, Subscriptions confirmation | System | HubSpot system and email subscription pages |
All page templates use drag-and-drop areas: add, remove and reorder any module, or build new page types from the same modules.
Saved sections
In the editor, open Add › Sections to insert 14 ready-made DM Bold sections: Hero, Marquee, Services, Photo and text, Big numbers, Case studies, Features, Process, Pricing, Testimonials, Team, Gallery, FAQ and Call to action.
05
Modules
All modules appear in the editor's module panel with the DM Bold · prefix.
Hero
Full-bleed background photo with focus point, darkening (0–90%), height (full screen, large, medium), content position, label, H1 with highlighted words, description, two buttons and up to four key figures.
Marquee
Large scrolling words in accent, dark or outline style, three speeds and both directions. Pauses on hover.
Services
Numbered cards with portrait photo, title, description, tags and link, in 2, 3 or 4 columns.
Case studies
Project cards with photo, client, sector, title and a headline result. Optional filters by sector.
Features
Grid of benefits or product features with any icon from HubSpot's icon picker.
Pricing
Plans with summary, price, note, feature list, button, badge and a highlighted dark plan.
Photo gallery
Horizontal scrolling strip (or grid) of landscape, portrait or square photos with captions.
Team
Portrait grid with name, role, focus and a profile link (LinkedIn or any page).
Big numbers
Oversized figures with caption and note. Numbers count up when the section scrolls into view.
Photo and text, Process, Testimonials, FAQ
Story block with checklist, numbered steps with durations, quote cards, and an accordion with FAQ structured data.
Call to action, Contact, Recent posts
Large heading over a wide photo, contact channels with icons next to a HubSpot form, and the latest posts from your blog.
Page header, Client logos
Inner page title with breadcrumb, text, button and optional wide photo; a row of client logos.
06
Highlights, links and icons
Highlighted words
Most headings have a Highlighted words field. Type a word or phrase exactly as it appears in the heading and it is marked with the accent colour (underlined in sections, coloured text over photos). Leave it empty for a plain heading.
Links
Every link in DM Bold is a HubSpot link field: choose a page, blog post, file, email address or external URL (use tel: for phone numbers), and decide whether it opens in a new tab or uses nofollow. Section headings can also have an optional link.
Icons
Feature and contact icons use HubSpot's icon picker, so any Font Awesome icon can be selected.
07
Section options
Content modules share the same options so you can build varied pages without code:
- Section background: page background, white or dark.
- Vertical spacing: normal, small, no top spacing or no bottom spacing.
- Anchor ID: type an ID without
#, such asservices, and link to it with#servicesfrom a button or menu. - Heading tag (SEO): choose H1, H2 or H3 so each page keeps a correct heading order.
08
Blog
- Go to Settings › Content › Blog and select your blog.
- In Templates, set the listing template to DM Bold · Blog listing and the post template to DM Bold · Blog post.
- Tag your posts: tags become the topic filters on the listing page.
- Add a featured image to each post (16:9 works best). Posts without one show the theme's fallback photo.
Code blocks, tables and quotes in posts are styled automatically. Author, reading time and share buttons can be switched off in Theme settings.
09
System pages
| Where | Template |
|---|---|
| Settings › Content › Pages › System pages | 404 page: DM Bold · Error 404 500 page: DM Bold · Error 500 Password prompt: DM Bold · Password prompt Search results: DM Bold · Search results |
| Settings › Marketing › Email › Subscriptions | Subscription preferences: DM Bold · Subscription preferences Backup unsubscribe: DM Bold · Backup unsubscribe Subscription confirmation: DM Bold · Subscriptions confirmation |
Menu paths can change slightly between HubSpot account versions. If you cannot find them, search "System pages" or "Subscription pages" in HubSpot settings.
10
Photos and images
DM Bold is designed around photography. The demo photos are AI-generated images created for this theme and do not depict real people; replace them with your own photos before publishing. When an image field is empty, the module shows the matching demo photo; as soon as you upload your own, it is used instead.
| Where | Recommended size |
|---|---|
| Hero background | 2400 × 1350 px (16:9), subjects on the right, calm space on the left for the heading |
| Call to action background | 2400 × 1030 px (21:9) |
| Page header photo | 2400 × 1030 px (21:9) |
| Services, Photo and text | 1200 × 1500 px (4:5, portrait) |
| Case studies | 1600 × 1100 px |
| Team | 900 × 1125 px (4:5), same backdrop for everyone |
| Gallery | 1600 × 1200 px landscape, 1200 × 1600 px portrait |
| Blog featured image | 1600 × 900 px (16:9) |
| Client logos | SVG or transparent PNG, about 30 px high |
Use the Darken photo and Photo focus point options in the Hero to keep white text readable on bright images. Always fill in the alt text of your images: it is used for accessibility and SEO. Keep photos under 500 KB (JPG, quality 75–80).
11
Editing the code
Everything above works without code. If you need to change templates, CSS or modules, create a child theme first (Design Manager › right-click DM Bold › Create child theme) so your changes survive future updates.
12
Troubleshooting
I changed a theme setting but a page still looks the same.
Values changed inside a module (for example a section background) take priority over theme settings. Reset the field in the module or edit it directly.
The header is not transparent on my page.
The transparent header only appears when Transparent over the hero photo is on and the first module of the page is the DM Bold Hero. On other pages the header is solid.
The heading is hard to read on my photo.
Increase Darken photo in the Hero, or move the focus point so the busy part of the photo sits away from the text.
A highlighted word is not marked.
The Highlighted words field must match the heading exactly, including capital letters and punctuation.
The contact form is empty.
Select one of your HubSpot forms in the Contact module.
The marquee or counters do not move.
Visitors whose device asks for reduced motion see the final state straight away. Animations can also be turned off in theme settings.
13
Support
Questions, bugs or feature requests: write to support@digitalmakers.cat. We reply in English, Spanish and Catalan, usually within two working days. Please include your HubSpot account ID and the URL of the page you are working on.
The theme is licensed under the digitalmakers.cat theme license terms.