# Email signup

<figure><img src="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2FFZFO5bIw4CoOURfLMg8n%2Fimage.png?alt=media&#x26;token=20144682-7f46-4945-9f59-8b6d8d4a3260" alt=""><figcaption></figcaption></figure>

## There are 2 ways to add a Section to your store

### **1. Add a pre-made section from our demo?**

[Read the instructions here](https://halosoft.gitbook.io/ella-7-documentation/sections-and-blocks/get-section-on-demo)

### **2. Add the** Email signup **section** manuall&#x79;**?**

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Add section** and choose **"Email signup".**

<figure><img src="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2FPxY0TQjADaMpyha9vBod%2Fimage.png?alt=media&#x26;token=5b4b5e46-7009-462f-be8c-52891c24c110" alt=""><figcaption></figcaption></figure>

## Section Settings <a href="#section-settings" id="section-settings"></a>

### Layout setting <a href="#section-settings" id="section-settings"></a>

| Setting             | Meaning                                                                                                |
| ------------------- | ------------------------------------------------------------------------------------------------------ |
| Direction           | Set content layout direction for <mark style="color:$primary;">Desktop</mark>: vertical or horizontal. |
| Direction on mobile | Set content layout direction for <mark style="color:$primary;">Mobile:</mark> vertical or horizontal.  |
| Alignment           | Align content to the left, center, or right.                                                           |
| Position            | Set position of content                                                                                |
| Gap                 | Adjust the spacing between elements from <mark style="color:orange;">0 -> 100px</mark>                 |

### Size <a href="#section-settings" id="section-settings"></a>

| Setting | Meaning             |
| ------- | ------------------- |
| Width   | Width of email box  |
| Height  | Height of email box |

### Appearance <a href="#section-settings" id="section-settings"></a>

| Setting                                                                    | Meaning                                                            |
| -------------------------------------------------------------------------- | ------------------------------------------------------------------ |
| Color scheme                                                               | Choose the color style applied to this section.                    |
| Background media                                                           | Choose None/ Image/ Video                                          |
| Image ( If you choose option "Image" on Background media setting)          | Select image for Background media                                  |
| Video ( If you choose option "Video" on Background media setting)          | Select a video for Background media                                |
| Image position ( If you choose option "Image" on Background media setting) | Set how the image is displayed: cover or fit within the container. |
| Video position ( If you choose option "Video" on Background media setting) | Set how the video fits in the container: cover or contain.         |
| Borders                                                                    | Choose the border style for the element: none or solid.            |
| Corner radius                                                              | Adjust the roundness of element corners (0–100px).                 |
| Background overlay                                                         | Toggle to enable or disable the background overlay.                |

### Padding <a href="#section-settings" id="section-settings"></a>

| Setting | Meaning                                          |
| ------- | ------------------------------------------------ |
| Top     | Adjust the spacing at the top of the section.    |
| Bottom  | Adjust the spacing at the bottom of the section. |
| Left    | Adjust the spacing at the left of the section.   |
| Right   | Adjust the spacing at the right of the section.  |

## Block Settings

### \[BLOCK] Heading

| Settings               | Meaning                                                                                                                  |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| Text                   | Enter text to show                                                                                                       |
| Special text           | Toggle to enable or disable special text style.                                                                          |
| Highlight              | Toggle to enable or disable text highlight.                                                                              |
| Spacing text           | Toggle to enable or disable text spacing adjustment.                                                                     |
| Stroke                 | Add or adjust the outline (stroke) of the text.                                                                          |
| Width                  | Set the element width for <mark style="color:$primary;">Desktop</mark>: fit content, fill container, or use custom size. |
| Inherit text alignment | Toggle to inherit text alignment from the parent section.                                                                |
| Tablet width           | Set the element width for <mark style="color:$primary;">Tablet</mark>: fit content, fill container, or use custom size.  |
| Mobile width           | Set the element width for <mark style="color:$primary;">Mobile</mark>: fit content, fill container, or use custom size.  |
| Preset ( Typography)   | Select a predefined typography style for text.                                                                           |
| Background             | Toggle to enable or disable background for the title.                                                                    |
| Enable border          | Toggle to enable or disable the border.                                                                                  |
| Enable bottom border   | Toggle to Enable bottom border                                                                                           |
| Effects                | Choose an animation effect for the element.                                                                              |
| Top                    | Adjust the spacing above the heading.                                                                                    |
| Bottom                 | Adjust the spacing below the heading.                                                                                    |
| Left                   | Adjust the spacing to the left of the heading.                                                                           |
| Right                  | Adjust the spacing to the right of the heading.                                                                          |

### \[Block] Text

<table><thead><tr><th width="252">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Text</td><td>Enter text to showSpecial </td></tr><tr><td>Typing text</td><td>Toggle to enable or disable special text style.</td></tr><tr><td>Highlight</td><td>Toggle to enable or disable text highlight.</td></tr><tr><td>Spacing text</td><td>Toggle to enable or disable text spacing adjustment.</td></tr><tr><td>Stroke</td><td>Add or adjust the outline (stroke) of the text.</td></tr><tr><td>Width</td><td>Set the element width for <mark style="color:$primary;">Desktop</mark>: fit content, fill container, or use custom size.</td></tr><tr><td>Inherit text alignment</td><td>Toggle to inherit text alignment from the parent section.</td></tr><tr><td>Tablet width</td><td>Set the element width for <mark style="color:$primary;">Tablet</mark>: fit content, fill container, or use custom size.</td></tr><tr><td>Mobile width</td><td>Set the element width for <mark style="color:$primary;">Mobile</mark>: fit content, fill container, or use custom size.</td></tr><tr><td>Preset ( Typography)</td><td>Select a predefined typography style for text.</td></tr><tr><td>Background</td><td>Toggle to enable or disable background for the title.</td></tr><tr><td>Enable border</td><td>Toggle to enable or disable the border.</td></tr><tr><td>Enable bottom border</td><td>Toggle to Enable bottom border</td></tr><tr><td>Effects</td><td>Choose an animation effect for the element.</td></tr><tr><td>Top</td><td>Adjust the spacing above the heading.</td></tr><tr><td>Bottom</td><td>Adjust the spacing below the heading.</td></tr><tr><td>Left</td><td>Adjust the spacing to the left of the heading.</td></tr><tr><td>Right</td><td>Adjust the spacing to the right of the heading.</td></tr></tbody></table>

### \[Block] Email signup

<table><thead><tr><th width="252">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Show subscription form on promotion click</td><td>Toggle to show the subscription form when a visitor clicks a promotion</td></tr><tr><td>Width</td><td>Adjust the width of the element for Desktop: Fill or cusom</td></tr><tr><td>Tablet width</td><td>Adjust the width of the element for Tablet: Fill or cusom</td></tr><tr><td>Mobile width</td><td>Adjust the width of the element for Mobile: Fill or cusomt</td></tr><tr><td>Inherit color scheme</td><td><p></p><ul><li>When <strong>enabled</strong>, the element follows the color scheme </li><li> When <strong>disabled</strong>, you can apply a custom color scheme for this element.</li></ul></td></tr><tr><td>Background</td><td><p></p><p>When <strong>“Inherit color scheme”</strong> is <strong>disabled</strong>, you can choose a solid background color</p></td></tr><tr><td>Background gradient</td><td>When <strong>“Inherit color scheme”</strong> is <strong>disabled, you can a</strong>pply a gradient color background.</td></tr><tr><td>Headings</td><td>When <strong>“Inherit color scheme”</strong> is <strong>disabled,</strong> you can set a custom color for headings.</td></tr><tr><td>Text</td><td>When <strong>“Inherit color scheme”</strong> is <strong>disabled,</strong> you can set a custom color for regular text.</td></tr><tr><td>Links</td><td>When <strong>“Inherit color scheme”</strong> is <strong>disabled,</strong> you can define a color for links</td></tr><tr><td>Hover links</td><td>When <strong>“Inherit color scheme”</strong> is <strong>disabled,</strong> you can define how links or elements change color on hover.</td></tr><tr><td>Borders</td><td>When <strong>“Inherit color scheme”</strong> is <strong>disabled,</strong> you can customize the border color.</td></tr><tr><td>Shadow</td><td>When <strong>“Inherit color scheme”</strong> is <strong>disabled, you can choose the color for shadow</strong></td></tr><tr><td>Borders</td><td>Choose how the border is displayed for this element.</td></tr><tr><td>Label</td><td>Text displayed on the input field.</td></tr><tr><td>Border</td><td>Choose to show borders on all sides, underline only, or none.</td></tr><tr><td>Border thickness</td><td>Adjust the thickness of the border from <mark style="color:orange;">0 -> 4 px</mark></td></tr><tr><td>Corner radius</td><td>Adjust the roundness of the corners from <mark style="color:orange;">0 -> 100px</mark></td></tr><tr><td>Alignment</td><td>Set the horizontal alignment of the content.</td></tr><tr><td>Text preset</td><td>Choose a predefined text style for consistent typography.</td></tr><tr><td>Enable conditions</td><td>Enable or disable display conditions for this section.<br><br><em>"Agree to terms and conditions newsletter (GDPR compliant)"</em></td></tr><tr><td>Condition text</td><td>Entert text to show</td></tr><tr><td>Top</td><td>Padding top</td></tr><tr><td>Bottom</td><td>Padding bottom</td></tr><tr><td>Show description</td><td>Toggle to show or hide the description text.</td></tr><tr><td>Style</td><td>Select the visual style for the submit button.</td></tr><tr><td>Display</td><td>Choose to display text or icon</td></tr><tr><td>Label</td><td>Enter the text for label</td></tr><tr><td>Text preset</td><td>Select a predefined text style for the label.</td></tr><tr><td>Integrated button</td><td>Toggle to enable or disable the integrated button.</td></tr><tr><td>Gap</td><td>Adjust the space between elements when the integrated button is disabled.</td></tr><tr><td>Desktop width</td><td>Set the input width on desktop when the integrated button is disabled.</td></tr><tr><td>Mobile width</td><td>Set the input width on mobile when the integrated button is disabled.</td></tr><tr><td>Width</td><td>Define the input field’s width when the integrated button is disabled.</td></tr><tr><td>Top</td><td>Adjust the space above the element</td></tr><tr><td>Bottom</td><td>Adjust the space below the element</td></tr><tr><td>Left</td><td>Adjust the space on the left side of the element</td></tr><tr><td>Right</td><td>Adjust the space on the right side of the element</td></tr></tbody></table>

### \[BLOCK] Group <a href="#section-settings" id="section-settings"></a>

<table><thead><tr><th width="252">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Link</td><td>Enter the link of the group</td></tr><tr><td>Open link in new tab</td><td>Enable/disable open link in new tab</td></tr><tr><td>Direction</td><td>Choose how elements are arranged — vertically or horizontally.</td></tr><tr><td>Direction on mobile</td><td>Choose how elements are arranged for Mobile— vertically or horizontally.</td></tr><tr><td>Alignment</td><td>Set the horizontal alignment of elements — left, center, or right.</td></tr><tr><td>Position</td><td>Set position of content</td></tr><tr><td><p></p><p>Mobile alignment</p><p></p></td><td>Set the horizontal alignment of elements  for Mobile— left, center, or right.</td></tr><tr><td>Position mobile</td><td>Set position of content for Mobile</td></tr><tr><td>Gap</td><td>Adjust the spacing between elements.</td></tr><tr><td>Width</td><td>Set the element’s width for Desktop</td></tr><tr><td>Tablet width</td><td>Set the element’s width for Tablet</td></tr><tr><td>Mobile width</td><td>Set the element’s width for Mobile</td></tr><tr><td>Height</td><td>Set the height of the element.</td></tr><tr><td>Inherit color scheme</td><td>Toggle to inherit the parent section’s color scheme.</td></tr><tr><td>Background media</td><td>Choose an image or video to display as the section’s background.</td></tr><tr><td>Borders</td><td>Choose the border style for the element.</td></tr><tr><td>Corner radius</td><td>Adjust the roundness of the element’s corners.</td></tr><tr><td>Background overlay</td><td>Toggle to enable or disable the background overlay.</td></tr><tr><td>Enable parallax scroll</td><td>Toggle to enable or disable parallax scroll animation.</td></tr><tr><td>Shadow</td><td>Choose a color for the element’s shadow.</td></tr><tr><td>Horizontal offset</td><td>Adjust the horizontal position of the shadow</td></tr><tr><td>Vertical offset</td><td>Adjust the vertical position of the shadow</td></tr><tr><td>Blur</td><td>Adjust the blur intensity of shadow</td></tr><tr><td>Spread</td><td>Adjust the spread size of shadow </td></tr><tr><td>Top</td><td>Adjust the space above the element.</td></tr><tr><td>Top margin mobile</td><td>Adjust the space above the element for Mobile</td></tr><tr><td>Bottom</td><td>Adjust the space below the element.</td></tr><tr><td>Bottom margin mobile</td><td>Adjust the space below the element for Mobile</td></tr><tr><td></td><td>Adjust the space to the left of the element.</td></tr><tr><td>Left margin mobile</td><td>Adjust the left margin specifically for mobile devices.</td></tr><tr><td>Right</td><td>Adjust the space to the right of the element.</td></tr><tr><td>Top margin mobile</td><td>Adjust the space to the right of the element for mobile</td></tr><tr><td>Top</td><td>Adjust the space inside the element at the top.</td></tr><tr><td>Bottom</td><td>Adjust the space inside the element at the bottom.</td></tr><tr><td>Left</td><td>Adjust the space inside the element on the left.</td></tr><tr><td>Right</td><td>Adjust the space inside the element on the right.</td></tr></tbody></table>

### &#x20;Need More Help? <a href="#section-settings" id="section-settings"></a>

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.

<div align="left"><figure><img src="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2F6DSdaXqNMMBSOZPU97FQ%2FQR-halothemes-community.png?alt=media&#x26;token=613e73d0-0a18-4598-934c-e5048806f533" alt="Halothemes Community" width="233"><figcaption></figcaption></figure></div>

<a href="https://www.facebook.com/groups/halothemescommunity" class="button primary" data-icon="comment-dots">Join HaloThemes Community</a>