SW Modules

Smithworks SW Modules are Smithworks-built HubSpot modules designed for Sprocket Rocket-style themes. They include modules for heroes, page sections, cards, blog layouts, forms, popups, headers, footers, and other common website needs.

Check the name shown for the module in the HubSpot page editor. A name that starts with SR usually identifies a Sprocket Rocket module, so use the Sprocket Rocket documentation. A name that starts with SW identifies a Smithworks module; use the Smithworks FAQs or SW module documentation. Confirming the name first keeps you from following instructions for a different set of fields.

Yes, when the field uses HubSpot's rich-text editor. Use the rich-text toolbar to add a link, bold text, or emphasis instead of pasting HTML code. Plain-text fields, including many headings, titles, and button labels, accept text only. If the toolbar is not available, treat the field as plain text.

Open the module's Style tab, then look under Module Settings for spacing controls. Module Outer Spacing changes the space around the full module band, while Module Inner Spacing changes the space around the content inside that band. Exact options vary by module, so check the SW module documentation when you need the path for a specific module. Preview the page at desktop and mobile sizes before publishing.

A helper class is a small, named style in the theme’s custom stylesheet. You add that name in the module editor, on the item’s CSS Class field or on the module’s Custom Classes field. The class changes only what its rule describes. Every other setting on the module stays in effect.

Use module settings first. Consider a helper class when the module has no field for the treatment, or the field exists but cannot change at a phone size. A helper class is also useful when the same treatment should be reused on many modules without pasting a one-off color or size into each one. Do not add a helper class for spacing, alignment, background, or a button style the module already has.

A label above a heading. The heading repeater can set a size and a color. It cannot say “this label is 28px on a desktop and 20px on a phone, in a gray that is not a theme color.” Put a class on that heading item. The class sets the desktop size, the phone size, and the light-surface color. On a dark background, leave the heading color on Auto so the label stays light.

Padding that should change on a phone only. Module outer spacing is one padding for every screen. Sometimes the band should run to the left and right edges on a phone, while the content inside stays inset. There is no separate mobile value for just those two sides. Put a class on the module. The rule removes the outer left and right padding under the phone breakpoint and leaves the desktop padding alone.

To add one, write the class in the theme stylesheet, with a short comment that says what it does and which breakpoint it uses. Then type that exact class name into the CSS Class or Custom Classes field. Check the page on desktop and on a phone. If a module setting can do the same job, use the setting and do not add the class.

1. Open Theme Settings, then find the typography settings for the text role you are using, such as Lead Paragraph.
2. If Responsive typography is enabled, lower Minimum Font Size to adjust smaller screens.
3. Maximum Font Size controls the large-screen end of the responsive range, so it is not the first fix for a mobile-only problem.
4. Preview the page at several mobile widths before publishing.

See the SW module documentation if your theme presents the typography controls differently.

First confirm what you changed, because pages, global content, and theme settings have different publishing steps. Work through this sequence:

1. Open the live page URL rather than relying on an editor preview.
2. If you changed page content, publish or update that page.
3. If you changed a global header, footer, or section, publish the global content to the affected pages.
4. If you changed theme settings, publish those settings and confirm the live page uses that theme.
5. Verify that your account has permission to publish the change.
6. Clear the browser cache or check the live page in a private browser window.

HubSpot documents how to publish global content and publish theme settings. If the correct content or settings are published and the live page still does not change, contact support with the page URL and a description of what you edited.

Use SW Pillar Section when you need image, video, form, or other content beside text in a side-by-side layout.

Use SW Pillar Section for side-by-side content, alternating image-and-copy sections, forms beside proof or media, two rich-text columns, or a section that needs a wide module outer background.

Open SW Pillar Section, set the secondary column to Image, and turn on Image as Background. That makes the image cover the media column on tablet and desktop.