> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/global-sections/layout/custom-section.md). # Custom section A flexible section that holds any combination of blocks, arranged in a row or a column. Use it to build custom layouts from the theme's blocks, or start from one of the ready-made presets. ![Custom Section overview](/files/fadX2c3YVNu9nKwo03uK) *** ## Settings ### Layout | Setting | Description | | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Width | **Page** — Keeps the content within the page width set in your theme settings. **Full** — Stretches the content across the full browser width, with a small space at the edges. **Full (no padding)** — Stretches the content across the full browser width, with no space at the edges. | | Height | Sets the height of the section. | | Custom height | Section height as a percentage of the viewport. Available when Height is Custom. | | Enable boxed layout | Wrap the content in a contained box with its own color scheme. Not available with Full (no padding) width. | | Direction | **Horizontal** — Blocks sit side by side in a row. **Vertical** — Blocks stack in a column. | | Alignment | Placement of the blocks along the row or column. Options depend on the Direction. | | Position | Placement of the blocks across the other axis. For vertical stacks, shown only when Height is not Auto. | | Vertical on mobile | Collapse horizontal rows into a vertical stack on mobile. Available when Direction is Horizontal. | | Alignment (mobile) | Horizontal placement of the blocks on mobile. Available when Direction is Horizontal and Vertical on mobile is on. | | Enable sticky content | Keep the content pinned in view as the page scrolls. Available when Direction is Horizontal. | ### Gap | Setting | Description | | ------- | ---------------------------------- | | Desktop | Spacing between blocks on desktop. | | Mobile | Spacing between blocks on mobile. | ### Background | Setting | Description | | ---------------- | ----------------------------------------------------------------------------------------- | | Background media | Sets what appears behind the section — an image, a video, or none. | | Image | Section background image. Available when Background media is Image. | | Image — Mobile | Separate background image for mobile. Available when Background media is Image. | | Video | Background video. Autoplays muted. Available when Background media is Video. | | Show overlay | Add a color layer over the background for legibility. Available when a background is set. | | Overlay color | Color and opacity of the overlay. Available when Show overlay is on. | | Parallax effect | Adds motion to the background as the page scrolls. Available when a background is set. | ### Appearance | Setting | Description | | ------------------ | ----------------------------------------------------------------------------------- | | Color scheme | Color scheme for the section. | | Boxed color scheme | Color scheme for the boxed content panel. Available when Enable boxed layout is on. | ### Boxed padding Available when Enable boxed layout is on. Controls the inner spacing of the box. | Setting | Description | | ----------------------- | --------------------------------------------------- | | Top and bottom | Inner vertical spacing inside the box on desktop. | | Left and right | Inner horizontal spacing inside the box on desktop. | | Top and bottom — Mobile | Inner vertical spacing inside the box on mobile. | | Left and right — Mobile | Inner horizontal spacing inside the box on mobile. | ### Section padding | Setting | Description | | ----------------------- | ------------------------------------------------------------------ | | Unit | Measure the padding in pixels, or as a share of the screen height. | | Padding top / bottom | Spacing above and below the section. | | Custom padding — Mobile | Set independent top and bottom padding on mobile. | {% hint style="info" %} The two units behave differently as the window changes. Pixel padding eases down a little on mid-size screens so a tall section does not swamp a laptop. Padding measured against screen height is kept exactly as set at every width, which is what you want for a section built to fill the viewport. {% endhint %} *** ## Available Blocks | Block | Description | | ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- | | [Theme blocks](/helix/theme-blocks/blocks.md) | All global theme blocks, such as Heading, Text, Button, Image, Icon, Divider, and Spacer. | | [Carousel](/helix/theme-blocks/layout/carousel.md) | A carousel of slides, each with its own media and content. | | [Columns](/helix/theme-blocks/layout/columns.md) | A responsive grid of equal columns, each with its own content. | | [Masonry](/helix/theme-blocks/layout/masonry.md) | An asymmetric masonry grid for varied-height tiles. | | [Marquee](/helix/theme-blocks/layout/marquee.md) | A continuously scrolling strip of text. | | [Section Header](/helix/theme-blocks/basic/header.md) | A header with a subheading, heading, and supporting elements. | | [Colors](/helix/theme-blocks/basic/colors.md) | A swatch selector for showing color variants. | | [Product Card](/helix/theme-blocks/cards/product-card-compact.md) | A compact product card. | | [Image comparison](/helix/theme-blocks/basic/image-comparison.md) | A before-and-after slider with a draggable handle. | | [Comparison table](/helix/theme-blocks/layout/comparison-table.md) | A side-by-side table of products or plans. A Feature block holds the row labels and each Column holds one option's values. | *** ## Ready-made presets When you add a Custom Section, start from a blank canvas or pick a ready-made preset. Each preset adds a pre-arranged set of blocks you can edit, reorder, or restyle. Presets are grouped by the category they appear under in the theme editor. ### Layout | Preset | What it adds | | ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | | Image marquee (custom) | A heading above a full-width strip of images and words that scrolls on as the page moves. | | Image: Scroll overlay (custom) | A product grid in a boxed panel that scrolls over a background image held in place behind it. | | Testimonials: Sticky product (custom) | A carousel of two reviews at a time, each pairing a tall image with a product card pinned over it, a star rating, the quote, and the reviewer's name. | ### Text | Preset | What it adds | | ----------------------- | ----------------------------------------------------------------------------------------------------- | | Text marquee (custom) | A scrolling band of repeating phrases. | | Rich text (custom) | A centered heading, paragraph, and button. | | Icon with text (custom) | A row of icon-and-text columns. | | FAQ (custom) | A heading with an expandable question-and-answer accordion. | | FAQ: Split (custom) | The heading, supporting text, and button on one side, the question-and-answer accordion on the other. | ### Trust & social proof | Preset | What it adds | | --------------------------------- | --------------------------------------------------------------------------------------------------------- | | Logo list (custom) | A heading with a scrolling strip of logos. | | Testimonials: Masonry (custom) | A masonry grid of customer reviews with ratings, images, and video. | | Testimonials: Carousel (custom) | Customer reviews with ratings and linked products in a carousel. | | Testimonials: Horizontal (custom) | Wide review cards in a carousel, each pairing a customer photo with a rating and the product they bought. | ### Media | Preset | What it adds | | -------------------------------- | ------------------------------------------------------------------------------------------- | | Image comparison (custom) | A before-and-after slider with a draggable handle. | | Image comparison: Split (custom) | A before-and-after slider beside a heading, supporting text, and a short set of statements. | | Video (custom) | A single video with a play button. | ### Forms | Preset | What it adds | | --------------------- | --------------------------------------------- | | Email signup (custom) | A heading, text, and newsletter signup field. | | Contact form (custom) | A contact form with custom fields. | ### Products | Preset | What it adds | | ------------------------- | ------------------------------------------------------------------------ | | Featured product (custom) | A product spotlight with imagery, details, color variants, and a button. | ### Shoppable content | Preset | What it adds | | ---------------------------- | -------------------------------------------------------------------------------- | | Product finder quiz (custom) | A multi-step quiz that guides shoppers to a product, with an optional countdown. | ### Storytelling | Preset | What it adds | | ------------------------------------ | --------------------------------------------------------------------------------- | | Team members (custom) | A carousel of team profiles with photos and social links. | | Store locations (custom) | Location cards that open a pop-up with address details, imagery, and directions. | | Store locations: Horizontal (custom) | A side-by-side layout of store locations with addresses and buttons. | | Image with text (custom) | An image beside a heading, subheading, and paragraph. | | How to use (custom) | Numbered steps, each with its own image and instructions. | | Content popups (custom) | A carousel of image cards, each opening a pop-up with the full story behind it. | | Comparison table (custom) | A side-by-side table comparing your product against the alternatives, row by row. | ### Banners | Preset | What it adds | | -------------------- | ---------------------------------------------------------------------- | | Image cards (custom) | Side-by-side image cards, each with its own heading, text, and button. |