> 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/footer-group/footer-blocks/footer-group-block.md).

# Footer Group Block

This is a flexible container component designed for organizing footer content within theme. It provides comprehensive layout controls, responsive design options, background media support, and advanced styling capabilities. 

This block serves as a wrapper that can contain multiple footer columns and other content blocks.

**How to add the Footer Group block?**

* From your Shopify admin, go to **Online Store ->** **Themes**.
* Find the theme that you want to edit, and then click **Customize**.
* In the **Footer Group -> Footer ->** **Add block ->** choose **Footer Group.**

<figure><img src="/files/SoKBuaYVtABG2gAdLYJ2" alt=""><figcaption></figcaption></figure>

### Supported Child Blocks

| Block Type       | Description                         |
| ---------------- | ----------------------------------- |
| `@theme`         | Any theme block                     |
| `@app`           | Third-party app blocks              |
| `_divider`       | Horizontal divider elements         |
| `_footer-column` | Structured footer column containers |

### Footer Group Block - Settings Guide

This guide explains all available settings for the **Footer Group Block** in order from top to bottom as they appear in the **Theme Editor**.

#### Link Settings

| Setting         | Type     | Description                         | Default |
| --------------- | -------- | ----------------------------------- | ------- |
| Link            | url      | Optional link for the entire column | -       |
| Open In New Tab | checkbox | Open link in new tab/window         | false   |

#### Layout Configuration

**Content Direction**

| Setting                    | Type   | Description                            | Default  | Visibility Condition |
| -------------------------- | ------ | -------------------------------------- | -------- | -------------------- |
| `content_direction`        | select | Primary layout direction (column, row) | "column" | -                    |
| `content_direction_tablet` | select | Tablet layout direction                | "column" | -                    |
| `content_direction_mobile` | select | Mobile layout direction                | "column" | -                    |

**Horizontal Alignment**

<table><thead><tr><th width="260">Setting</th><th>Type</th><th>Description</th><th>Default</th><th>Visibility Condition</th></tr></thead><tbody><tr><td><code>horizontal_alignment</code></td><td>select</td><td>Horizontal alignment (left, center, right, space-between)</td><td>"flex-start"</td><td><code>content_direction</code> is "row"</td></tr><tr><td><code>horizontal_alignment_flex_direction_column</code></td><td>select</td><td>Column horizontal alignment</td><td>"flex-start"</td><td><code>content_direction</code> is not "row"</td></tr><tr><td><code>horizontal_alignment_tablet</code></td><td>select</td><td>Tablet horizontal alignment</td><td>"flex-start"</td><td><code>content_direction_tablet</code> is "row"</td></tr><tr><td><code>horizontal_alignment_flex_direction_column_tablet</code></td><td>select</td><td>Tablet column alignment</td><td>"flex-start"</td><td><code>content_direction_tablet</code> is not "row"</td></tr><tr><td><code>horizontal_alignment_mobile</code></td><td>select</td><td>Mobile horizontal alignment</td><td>"flex-start"</td><td><code>content_direction_mobile</code> is "row"</td></tr><tr><td><code>horizontal_alignment_flex_direction_column_mobile</code></td><td>select</td><td>Mobile column alignment</td><td>"flex-start"</td><td><code>content_direction_mobile</code> is not "row"</td></tr></tbody></table>

**Vertical Alignment**

| Setting                                           | Type   | Description                                       | Default  | Visibility Condition                   |
| ------------------------------------------------- | ------ | ------------------------------------------------- | -------- | -------------------------------------- |
| `vertical_alignment`                              | select | Vertical alignment (stretch, top, center, bottom) | "center" | `content_direction` is "row"           |
| `vertical_alignment_flex_direction_column`        | select | Column vertical alignment with space-between      | "center" | `content_direction` is "column"        |
| `vertical_alignment_tablet`                       | select | Tablet vertical alignment                         | "center" | `content_direction_tablet` is "row"    |
| `vertical_alignment_flex_direction_column_tablet` | select | Tablet column vertical alignment                  | "center" | `content_direction_tablet` is "column" |
| `vertical_alignment_mobile`                       | select | Mobile vertical alignment                         | "center" | `content_direction_mobile` is "row"    |
| `vertical_alignment_flex_direction_column_mobile` | select | Mobile column vertical alignment                  | "center" | `content_direction_mobile` is "column" |

**Additional Layout Controls**

| Setting          | Type     | Description                       | Default | Visibility Condition               |
| ---------------- | -------- | --------------------------------- | ------- | ---------------------------------- |
| `wrap`           | select   | Flex wrap behavior (nowrap, wrap) | "wrap"  | -                                  |
| `align_baseline` | checkbox | Align items to baseline           | false   | `vertical_alignment` is "flex-end" |
| `gap`            | range    | Space between elements (0-100px)  | 12      | -                                  |

#### Size Configuration

| Setting               | Type   | Description                              | Default | Visibility Condition       |
| --------------------- | ------ | ---------------------------------------- | ------- | -------------------------- |
| `width`               | select | Block width (fit-content, fill, custom)  | "fill"  | -                          |
| `custom_width`        | range  | Custom width percentage (0-100%)         | 100     | `width` is "custom"        |
| `width_mobile`        | select | Mobile width (fit-content, fill, custom) | "fill"  | -                          |
| `custom_width_mobile` | range  | Custom mobile width (0-100%)             | 100     | `width_mobile` is "custom" |
| `height`              | select | Block height (auto, fit, fill, custom)   | "fit"   | -                          |
| `custom_height`       | range  | Custom height percentage (0-100%)        | 100     | `height` is "custom"       |

#### Appearance Settings

**Color Scheme**

