# Footer Section

**The footer section** is a comprehensive and flexible footer component for the theme, providing extensive customization options for layout, content blocks, background media, and styling. 

It supports multiple block types for creating complex footer layouts with newsletter signups, menus, social icons, payment methods, and various content elements.

The block is added by default to the Footer Group

<figure><img src="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2FUm4Ig1Q2WxRZbIYfu7qD%2Fimage.png?alt=media&#x26;token=658c8dd5-3880-41c5-a5dd-df952c43b70f" alt=""><figcaption></figcaption></figure>

#### Supported Block Types

| Block Type         | Description                             |
| ------------------ | --------------------------------------- |
| `_divider`         | Horizontal divider line                 |
| `_footer-group`    | Container for organizing footer content |
| `@app`             | App blocks integration                  |
| `button`           | Call-to-action buttons                  |
| `email-signup`     | Newsletter subscription form            |
| `follow-on-shop`   | Shopify Follow button                   |
| `footer-utilities` | Utility links and information           |
| `group`            | Generic content grouping                |
| `icon`             | Individual icon elements                |
| `image`            | Images and logos                        |
| `menu`             | Navigation menus                        |
| `payment-icons`    | Payment method icons                    |
| `text`             | Text content and headings               |
| `logo`             | Brand logos                             |
| `jumbo-text`       | Large typography elements               |

#### Section Settings

#### Layout Configuration

| Setting                        | Type     | Description                                               | Default      | Visibility Condition               |
| ------------------------------ | -------- | --------------------------------------------------------- | ------------ | ---------------------------------- |
| Content Direction              | select   | Layout direction (column, row)                            | "column"     | -                                  |
| Vertical On Mobile             | checkbox | Force vertical layout on mobile                           | true         | `content_direction` is "row"       |
| Horizontal Alignment           | select   | Horizontal alignment (left, center, right, space-between) | "flex-start" | `content_direction` is "row"       |
| Vertical Alignment             | select   | Vertical alignment (top, center, bottom)                  | "center"     | `content_direction` is "row"       |
| Align Baseline                 | checkbox | Align items to baseline                                   | false        | `vertical_alignment` is "flex-end" |
| Horizontal Alignment (Columns) | select   | Horizontal alignment for columns                          | "flex-start" | `content_direction` is not "row"   |
| Vertical Alignment (Columns)   | select   | Vertical alignment for columns                            | "center"     | `content_direction` is "column"    |
| Gap                            | range    | Space between elements (0-100px)                          | 12           | -                                  |

#### Size Configuration

| Setting           | Type   | Description                                                | Default      | Visibility Condition        |
| ----------------- | ------ | ---------------------------------------------------------- | ------------ | --------------------------- |
| Section Width     | select | Container width (page-width, full-width, custom)           | "page-width" | -                           |
| Page Width Custom | range  | Custom width (1000-2000px)                                 | 1570         | `section_width` is "custom" |
| Section Height    | select | Container height (auto, small, medium, large, full-screen) | "" (auto)    | -                           |

#### Animation Settings

| Setting        | Type   | Description                       | Default |
| -------------- | ------ | --------------------------------- | ------- |
| Animation Type | select | Animation effect (none, parallax) | "none"  |

#### Appearance Settings

| Setting                   | Type          | Description                          | Default    | Visibility Condition          |
| ------------------------- | ------------- | ------------------------------------ | ---------- | ----------------------------- |
| Color Scheme              | select        | Color scheme                         | "scheme-1" | -                             |
| Background Media          | select        | Background 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" |

#### Padding Settings

| Setting             | Type  | Description              | Default |
| ------------------- | ----- | ------------------------ | ------- |
| Padding Block Start | range | Top padding (0-100px)    | 0       |
| Padding Block End   | range | Bottom padding (0-100px) | 0       |

You can find more detailed information about each block in the article '[Footer Blocks](https://halosoft.gitbook.io/ella-7-documentation/footer-group/footer-blocks)'