> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/ella-7-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/ella-7-documentation/sections-and-blocks/multicolumn-section/multicolumn-block.md). # Multicolumn Block It is a flexible layout that allows you to create multi-column layouts with two main modes: Grid layout and Carousel layout. This block supports responsive design with auto-calculated tablet columns and can switch to carousel mode on mobile devices.
### Multicolumn Block - Settings Guide This guide explains all available settings for the **Multicolumn** block in order from top to bottom as they appear in the Theme Editor. Here, you can adjust settings such as Layout Types, Spacing Configuration, Carousel Configuration, etc.
Multicolumn Block - Settings Guide #### Layout Settings | Setting | Type | Description | Visibility | | --------------------------- | -------- | ----------------------------------------- | ------------------------------------------------------- | | Layout Type | select | Primary layout mode | - | | Carousel On Mobile | checkbox | Enable carousel on mobile for grid layout | Layout Type is "grid" | | Columns (Grid) | range | Desktop columns for grid layout | Layout Type is "grid" | | Columns (Carousel) | range | Desktop columns for carousel layout | Layout Type is "carousel" | | Mobile Columns (Grid) | select | Mobile columns for grid | Layout Type is "grid" and Carousel On Mobile is false | | Mobile Columns (Carousel) | select | Mobile columns for carousel | Layout Type is "carousel" or Carousel On Mobile is true | | Vertical Alignment (Column) | select | Vertical alignment for column content | - | #### Spacing Settings | Setting | Type | Description | Visibility | | ------------ | ----- | --------------------------------- | ------------------------- | | Vertical Gap | range | Vertical gap between grid items | Layout Type is "grid" | | Column Gap | range | Horizontal gap between grid items | Layout Type is "grid" | | Gap | range | Gap between carousel slides | Layout Type is "carousel" | #### Carousel Settings | Setting | Type | Description | Visibility | | ------------------- | -------- | ---------------------------- | --------------------------------------------------------------------- | | Loop | checkbox | Enable infinite loop | Layout Type is "carousel" | | Navigation | select | Navigation type | Layout Type is "carousel" | | Pagination Type | select | Pagination style | Navigation includes "pagination" | | Dots Top Offset | range | Dots position offset | Pagination Type is "bullets" and Navigation includes "pagination" | | Progress Top Offset | range | Progress bar position offset | Pagination Type is "progressbar" and Navigation includes "pagination" | #### Size Settings | Setting | Type | Description | Visibility | | --------------------- | ------ | ------------------------------ | -------------------------- | | Width | select | Desktop width behavior | - | | Custom Width | range | Custom width percentage | Width is "custom" | | Width (Mobile) | select | Mobile width behavior | - | | Custom Width (Mobile) | range | Custom mobile width percentage | Width (Mobile) is "custom" | | Height | select | Height behavior | - | | Custom Height | range | Custom height percentage | Height is "custom" | #### Border Settings | Setting | Type | Description | Visibility | | ---------------------- | -------- | --------------------------------- | -------------------- | | Border | select | Border style | - | | Border Separator Lines | checkbox | Add separator lines between items | - | | Border Width | range | Border thickness | Border is not "none" | | Border Opacity | range | Border opacity | Border is not "none" | | Border Radius | range | Border radius | - | #### Color Scheme Settings | Setting | Type | Description | Visibility | | --------------------------- | ----------------- | ----------------------- | ----------------------------- | | Inherit Color Scheme | checkbox | Use parent color scheme | - | | Scheme Background | color | Custom background color | Inherit Color Scheme is false | | Scheme Background Gradient | color\_background | Background gradient | Inherit Color Scheme is false | | Scheme Foreground (Heading) | color | Heading text color | Inherit Color Scheme is false | | Scheme Foreground | color | Body text color | Inherit Color Scheme is false | | Scheme Primary | color | Primary color | Inherit Color Scheme is false | | Scheme Primary (Hover) | color | Primary hover color | Inherit Color Scheme is false | | Scheme Border | color | Border color | Inherit Color Scheme is false | | Scheme Shadow | color | Shadow color | Inherit Color Scheme is false | #### Background Media Settings | Setting | Type | Description | Visibility | | ------------------------- | ------------- | ------------------------- | ------------------------------------------------------ | | Background Media | select | Background media type | - | | Video | video | Background video file | Background Media is "video" | | Video Position | select | Video positioning | Background Media is "video" | | Background Image | image\_picker | Background image | Background Media is "image" | | Background Image Position | select | Image positioning | Background Media is "image" | | Toggle Overlay | checkbox | Enable background overlay | - | | Overlay Color | color | Overlay color with alpha | Toggle Overlay is true | | Overlay Style | select | Overlay style type | Toggle Overlay is true | | Gradient Direction | select | Gradient direction | Toggle Overlay is true and Overlay Style is "gradient" | #### Padding Settings | Setting | Type | Description | Visibility | | -------------------- | ----- | ------------------------ | ---------- | | Padding Block Start | range | Top padding (0-100px) | - | | Padding Block End | range | Bottom padding (0-100px) | - | | Padding Inline Start | range | Left padding (0-100px) | - | | Padding Inline End | range | Right padding (0-100px) | - |
### Child Blocks Supported * `@theme` - All theme blocks * `@app` - All app blocks * `group` - Group blocks for content organization * `_divider` - Custom divider blocks ## Need More Help? If you experience any difficulties or require extra support with your Ella theme, feel free to contact our support team through our [Ticket System](https://halosoft.ticksy.com/) — we’ll get back to you within 24 hours. Simply scan the QR code below to join our Facebook community and stay updated with the latest news, tips, and announcements.
Halothemes Community
Join HaloThemes Community --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://halosoft.gitbook.io/ella-7-documentation/sections-and-blocks/multicolumn-section/multicolumn-block.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.