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.
- Parallax Background
- Video Background
- Background Overlay
Parallax Background
Once a background image is assigned to a section, follow the following steps:
- Drag and drop the Background Settings module into any part of the section.
Note: One section can only support one Background Settings module. - Open the Background Settings module panel
- Choose Parallax Image in the Variant choice field.
- Save
Video Background
- Drag-and-drop Background Settings module into any part of the section.
Note: One section can only support one Background Settings module. - Open the Background Settings module panel.
- Select Video Background from the Variant choice field
- 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. - Save
Background Overlay
- Drag and drop the Background Settings module into any part of the section.
Note: One section can only support one Background Settings module. - Open the Background Settings module panel
- Enable the Background Overlay boolean field
- Once enabled, a Background Overlay fields group will be shown. You'll have the option to customize the overlay color, opacity, and saturation.
- Save