Editing tips

Highlight words in a heading

Wrap words in [square brackets] or {braces} to show them in the highlight style (the brand gradient or accent color, set in the module's Styles tab).

Turn insights into [impact]

Start a new line

Plain text fields don't accept line breaks. Type | (a vertical bar with a space on each side) where you want a new line, in headings and in multi-line items such as tab points.

Grow faster | without the busywork

Light and dark sections

Every module has a Color mode in its Styles tab: Same as site, Light or Dark. Mix them to create rhythm on a page, for example a dark features section between two light ones. Colors come from Light mode colors and Dark mode colors, so the section still matches your brand.

Section backgrounds and spacing

In a module's Styles tab you can make the background transparent or pick a color, add a background effect where offered (such as a soft glow or floating bubbles), and set the top and bottom spacing for desktop and mobile separately.

Eyebrows

The small label above a heading can be plain text, a pill or a gradient badge. Set the default once in Theme settings › Eyebrow, or choose a different style per section.

Icons

Icon fields search HubSpot's icon library (Font Awesome). Type a word such as rocket, chart or shield to find one.

Translate the theme

Words that visitors see but you don't type in as content, like Previous, Load more, Close menu or Monthly / Annual, are in each module's Interface labels group. Change them to translate the module or to adjust the wording. Many of them are read by screen readers, so keep them meaningful.

For a multi-language site, create page translations in HubSpot (the header shows a language switcher on translated pages) and translate the global header and footer content for each language.

Anchors and in-page links

Add the Section Styler module to a section (some modules, such as Case Studies and Job Openings, have their own Anchor field) and give it an anchor like pricing. Link to it with #pricing; the page scrolls smoothly and leaves room for a sticky header.

Animations

Sections fade in as visitors scroll, and some modules have extra motion (floating cards, orbiting logos, counters). Turn off Animate when scrolled into view in a module's Styles tab to show it straight away. Visitors whose device asks for reduced motion get no animation automatically.