| Setting                      | Type              | Description             | Default | Visibility Condition            |
| ---------------------------- | ----------------- | ----------------------- | ------- | ------------------------------- |
| `inherit_color_scheme`       | checkbox          | Use parent color scheme | true    | -                               |
| `scheme_background`          | color             | Custom background color | #FFFFFF | `inherit_color_scheme` is false |
| `scheme_background_gradient` | color\_background | Background gradient     | -       | `inherit_color_scheme` is false |
| `scheme_foreground_heading`  | color             | Heading text color      | #000000 | `inherit_color_scheme` is false |
| `scheme_foreground`          | color             | Body text color         | #000000 | `inherit_color_scheme` is false |
| `scheme_primary`             | color             | Primary accent color    | #000F9F | `inherit_color_scheme` is false |
| `scheme_primary_hover`       | color             | Primary hover color     | #000000 | `inherit_color_scheme` is false |
| `scheme_border`              | color             | Border color            | #E6E6E6 | `inherit_color_scheme` is false |
| `scheme_shadow`              | color             | Shadow color            | #000000 | `inherit_color_scheme` is false |

**Background Media**

| Setting                     | Type          | Description                                             | Default | Visibility Condition             |
| --------------------------- | ------------- | ------------------------------------------------------- | ------- | -------------------------------- |
| `background_media`          | select        | Media type (none, image, video)                         | "none"  | -                                |
| `video`                     | video         | Background video file                                   | -       | `background_media` is "video"    |
| `video_position`            | select        | Video positioning (cover, contain)                      | "cover" | `background_media` is "video"    |
| `background_image`          | image\_picker | Background image                                        | -       | `background_media` is "image"    |
| `background_image_position` | select        | Image positioning (cover, fit)                          | "cover" | `background_media` is "image"    |
| `content_overlay`           | checkbox      | Enable content overlay                                  | false   | Media is enabled                 |
| `image_ratio`               | select        | Image aspect ratio (adapt, portrait, square, landscape) | "adapt" | Media enabled and overlay active |

**Borders and Styling**

| Setting         | Type   | Description                | Default | Visibility Condition   |
| --------------- | ------ | -------------------------- | ------- | ---------------------- |
| `border`        | select | Border style (none, solid) | "none"  | -                      |
| `border_width`  | range  | Border thickness (0-10px)  | 1       | `border` is not "none" |
| `border_radius` | range  | Corner radius (0-100px)    | 0       | -                      |

**Overlay Effects**

| Setting                | Type     | Description                            | Default   | Visibility Condition     |
| ---------------------- | -------- | -------------------------------------- | --------- | ------------------------ |
| `toggle_overlay`       | checkbox | Enable background overlay              | false     | -                        |
| `overlay_color`        | color    | Overlay color with alpha               | #00000026 | `toggle_overlay` is true |
| `extend_left_overlay`  | checkbox | Extend overlay to left edge            | false     | `toggle_overlay` is true |
| `extend_right_overlay` | checkbox | Extend overlay to right edge           | false     | `toggle_overlay` is true |
| `overlay_style`        | select   | Overlay type (solid, gradient)         | "solid"   | `toggle_overlay` is true |
| `gradient_direction`   | select   | Gradient direction (to top, to bottom) | "to top"  | Overlay is gradient      |

#### Animation Settings

| Setting                   | Type     | Description                     | Default | Visibility Condition      |
| ------------------------- | -------- | ------------------------------- | ------- | ------------------------- |
| `enable_parallax`         | checkbox | Enable parallax scrolling       | false   | -                         |
| `disable_parallax_mobile` | checkbox | Disable parallax on mobile      | false   | `enable_parallax` is true |
| `parallax_speed`          | range    | Parallax speed (0-4)            | 0.5     | `enable_parallax` is true |
| `horizontal_position`     | range    | Horizontal offset (-50% to 50%) | 0       | `enable_parallax` is true |
| `vertical_position`       | range    | Vertical offset (-50% to 50%)   | 0       | `enable_parallax` is true |

#### Shadow Settings

| Setting                    | Type  | Description                              | Default   |
| -------------------------- | ----- | ---------------------------------------- | --------- |
| `shadow_color`             | color | Shadow color with alpha                  | #00000000 |
| `shadow_horizontal_offset` | range | Horizontal shadow offset (-12px to 12px) | 0         |
| `shadow_vertical_offset`   | range | Vertical shadow offset (-12px to 12px)   | 0         |
| `shadow_blur`              | range | Shadow blur radius (0-20px)              | 0         |
| `spread_radius`            | range | Shadow spread (0-100px)                  | 0         |

#### Spacing Settings

**Margin Controls**

| Setting                      | Type  | Description                    | Default |
| ---------------------------- | ----- | ------------------------------ | ------- |
| `margin-block-start`         | range | Top margin (0-100px)           | 0       |
| `margin-block-start-mobile`  | range | Mobile top margin (0-100px)    | 0       |
| `margin-block-end`           | range | Bottom margin (0-100px)        | 0       |
| `margin-block-end-mobile`    | range | Mobile bottom margin (0-100px) | 0       |
| `margin-inline-start`        | range | Left margin (0-100px)          | 0       |
| `margin-inline-start-mobile` | range | Mobile left margin (0-100px)   | 0       |
| `margin-inline-end`          | range | Right margin (0-100px)         | 0       |
| `margin-inline-end-mobile`   | range | Mobile right margin (0-100px)  | 0       |

**Padding Controls**

| Setting                | Type  | Description              | Default |
| ---------------------- | ----- | ------------------------ | ------- |
| `padding-block-start`  | range | Top padding (0-100px)    | 0       |
| `padding-block-end`    | range | Bottom padding (0-100px) | 0       |
| `padding-inline-start` | range | Left padding (0-100px)   | 0       |
| `padding-inline-end`   | range | Right padding (0-100px)  | 0       |