01
Getting started
DM Tech 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 Tech 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 Tech theme and pick a template: Home, About, Services, Case studies, Contact or Landing page.
- Set your brand. In the page editor, open Theme settings, upload your logos and choose your primary 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 demo content. Each template arrives with realistic, fictional demo content. Click any module to edit it, or remove the ones you do not need.
- 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 Tech 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, logo height | Use SVG or PNG with a transparent background. The dark-background logo is used in the footer and the dark header style. |
| Colours | Primary, secondary (ink and dark sections), signal, page background, cards and panels, headings, body text, lines, link hover | The primary colour drives buttons, links and highlights. Use the signal colour sparingly: it marks status dots and small data accents. |
| Typography | Heading font, body font, technical font, heading scale | All Google Fonts are available. The technical (monospaced) font is used for durations, notes and diagram labels. |
| Buttons | Corner radius, text on primary buttons, hover colour | If your primary colour is light, set the button text to a dark colour. |
| Forms | Field background, field border, label colour, form panel background | Applies to every HubSpot form in the theme, including the blog subscription. |
| Header | Light or dark style, sticky on scroll, background colours | |
| Footer | Background, text colour, theme credit | The credit turns the "Theme DM Tech by digitalmakers.cat" line on or off. |
| Layout | Maximum content width, vertical section spacing, card and image radius | |
| Effects | Dot grid backgrounds, animations | Animations include scroll reveals, counters and the moving data packets in the hero diagram. They are skipped for visitors who prefer reduced motion. |
| Blog | Show author, reading time, share buttons |
04
Templates and sections
| Template | Type | Includes |
|---|---|---|
| DM Tech · Home | Page | Hero with architecture diagram, client logos, services, key figures, image and text, case studies, process, testimonials, engagement models, FAQ, call to action |
| DM Tech · About | Page | Page header, company story, key figures, leadership team, industries, testimonials, call to action |
| DM Tech · Services | Page | Page header, services, process, industries, engagement models, FAQ, call to action |
| DM Tech · Case studies | Page | Page header, case studies with industry filters, key figures, testimonials, call to action |
| DM Tech · Contact | Page | Page header, contact channels and HubSpot form, FAQ |
| DM Tech · Landing page | Page | Header without navigation, campaign hero, logos, process, key figures, testimonials, form, FAQ, minimal footer |
| DM Tech · Blog listing | Blog listing | Featured post, topic filters, post grid, pagination, subscription, call to action area |
| DM Tech · Blog post | Blog post | Article header, cover image, share buttons, author box, comments, more articles, subscription |
| DM Tech · Error 404 / 500 | System | Editable message and buttons with a diagram illustration |
| DM Tech · Search results | System | Site search input and results |
| DM Tech · Password prompt | System | Password form for protected pages |
| DM Tech · Subscription preferences, Backup unsubscribe, Subscriptions confirmation | System | HubSpot 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 ready-made DM Tech sections: Hero, Services, Key figures, Case studies, Delivery process, Engagement models, Testimonials, Team, FAQ and Call to action.
05
Modules
All modules appear in the editor's module panel with the DM Tech · prefix.
Hero
Label, H1, description, two buttons, up to four proof points and a visual: the animated architecture diagram (every node label is editable) or your own image (about 1200 × 1100 px). Optional status card.
Page header
H1 for inner pages with label, text, optional button and breadcrumb. Dark, white or page background.
Client logos
Up to 12 logos shown in monochrome, in colour on hover. The demo logos are fictional brands: replace them with your clients.
Services
Cards in 2, 3 or 4 columns with icon, title, description, tags and link.
Key figures
Outcome figures with caption and note. Numbers count up when the section scrolls into view.
Image and text
Label, heading, text, check-list, button and image, with the image left or right.
Case studies
Cards with cover image, client, industry, title and a result metric. Industry filters are created automatically from the industries you type.
Industries
Grid of sectors with icon, name and short description.
Process
Two to eight numbered stages with description and duration.
Engagement models
Up to four ways to work with you, each with price or commitment, included items, button and an optional highlight badge.
Testimonials
Quote cards with name, role and optional photo (initials are shown when there is no photo).
Team
People with photo or initials, role, focus area and LinkedIn link.
FAQ
Accordion with optional FAQ structured data for search engines.
Call to action
Dark panel with label, heading, text and two buttons.
Contact and form
Contact channels with icons and links next to the HubSpot form of your choice.
Recent posts
Latest posts from the selected blog, with a link to the full blog.
06
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.
07
Blog
- Go to Settings › Content › Blog and select your blog.
- In Templates, set the listing template to DM Tech · Blog listing and the post template to DM Tech · 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 illustration.
Code blocks, tables and quotes in posts are styled automatically. Author, reading time and share buttons can be switched off in Theme settings.
08
System pages
| Where | Template |
|---|---|
| Settings › Content › Pages › System pages | 404 page: DM Tech · Error 404 500 page: DM Tech · Error 500 Password prompt: DM Tech · Password prompt Search results: DM Tech · Search results |
| Settings › Marketing › Email › Subscriptions | Subscription preferences: DM Tech · Subscription preferences Backup unsubscribe: DM Tech · Backup unsubscribe Subscription confirmation: DM Tech · 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.
09
Images
The demo illustrations and client logos are original works made for DM Tech and can be used with the theme. When an image field is empty, the module shows the matching illustration; as soon as you upload your own image, it is used instead.
| Where | Recommended size |
|---|---|
| Hero image | 1200 × 1100 px |
| Image and text | 1200 × 960 px |
| Case study covers | 960 × 600 px or larger (16:10) |
| Team | 600 × 700 px, portrait |
| Blog featured image | 1600 × 900 px (16:9) |
| Client logos | SVG or transparent PNG, about 30 px high |
Always fill in the alt text of your images: it is used for accessibility and SEO.
10
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 Tech › Create child theme) so your changes survive future updates.
11
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 menu does not appear.
Edit the global header and select a menu in Main menu. Make sure the menu has items in Settings › Content › Navigation menus.
The contact form is empty.
Select one of your HubSpot forms in the Contact and form module.
The diagram packets 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.
12
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.