Section Settings

Note: Some of these settings require JavaScript to add the necessary classes. While rare, there may be users with JavaScript turned off, and they will not see these settings applied.

Content

• Toggle Options _[Multi Choice]
  _Choices: Add Overlay, Add Two Tone Background, Add Overlap, Customize Columns
• Overlap [Group]
  • Overlap Section _[Choice]
    _Choices: None, Above, Below
  • Distance _[Number]
    _A percentage of the height of the current section that should overlap the adjacent section.
  • Max Width of Section [Number]
• Custom Columns [Repeater Group]
  • Number Order _[Number] [Required]
    _This is the order of which the column has been added to the section and is required to be able to target the specific column.
  • Margin [Group]
    • Desktop, Tablet, Mobile _[_Responsive Groups]
      • Top [Number]
      • Bottom [Number]
      • Left [Number]
      • Right [Number]
  • Width [Group]
    • Desktop, Tablet, Mobile [Responsive Groups]
      • Fit To Content [Boolean]
        Width stretches to fit the content inside within the available space.
      • Unit _[Choice] [Required]
        _The unit to use for the width. Percents will act responsively with size of the screen, pixels will keep the column at a static width.
        Choices: px, %
      • Width [Number]
  • Order _[Group]
    _Change the order in which the columns appear.
    • Desktop, Tablet, Mobile [Responsive Number

Styles

• Overlay [Color]
  Adds an overlay over the section’s background.
• Two Tone Background _[Group]
  _Add a two-tone background to the section.
  • Left Color [Color]
  • Right Color [Color]
  • Percent Split _[Number]
    _The percentage at where you want the background to split the colors.
• Box Styles [Common Module Fields]

---

---

How to Use Section Settings

The Section Settings module gives you complete control over the visual layout and positioning of content sections within your HubSpot pages. This module is essential for creating sophisticated page layouts that go beyond standard column arrangements, making it particularly valuable for education institution homepages, event landing pages, and resource centers where content hierarchy matters.

You’ll find Section Settings most useful when building complex layouts that require custom spacing, overlapping elements, or unique background treatments. The overlap functionality is especially powerful for creating modern, layered designs where sections visually flow into each other—perfect for hero sections that extend into testimonial areas or feature blocks that break traditional grid boundaries.

When working with the Custom Columns repeater, pay careful attention to the Number Order field, as this determines which column your styling will target. Start by adding columns to your section in the page editor, then use Section Settings to fine-tune their responsive behavior. The responsive width controls allow you to create layouts that adapt intelligently across devices—for example, setting columns to stack on mobile while maintaining side-by-side arrangement on desktop.

Best practices for education sites: Use the Two Tone Background feature to create visual separation between academic program sections, and leverage overlapping sections to highlight key enrollment dates or campus events. The overlay option works particularly well for placing text over campus photography while maintaining readability.

For optimal results, test your section configurations across all device sizes using HubSpot’s preview functionality, as the responsive settings will significantly impact how your content displays on different screen sizes.