DM Strukt documentation · HubSpot theme by digitalmakers.cat

Getting started

DM Strukt 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 Strukt 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 Strukt theme and pick a template: Home, About, Services or Contact.
Set your brand. In the page editor, open Theme settings and upload your logos, then 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 in any page and choose Edit global content. Select your menus and add your contact details once for the whole site.
Replace the demo content. Each page arrives with realistic demo text and illustrations. Click any module to edit it, or remove the ones you do not need.
Connect the blog and system pages. Assign the blog templates and system page templates as described in Blog and System pages.

Theme settings

Open any page that uses DM Strukt 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 dark header and the footer.
Colours	Accent, accent hover, text on accent, dark background, secondary dark background, light background, surface / cards, main text, secondary text, lines and borders	The accent drives buttons, links, markers and highlights. If your accent is light (yellow, lime), set Text on accent to a dark colour.
Typography	Heading font, body font, technical font, base text size, heading scale, heading letter spacing, uppercase headings	All Google Fonts are available. The technical font is used for labels, figures and navigation numbers.
Buttons	Corner radius, uppercase text, show arrow	Set the radius to 0 for the sharp, technical look of the demo.
Layout	Maximum content width, vertical section spacing, card radius, image radius	Section spacing applies to every Strukt module with medium spacing.
Effects and details	Blueprint grid on sections, dimension marks on images, hazard stripes, scroll animations	The blueprint grid must be enabled here and in each section where you want it. Animations are skipped automatically for visitors who prefer reduced motion.
Header	Light or dark style, sticky on scroll
Footer	Show theme credit	Turns the "Theme DM Strukt by digitalmakers.cat" line on or off.
Blog	Show author, reading time, share buttons, automatic table of contents	The table of contents is built from the H2 and H3 headings of each post.

Header, footer and menus

The header and footer are global partials: you edit them once and the change appears on every page, blog post and system page.

Menus

Create your menus in Settings › Content › Navigation menus. Then edit the global header and choose the Main menu, and edit the global footer to choose the Footer menu. The header supports one level of dropdown items; on mobile the menu opens as a full-height panel.

Header options

Logo (optional, overrides the theme logo), main menu, call-to-action button text and link, and a top bar with a short message, phone and email.

Footer options

Contact block with heading, featured email and button; company text; footer menu; contact details; social networks (LinkedIn, Instagram, Facebook, X, YouTube, TikTok); legal links; copyright text (the current year is added automatically); and the giant wordmark that can be shown or hidden.

Templates

Template	Type	Includes
Strukt · Home	Page	Hero, ticker, services, image + text, stats, projects, process, before/after, testimonials, client logos, recent posts, call to action
Strukt · About	Page	Page header, company story, stats, values, team, client logos, call to action
Strukt · Services	Page	Page header, services list, process, testimonials, FAQ, call to action
Strukt · Contact	Page	Page header, contact details and form, map, FAQ
Strukt · Blog listing	Blog listing	Featured post, topic filters, pagination, subscription form, call to action
Strukt · Blog post	Blog post	Reading progress bar, table of contents, share buttons, author box, related posts, call to action
Strukt · Error 404 / 500	System	Error message and link back to the homepage
Strukt · Search results	System	Site search input and results
Strukt · Password prompt	System	Password form for protected pages
Strukt · Subscription preferences, Backup unsubscribe, Subscriptions confirmation	System	HubSpot email subscription pages

All page templates use drag-and-drop areas. You can add, remove and reorder any module, and build new page types (for example a project detail page) from the same modules.

Sections

In the editor, open Add › Sections to insert ready-made Strukt sections: Hero, Services, Image and text, Key figures, Project portfolio, Before and after, Testimonials and Call to action.

Header and footer areas

The global header and footer are drag-and-drop areas too, so you can add a module above or below them (for example an announcement banner) when editing global content.

Modules

All modules are listed in the editor's module panel with the Strukt · prefix.

Hero

