> 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/testimonial-section.md).

# Testimonial Section

The Testimonial section is a flexible layout designed to highlight customer feedback and brand credibility. It can easily combine with multiple blocks, allowing you to showcase quotes, ratings, or client stories in various formats.

<figure><img src="/files/08ts9hGoX9cGEl4a3eFy" 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](/ella-7-documentation/sections-and-blocks/get-section-on-demo.md)

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

* 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 ->** choose **Testimonial.**

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

This section is built based on the **Custom Section** and reusable blocks such as **Group, Heading, Text, Icon, Image**, etc. Below are the basic settings that allow you to customize the layout of this section.

If you have difficulty creating your own Testimonial section, please refer to the pre-built sections available **here**.

### Testimonial - Settings Guide

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

Here, you can adjust parameters related to Layout, Rich Media, and Customization Options.&#x20;

These settings are inherited from the Custom Section, and you can find more detailed information about the settings.

<details>

<summary>Testimonial  Section - Settings Guide</summary>

#### 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)  |

</details>

The content inside is set up based on the **Testimonial block**. You can find more information [\[here\]](/ella-7-documentation/sections-and-blocks/testimonial-section/testimonial-block.md).

## 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.

<div align="left"><figure><img src="/files/u3Ke6fbPZZvBlBetfneg" 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>


---

# 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:

```
GET https://halosoft.gitbook.io/ella-7-documentation/sections-and-blocks/testimonial-section.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.
