DM Lab documentation · HubSpot theme by digitalmakers.cat

Getting started

DM Lab 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 Lab from the HubSpot Template Marketplace. It appears in the Design Manager under @marketplace.
Create your first page. Go to Content › Website pages › Create, choose the DM Lab theme and pick a template: Home, About, Services, Contact or Landing page.
Set your brand. In the page editor, open Theme settings, upload your logos and choose your ink and accent colours and fonts.
Edit the header and footer. Click the header or footer and choose Edit global content. Select your main menu and button, then add footer columns, address and legal links.
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 templates as described in Blog and System pages.

Theme settings

Open any page that uses DM Lab in the editor and click Theme settings. Every option applies site-wide.

Group	Settings	Tips
Colours	Ink (headings, buttons, dark sections), signal accent, body text, page background, surface, rules and grid lines	The ink colour sets the overall tone. Use the signal accent sparingly: it marks labels, data points and active states.
Typography	Heading font, body font, data font	All Google Fonts are available. The data font is used for figures, captions and references.
Layout	12-column grid lines, corner radius, maximum content width	The grid lines are the theme's signature; switch them off for a calmer look.
Brand	Main logo, logo for dark backgrounds, logo width	Use SVG or PNG with a transparent background. If there is no dark-background logo, the main logo is shown in white in the footer.

Header, footer and menus

The header and footer are global: you edit them once and the change appears on every page, blog post and system page. Both are drag-and-drop areas, so you can add a module above or below them (for example an announcement) when editing global content.

Menus

Create your menu in Settings › Content › Navigation menus, then edit the global header and choose it in Main menu. One level of dropdown items is supported; on tablets and phones the menu opens below the header.

Header options

Main menu and call-to-action button text and link. The logo comes from theme settings.

Footer options

Tagline, button, link columns, address, legal company name and legal links. The current year is added automatically.

After installing an update that changes the header or footer, open Edit global content and check that your menu and footer content are still selected.

Templates and sections

Template	Type	Includes
DM Lab · Home	Page	Hero with figure plate, key figures, service cards, image and text, testimonials, call to action banner, recent posts
DM Lab · About	Page	Hero, key figures, image and text, principles, team, video, call to action
DM Lab · Services	Page	Hero, service cards, process, testimonials, FAQ, call to action
DM Lab · Contact	Page	Hero, contact form, contact details, locations, FAQ
DM Lab · Landing page	Page	Header without navigation, campaign hero, key figures, process, image and text, testimonials, form, FAQ, minimal footer
DM Lab · Blog listing	Blog listing	Featured post, topic filters, pagination, subscription, call to action area
DM Lab · Blog post	Blog post	Article header, cover, author and topics, share buttons, comments, related reading
DM Lab · 404 / 500 page	System	Editable message and buttons with a scientific figure
DM Lab · Search results	System	Site search input and results
DM Lab · Password prompt	System	Password form for protected pages
DM Lab · Subscription preferences, Backup unsubscribe, Subscriptions confirmation	System	HubSpot email subscription pages

Saved sections

In the editor, open Add › Sections to insert ready-made DM Lab sections: Hero, Key figures, Service cards, Image and text, Process, Principles, Testimonials, Team, FAQ and Call to action.

Modules

All modules appear in the editor's module panel with the DM Lab · prefix.

Hero

Eyebrow, H1, description, two buttons and an image shown as a captioned figure plate (split layout) or as a full background (cover layout).

Key figures

Figures with label and note, separated by fine rules.

Service cards

Cards with illustration, title, description and link, in 2 to 4 columns.

Image and text

Figure plate with caption next to text, bullet points and a button; image left or right.

Process steps

Numbered stages on a timeline with description and duration.

Values

Principles with icon, title and description.

Testimonials

Large quotes with name and role.

Team

People with photo (or initials), role and focus area.

Video

Poster image with play button that opens a video in an overlay.

FAQ

Accordion of questions and answers.

Banner call to action

Dark banner with artwork, heading, text and button.

Contact and form

Intro, numbered next steps and the HubSpot form of your choice.

Contact details

Channels with icon, detail and note.

Locations

Offices with address, coordinates and map link.

Section style: page background, surface (tinted) or ink (dark). Alternate them to give long pages a rhythm.
Eyebrow: the short label with the accent square, used to name each section.

Blog

Go to Settings › Content › Blog and select your blog.
In Templates, set the listing template to DM Lab · Blog listing and the post template to DM Lab · 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).

System pages

Where	Template
Settings › Content › Pages › System pages	404 page: DM Lab · 404 page 500 page: DM Lab · 500 page Password prompt: DM Lab · Password prompt Search results: DM Lab · Search results
Settings › Marketing › Email › Subscriptions	Subscription preferences: DM Lab · Subscription preferences Backup unsubscribe: DM Lab · Backup unsubscribe Subscription confirmation: DM Lab · 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.

Images

The scientific illustrations are original works made for DM Lab and can be used with the theme. Replace them with your own images at any time.

Where	Recommended size
Hero (split layout)	1200 × 1500 px, portrait
Hero (cover layout), banner	2400 × 1200 px
Image and text	1200 × 1200 px
Service cards	800 × 560 px
Blog featured image	1600 × 900 px (16:9)

Always fill in the alt text of your images: it is used for accessibility and SEO.

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 Lab › Create child theme) so your changes survive future updates.

Troubleshooting

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.

I changed a theme colour but a section still looks the same.

Check the module's Section style: dark sections use the ink colour, tinted sections use the surface colour.

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.

DM Lab setup and user guide