Status label, three-part title (opening, highlighted, closing text), description, two buttons, image (portrait, about 1200×1500 px), optional project-in-progress card with progress bar, and key figures.

Page header

H1 title for inner pages with section number, eyebrow, description, optional breadcrumb and side image.

Ticker

Scrolling band of short texts. Choose speed, style and an optional slanted angle.

Services

Services as cards (2, 3 or 4 columns) or a wide list. Each service has an icon, title, description, tags and link.

Image + text

Text with bullet list and button next to an image. Image left or right, with an optional badge on the image.

Stats

Key figures with prefix and suffix. Counters animate when the section scrolls into view.

Projects (portfolio)

Projects in a bento or even grid. Each project has image, name, category, location, year, technical detail and optional link. Category filters are created automatically from the categories you type.

Process

Numbered stages with title, description and duration.

Before / after

Comparison slider with "before" and "after" images and labels, initial handle position and a list of project details.

Testimonials

Carousel of quotes with name, role, project and rating.

Team

People cards in 3 or 4 columns with photo, name, role and LinkedIn link.

Values / benefits

Icon grid in 2, 3 or 4 columns to explain why clients choose you.

Client logos

Logo row with optional continuous scroll and monochrome mode.

FAQ

Accordion with optional first question open and FAQ structured data for search engines.

Call to action

Closing section with one or two buttons and optional hazard stripes.

Contact + form

Contact details with icons and links (phone, email, address, hours) next to a HubSpot form of your choice.

Map

Embedded Google Map from an address, with zoom, height, monochrome mode and an info card. No API key needed.

Button

Standalone button (primary, outline or dark) with alignment.

Header / Footer

Used inside the global header and footer. See Header, footer and menus.

Section options

Most modules have a Section group so you can build varied pages without code:

Background: concrete (light), white, dark or accent.
Top and bottom spacing: none, small, medium or large.
Show blueprint grid: a subtle technical grid behind the section (also needs the theme setting enabled).
Anchor ID: type an ID without #, such as services, and link to it with #services from a button or menu.
Heading tag (SEO): choose H1, H2 or H3 for the section title so each page keeps a correct heading order.

Blog

Go to Settings › Content › Blog and select your blog.
In Templates, set the blog listing template to Strukt · Blog listing and the blog post template to Strukt · Blog post.
Use tags on your posts: they 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.

Use H2 and H3 headings inside posts so the automatic table of contents works. Author, reading time, share buttons and table of contents can be switched off in Theme settings.

System pages

DM Strukt styles every HubSpot system page so the site never loses its look.

Where	Template
Settings › Content › Pages › System pages	404 page: Strukt · Error 404 500 page: Strukt · Error 500 Password prompt: Strukt · Password prompt Search results: Strukt · Search results
Settings › Marketing › Email › Subscriptions	Subscription preferences: Strukt · Subscription preferences Backup unsubscribe: Strukt · Backup unsubscribe Subscription confirmation: Strukt · Subscriptions confirmation

The 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 demo illustrations are original SVG files made for DM Strukt and can be used with the theme. When an image field is empty, the module shows the matching illustration; as soon as you upload a photo, the photo is used instead.

Where	Recommended size
Hero	1200 × 1500 px, portrait
Projects, image + text, before / after	1400 × 1000 px or larger, landscape
Team	600 × 750 px, portrait
Blog featured image	1600 × 900 px (16:9)
Client logos	SVG or transparent PNG

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

Editing the code

You can do everything described above without code. If you need to change templates, CSS or modules, create a child theme first (Design Manager › right-click DM Strukt › Create child theme). Your changes then survive future updates of DM Strukt.

Troubleshooting

I changed a theme setting but a page still looks the same.

Theme settings apply to all pages, but values you have already changed inside a module (for example a section background) take priority. Reset the field in the module or edit it directly.

The menu does not appear.

Edit the global header and select a menu in the Main menu field. 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 + form module.

The blueprint grid does not show.

Turn on Blueprint grid on sections in theme settings and Show blueprint grid in the module's Section group.

Counters or animations 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.

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 theme license terms.