Building pages

A Mistral Pro page is a template (the starting layout) filled with modules (the building blocks), optionally dropped in as ready-made sections. This article explains the three, and the conventions you will find in every module.

Three ways to start

1. Pick a template. Content → Website Pages → Create → choose one of the 14 Mistral Pro templates. Each opens with realistic demo content that you overwrite in place. You can switch a page's template later from Settings → Template in the page editor. See Templates.

2. Drop in a section. In the page editor, open the Add section panel: seven pre-composed Mistral Pro sections are listed with a preview. Drop one in and edit it in place.

3. Add a module. The theme's modules appear in the editor's module list, each with its own icon and a description of what it is for. They work in a full-width row, inside a column, and in a drag-and-drop area. Their colours and fonts inherit the theme settings unless you override them on the module.

Columns and the 12-column grid

You can split any row into columns in the page editor: the theme ships the CSS that makes HubSpot's 12-column grid behave in coded templates, so a two-thirds / one-third split renders as expected. Elements such as Single headline figure, Rounded image card and Call to action button are designed to sit in a column next to other content.

Conventions shared by every module

Every Mistral Pro module is organised the same way, so once you know one you know them all.

The Content tab

1. Display — always first. One switch per optional element (Show eyebrow, Show description, Show button, Show section heading…). Switching an element off hides its fields.
2. Content — the texts, images, links and repeating items.
3. Specific groups when the module needs them: Behavior (auto-rotation, delays, single-open accordions), Source (which blog, which posts), Labels or Accessibility labels (screen-reader labels, "Previous / Next", reading time suffix, date format).

The Style tab

Sub-groups, always in the same order when present: Presets (layout, colour scheme, heading size, eyebrow style), Text, Background, Border, Hover, Corner radius, Spacing (the section padding: Small / Medium / Large, sometimes None (inside another section)), Alignment, Advanced.

The Advanced group

At the bottom of the Content tab: Anchor ID (to link to the section from a menu, e.g. #contact) and Additional CSS classes.

Recurring fields

The button standard

Every button in the theme is built the same way:

• a label and a link (page, URL, email, file… with open in new tab and no follow options),
• an optional icon (arrow up-right, arrow right, mail, phone, play… the list depends on the module) placed before or after the label,
• a style among the five theme variants (primary, secondary, outline, ghost, inverted) — set per module in the Presets group or chosen by the module for you,
• a size (small, medium, large) on the standalone Call to action button module.

Button colours always come from the Buttons theme settings.

Repeating items

Lists — services, team members, case studies, questions, steps, logos, figures — are repeating groups: add, remove, reorder and collapse items in the editor. Each repeating group has a maximum number of items set by the module.

Animations

Several modules move on their own: key figures count up, the client logos scroll, the team row rotates, the method board advances, the featured case studies highlight moves, the technology orbit turns. Each has its own switch in its Behavior group, and all of them obey the global Motion and animations theme setting and the visitor's reduced-motion preference.

See also

• Templates
• Theme settings
• Heroes and headings