> 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/custom-section.md).
# Custom Section
**The Custom Section** is a universal flexible section that allows you to create fully customized layouts. It supports all block types, giving you complete freedom to design unique page structures that fit any content need.
As the core component of the theme’s section rendering system, it ensures smooth integration and consistency across the entire site. This section is ideal for advanced users who want maximum control over layout and composition.
Some of the layouts you can create include Lookbook, Banner with text, Accordion, Email Signup, etc.
## There are 2 ways to add a Section to your store
### **1. Add a pre-made section from our demo?**
[Read the instructions here](/ella-7-documentation/sections-and-blocks/get-section-on-demo.md)
### **2. Add the Custom Section section** manually**?**
* From your Shopify admin, go to **Online Store ->** **Themes**.
* Find the theme that you want to edit, and then click **Customize**.
* In the **Templates ->** **Add section ->** find and choose **Custom Section.**
## Custom Section - Settings Guide
This guide explains all available settings for the **Custom Section** in order from top to bottom as they appear in the Theme Editor.
The settings listed here will help you adjust:
* **Advanced Layout**
* Flexbox-based layout system
* Separate mobile and desktop direction controls
* Multiple alignment options for different scenarios
* Responsive gap controls
* **Rich Media**
* Background images with positioning controls
* Background videos with cover/contain options
* Overlay system with gradient support
* **Customization Options**
* Full padding control
* Border styling with radius support
* Color scheme inheritance
* Custom dimensions (width/height)
Custom Section - Settings Guide
#### Layout & Direction Settings
| Setting | Type | Default | Options | Description |
| ----------------------------- | ------ | ------------ | ----------------------------------------------------------------------- | --------------------------------------------- |
| Content Direction | select | "column" | column, row, column-reverse, row-reverse | Main content flow direction |
| Content Direction (Mobile) | select | "column" | column, row, column-reverse, row-reverse | Mobile content flow direction |
| Horizontal Alignment | select | "flex-start" | flex-start, center, flex-end, space-between, space-around, space-evenly | Horizontal alignment of content |
| Vertical Alignment | select | "center" | flex-start, center, flex-end, stretch | Vertical alignment of content |
| Horizontal Alignment (Column) | select | "flex-start" | flex-start, center, flex-end | Horizontal alignment when direction is column |
| Vertical Alignment (Column) | select | "center" | flex-start, center, flex-end, stretch | Vertical alignment when direction is column |
| Gap | range | 32 | 0-100px (step: 1) | Gap between child elements |
#### Section Dimensions Settings
| Setting | Type | Default | Options | Visibility | Description |
| --------------------- | ------ | ------------ | ------------------------------------------------------------- | -------------------------- | -------------------------------- |
| Section Width | select | "page-width" | page-width, full-width, custom | - | Section container width |
| Page Width Custom | range | 1570 | 1000-2000px (step: 10) | Section Width is "custom" | Custom page width |
| Section Height | select | "" | auto, adapt\_image, small, medium, large, full-screen, custom | - | Section height behavior |
| Section Height Custom | range | 50 | 0-100% (step: 1) | Section Height is "custom" | Custom section height percentage |
#### Appearance Settings
| Setting | Type | Default | Options | Visibility | Description |
| ------------------------- | ------------- | ---------- | ------------------ | --------------------------- | --------------------- |
| Color Scheme | color\_scheme | "scheme-1" | - | - | Section color scheme |
| Background Media | select | "none" | none, image, video | - | Background media type |
| Video | video | - | - | Background Media is "video" | Background video file |
| Video Position | select | "cover" | cover, contain | Background Media is "video" | Video positioning |
| Background Image | image\_picker | - | - | Background Media is "image" | Background image |
| Background Image Position | select | "cover" | cover, fit | Background Media is "image" | Image positioning |
#### Border & Effects Settings
| Setting | Type | Default | Options | Visibility | Description |
| ------------------ | -------- | ----------- | ------------------ | ------------------------------------------------------ | ------------------------- |
| Border | select | "none" | none, solid | - | Border style |
| Border Width | range | 1 | 0-10px (step: 0.5) | Border is not "none" | Border width |
| Border Radius | range | 0 | 0-100px (step: 1) | - | Border radius |
| Toggle Overlay | checkbox | false | - | - | Enable background overlay |
| Overlay Color | color | "#00000026" | - | Toggle Overlay is true | Overlay color with alpha |
| Overlay Style | select | "solid" | solid, gradient | Toggle Overlay is true | Overlay style type |
| Gradient Direction | select | "to top" | to top, to bottom | Toggle Overlay is true and Overlay Style is "gradient" | Gradient direction |
#### Animation Settings
| Setting | Type | Default | Options | Visibility | Description |
| -------------- | ------ | ------- | -------------------------------- | --------------------------- | ------------------------ |
| Image Behavior | select | "none" | none, ambient, zoom-in, parallax | Background Media is "image" | Image animation behavior |
**Animation Options:**
* `none` - No animation
* `ambient` - Ambient movement effect
* `zoom-in` - Zoom in on scroll
* `parallax` - Parallax scroll effect
#### Padding Settings
| Setting | Type | Default | Description |
| -------------------- | ----- | ------- | ------------------------ |
| Padding Block Start | range | 36 | Top padding (0-100px) |
| Padding Block End | range | 36 | Bottom padding (0-100px) |
| Padding Inline Start | range | 0 | Left padding (0-100px) |
| Padding Inline End | range | 0 | Right padding (0-100px) |
## Useful Blocks
This section supports most blocks. Below are some useful blocks commonly used in combination with this section that you should know about:
* Group Block
* Image
* Image With Content
* Multicolumn
* Collapsible Text****
## 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.
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/custom-section.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.