DM Cargo documentation · HubSpot theme by digitalmakers.cat

Getting started

DM Cargo 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 Cargo 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 Cargo theme and pick a template: Home, About, Services, Routes and schedules, Request a quote, Track a shipment, 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 top bar, and add your footer links once for the whole site.
Connect your tools. Set the tracking page URL in the tracking modules and choose your quote form in the Quote request module.
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.

Theme settings

Open any page that uses DM Cargo 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), container blue, container green, signal yellow, page background, cards, headings, body text, lines	The four container colours are used together in labels, card edges and illustrations. Keep them distinct from each other.
Typography	Heading font, body font, base size, codes font, uppercase headings, heading scale	The codes font is used for container numbers, ports, ETA/ETD and labels.
Buttons	Corner radius, text on primary buttons, hover colour	Radius 0 keeps the industrial look of the demo.
Forms	Field background, field border, label colour, form panel background	Applies to every HubSpot form in the theme.
Header	Light or dark style, sticky on scroll, background colours	The top bar (operations desk, phone, tracking link) is edited in the global header.
Footer	Background, text colour, theme credit
Layout	Maximum content width, vertical section spacing, card and image radius
Effects	Hazard stripes, corrugated card edges, animations	Animations include the crane in the hero, the moving route lines and counters. They are skipped for visitors who prefer reduced motion.
Blog	Show author, reading time, share buttons

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.

Menus

Create your menu in Settings › Content › Navigation menus, then edit the global header and choose it in Main menu. The header supports one level of dropdown items; on tablets and phones the menu opens as a full-height panel.

Header options

Optional logo (overrides the theme logo), main menu, call-to-action button and the top bar with operations status text, phone and tracking link.

Footer options

Company text, up to four link columns, social profiles (LinkedIn, GitHub, X, YouTube), legal links and copyright text. The current year is added automatically.

If the menu disappears after installing an update, open Edit global content › Header and select your main menu again.

Templates and sections

Template	Type	Includes
DM Cargo · Home	Page	Hero with container stack and tracking box, client logos, services, key figures, routes and ports, image and text, cargo types, process, testimonials, FAQ, call to action
DM Cargo · About	Page	Page header, company story, key figures, team, offices and agencies, testimonials, call to action
DM Cargo · Services	Page	Page header, services, cargo types, process, image and text, FAQ, call to action
DM Cargo · Routes and schedules	Page	Page header, route map, sailing schedule, shipment tracking, call to action
DM Cargo · Request a quote	Page	Quote request with checklist and HubSpot form, process, FAQ
DM Cargo · Track a shipment	Page	Shipment tracking, next departures, FAQ
DM Cargo · Contact	Page	Page header, contact channels and form, offices and agencies, FAQ
DM Cargo · Landing page	Page	Header without navigation, campaign hero, logos, process, key figures, testimonials, quote form, FAQ, minimal footer
DM Cargo · Blog listing / Blog post	Blog	Featured post, topic filters, pagination, subscription; article page with share buttons, author box and more articles
DM Cargo · Error 404 / 500	System	Editable message and buttons with a port illustration
DM Cargo · 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 ready-made DM Cargo sections: Hero, Services, Key figures, Routes and ports, Sailing schedule, Shipment tracking, Quote request, Cargo types, Shipment process and Call to action.

Modules

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

Hero

Label, H1, description, two buttons, key figures, an optional tracking box and a visual: the animated container stack illustration or your own image (about 1200 × 1040 px).

Routes and ports

World map built from your own data: frame it with west, east, north and south coordinates, add ports with latitude and longitude, and describe each service as a list of port codes. Hovering a service highlights its route.

Sailing schedule

Departures table with vessel, voyage, ports, ETD, ETA, cut-off and a free status text with a colour, filterable by service. Column headings are editable. On phones each sailing becomes a card.

Shipment tracking

Reference number and type sent to your tracking page (carrier, TMS or customer portal) as query parameters. The reference types, labels and parameter names are editable, plus links to vessel, terminal and customs status pages.

Quote request

Checklist of what to include, service promises and the HubSpot form of your choice.

Services

Cards with icon, title, description, tags and link, with container-coloured edges.

Cargo types

Grid of cargo types with icon, description and ISO or IMDG codes.

Key figures

Volume figures with caption and note. Numbers count up when the section scrolls into view.

Offices and agencies

Offices with UN/LOCODE, type, address, phone and email.

Process

Numbered stages from quote to delivery, with durations.

Image and text, Testimonials, Team, FAQ

Story blocks, client quotes, people with photo or initials, and an accordion with FAQ structured data.

Call to action, Contact and form, Recent posts

Dark closing panel with hazard stripe, contact channels next to a HubSpot form, and the latest posts from your blog.

05b

Setting up the route map

Frame the map. In Map area, enter the west and east longitudes and the north and south latitudes that cover your network, in decimal degrees. The demo uses -95, 42, 62 and -42; the whole world is -180, 180, 84 and -58.
Add your ports. For each port enter a code (the UN/LOCODE works well, e.g. ESBCN), the name shown on the map, its latitude and longitude, and where the label goes. Turn on Highlight as home port for your base.
Add waypoints. To steer a line around land, add a port with Show marker and label turned off (straits, capes) and use its code inside routes.
Describe each service. In Services, list the port codes in order, separated by commas: ESBCN, WP-GIB, USNYC. Use Curve to bend the legs.

Coordinates are easy to find: search the port on any online map and copy the latitude and longitude. A custom map image must be an equirectangular map of the whole world so that coordinates line up.

Links and icons

Every link in DM Cargo is a HubSpot link field: choose a page, blog post, file, email address, phone number, WhatsApp number or external URL, and decide whether it opens in a new tab or uses nofollow. Service, cargo and contact icons use HubSpot's icon picker, so any Font Awesome icon can be selected.

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 as services, and link to it with #services from a button or menu.
Heading tag (SEO): choose H1, H2 or H3 so each page keeps a correct heading order.

Blog

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

System pages

Where	Template
Settings › Content › Pages › System pages	404 page: DM Cargo · Error 404 500 page: DM Cargo · Error 500 Password prompt: DM Cargo · Password prompt Search results: DM Cargo · Search results
Settings › Marketing › Email › Subscriptions	Subscription preferences: DM Cargo · Subscription preferences Backup unsubscribe: DM Cargo · Backup unsubscribe Subscription confirmation: DM Cargo · 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 port illustrations, route map and client logos are original works made for DM Cargo 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 × 1040 px
Image and text	1200 × 960 px
Route map (optional)	1200 × 760 px, SVG or PNG
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.

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

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 tracking box opens the wrong page.

Set the tracking page URL and parameter name in the Shipment tracking module and in the hero. The reference is added to the URL, for example ?ref=DMCU4102258&type=container.

The crane, route lines 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.

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.