March Documentation

Module: Background Settings

HubSpot's built-in Section Styles enable us to assign custom background, image color, and gradient to any section on the page. Using Hatch theme's Background Settings module, we can extend the built-in features further. 

  1. Parallax Background
  2. Video Background
  3. Background Overlay

Parallax Background

Once a background image is assigned to a section, follow the following steps:

  1. Drag and drop the Background Settings module into any part of the section. 
    Note: One section can only support one Background Settings module.
  2. Open the Background Settings module panel
  3. Choose Parallax Image in the Variant choice field.
    bg-parallax
  4. Save

 

Video Background

  1. Drag-and-drop Background Settings module into any part of the section. 
    Note: One section can only support one Background Settings module.
  2. Open the Background Settings module panel.
  3. Select Video Background from the Variant choice field
  4. Once the Video Background option is selected, a Video Background fields group will be shown:

    You'll need to upload three video formats to support all browsers: MP4, WEBM, and OGV.
  5. Save

Background Overlay

  1. Drag and drop the Background Settings module into any part of the section. 
    Note: One section can only support one Background Settings module.
  2. Open the Background Settings module panel
  3. Enable the Background Overlay boolean field
  4. Once enabled, a Background Overlay fields group will be shown. You'll have the option to customize the overlay color, opacity, and saturation. 
  5. Save