Modules general info

Content vs Styles

In the page editor you will see that all modules have two parts — Content and Styles:

Module content and styles

At this moment, the Styles tab is not used in our custom modules because we rely on an extra breakpoint (medium screens/tablet) for an improved page responsiveness, that's not currently available natively in the HubSpot drag and drop page editor or the Styles tab. You will find that only default HubSpot modules have some style options enabled. This however doesn't mean we haven't included any style options in our Theme modules. You will just have to find them under the Content tab > Wrapper section, as explained below, or under the Content > Settings section for specifc module styles.

So for now you will only need to make edits in the Content panel, which is the actual content of the module, including settings, style options, etc.

For a better undestanding of the HubSpot drag and drop page editor, please consult this HubSpot guide: Edit page content in a drag and drop area

Act3 modules

Act3 contains pretty much all the modules you need. Most of our theme modules are structured this way:

  1. Content
  2. Settings
  3. Wrapper

Module structure

1. Content

Module fields are used to populate the module with your own content. Some modules include Repeaters, which means a component or sub-component can be repeated, each with its own content. For example, you can use the Button module to include multiple buttons. Or add multiple cards in a card module. Each content field is explained on the specific module documentation page.

2. Settings

Apart for the content and individual component settings, we grouped most of the more advanced settings and styles of a module, or settings that apply to all sub-components of a repeater, in a group named Settings. Depending on the module, this may contain column options, slider functionality, color scheme, etc. This may be missing on some very simple modules, with only a few fields.

Module settings

3. Wrapper

This is where we included our own module wrapper styles, such as padding, margin, text and block alignment, and other wrapper-specific styles:

Module wrapper - all options collapsed

This is pretty much the same on all our theme modules. Some modules may not have this group at all, and others may include styles that override these wrapper styles, such as text alignment.

All wrapper styles are available for three screen sizes: large, medium and small. The styles are applied following a desktop-first approach, to keep a consistency with the HubSpot layout and tools. That means if you set your text alignment on large screens, but don't specify it for medium or small screens, it will inherit the same alignment for those screen sizes as well:

Module wrapper

We have also included two fields where you can specify an unique ID or a custom class that will apply to this module wrapper. This may be useful to developers that want to apply custom styles to a specific module, or if you want to add an anchor that will scroll to your module:

Module wapper - identifiers

Notes:

  • It isn't recommended to align content horizontally using padding or margin, because that may break the layout. Use maximum width and block alignment instead.
  • Some of these styles may be overridden with specific CSS styles in modules used in headers and footers.