Skip to content
Blog
Section overview
The main blog section renders blog template content with configurable spacing, background media, border, color, and visibility controls. It is a template-level container designed to host blog layout blocks.
Common use cases
- Building the primary blog listing layout.
- Applying global spacing and color styles to blog pages.
- Adding optional image or video backgrounds behind blog content.
- Enabling consistent display behavior across desktop and mobile.
Usage tips
- Use the default gap and spacing values first, then adjust only where needed.
- Enable background media only when it improves readability of blog cards and text.
- Use header overlap carefully and verify contrast with your header style.
- Keep visibility set to all devices unless you have a layout-specific reason.
Section settings
| Setting | Description |
|---|---|
| Enable background image or video | Turns on background media rendering for the section. |
| Image background desktop | Background image used on desktop. |
| Image background mobile | Optional background image override for mobile. |
| Video background | Optional background video source. |
| Show video on mobile | Enables background video playback on mobile devices. |
| Show entire image | Displays full image rather than cropping to fill. |
| Top spacing | Adds top padding to the section container. |
| Bottom spacing | Adds bottom padding to the section container. |
| Minimum height | Sets a minimum section height. |
| Gap size | Controls spacing between child layout elements. |
| Color scheme | Sets section background and text color treatment. |
| Color border | Sets section border color style. |
| Border position | Controls where borders appear. |
| Vertical alignment | Aligns content vertically within the section. |
| Enable margin | Applies global horizontal margin settings. |
| Enable header overlap | Allows section to overlap the header when enabled globally. |
| Scroll snap align | Applies scroll snap alignment when enabled globally. |
| Visibility | Controls device visibility (all, mobile, or desktop). |
Block settings
This section is limited to one private layout block:
_layout__blog(limit: 1)