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

# Testimonial Block

The Testimonial block is designed to create a layout that highlights customer feedback and enhances brand credibility.\
Within this block, you’ll need to add "Testimonial item" blocks—each "Testimonial item" represents an individual piece of customer feedback.

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

### Testimonial Block - Settings Guide

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

Here, you can adjust settings such as Layout Types, Layout Configuration, Carousel Configuration, etc.

{% hint style="info" %}
Note that in this block, you can only add "Testimonial item" blocks.
{% endhint %}

<details>

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

### Layout Settings

| Setting                 | Type     | Default | Description                                                                                                                                                                                                                                              | Visibility               |
| ----------------------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
| **Direction**           | Select   | Column  | <p>Content flow direction:<br>• <strong>Vertical</strong> - Stack items vertically<br>• <strong>Horizontal</strong> - Arrange items horizontally</p>                                                                                                     | -                        |
| **Direction on Mobile** | Select   | Column  | <p>Mobile layout direction:<br>• <strong>Vertical</strong> - Stack items vertically<br>• <strong>Horizontal</strong> - Arrange items horizontally</p>                                                                                                    | -                        |
| **Alignment**           | Select   | Left    | <p>Horizontal alignment when direction is Row:<br>• <strong>Left</strong> - Align to left<br>• <strong>Center</strong> - Center alignment<br>• <strong>Right</strong> - Align to right<br>• <strong>Space Between</strong> - Distribute space</p>        | When Direction is Row    |
| **Mobile Alignment**    | Select   | Left    | <p>Mobile horizontal alignment when direction is Row:<br>• <strong>Left</strong> - Align to left<br>• <strong>Center</strong> - Center alignment<br>• <strong>Right</strong> - Align to right<br>• <strong>Space Between</strong> - Distribute space</p> | When Direction is Row    |
| **Position**            | Select   | Center  | <p>Vertical alignment when direction is Row:<br>• <strong>Top</strong> - Align to top<br>• <strong>Center</strong> - Center alignment<br>• <strong>Bottom</strong> - Align to bottom</p>                                                                 | When Direction is Row    |
| **Align Baseline**      | Checkbox | No      | Align text to baseline                                                                                                                                                                                                                                   | When Position is Bottom  |
| **Alignment (Column)**  | Select   | Left    | <p>Horizontal alignment when direction is Column:<br>• <strong>Left</strong> - Align to left<br>• <strong>Center</strong> - Center alignment<br>• <strong>Right</strong> - Align to right</p>                                                            | When Direction is Column |
| **Position (Column)**   | Select   | Center  | <p>Vertical alignment when direction is Column:<br>• <strong>Top</strong> - Align to top<br>• <strong>Center</strong> - Center alignment<br>• <strong>Bottom</strong> - Align to bottom<br>• <strong>Space Between</strong> - Distribute space</p>       | When Direction is Column |
| **Gap**                 | Range    | 12px    | Spacing between child elements (0-100px)                                                                                                                                                                                                                 | -                        |

***

### Display Type Settings

| Setting  | Type   | Default  | Description                                                                                                                                           |
| -------- | ------ | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Type** | Select | Carousel | <p>Display mode:<br>• <strong>Carousel</strong> - Sliding carousel with navigation<br>• <strong>Marquee</strong> - Continuous scrolling animation</p> |

***

### Carousel Settings

*Only visible when Type is **Carousel***

| Setting             | Type     | Default | Description                                                                                                                                                                                                               | Visibility                          |
| ------------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- |
| **Columns**         | Range    | 3       | Number of testimonials per view (1-4, with 0.1 steps)                                                                                                                                                                     | Carousel only                       |
| **Mobile Columns**  | Select   | 1       | Number of columns on mobile (1, 1.3, or 2)                                                                                                                                                                                | Carousel only                       |
| **Loop**            | Checkbox | No      | Enable infinite loop scrolling                                                                                                                                                                                            | Carousel only                       |
| **Centered Slides** | Checkbox | No      | Center active slide in view                                                                                                                                                                                               | Carousel only                       |
| **Navigation**      | Select   | Arrows  | <p>Navigation style:<br>• <strong>None</strong> - No navigation<br>• <strong>Arrows</strong> - Previous/Next arrows<br>• <strong>Pagination</strong> - Dots/Progress<br>• <strong>Arrows + Pagination</strong> - Both</p> | Carousel only                       |
| **Arrows Position** | Select   | Inside  | <p>Arrow placement:<br>• <strong>Inside Slide</strong> - Over content<br>• <strong>Bottom Slide</strong> - Below content</p>                                                                                              | When navigation includes arrows     |
| **Pagination Type** | Select   | Bullets | <p>Pagination style:<br>• <strong>Dots</strong> - Bullet dots<br>• <strong>Dynamic</strong> - Dynamic dots<br>• <strong>Progress</strong> - Progress bar<br>• <strong>Counter</strong> - Numeric counter</p>              | When navigation includes pagination |

***

### Marquee Settings

*Only visible when Type is **Marquee***

| Setting              | Type   | Default | Description                                                                                                                    | Visibility   |
| -------------------- | ------ | ------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------ |
| **Motion Direction** | Select | Reverse | <p>Scrolling direction:<br>• <strong>Forward</strong> - Left to right<br>• <strong>Reverse</strong> - Right to left</p>        | Marquee only |
| **Animation Type**   | Select | Auto    | <p>Animation trigger:<br>• <strong>Auto</strong> - Continuous animation<br>• <strong>Scroll</strong> - Triggered by scroll</p> | Marquee only |
| **Speed**            | Range  | 20      | Animation speed (5-50)                                                                                                         | Marquee only |

***

### Size Settings

| Setting                 | Type   | Default | Description                                                                                                                                                                                            | Visibility                  |
| ----------------------- | ------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------- |
| **Width**               | Select | Fill    | <p>Block width behavior:<br>• <strong>Fit Content</strong> - Width based on content<br>• <strong>Fill</strong> - Take full available width<br>• <strong>Custom</strong> - Custom width percentage</p>  | -                           |
| **Custom Width**        | Range  | 100%    | Custom width percentage (0-100%)                                                                                                                                                                       | When Width is Custom        |
| **Width Mobile**        | Select | Fill    | <p>Mobile width behavior:<br>• <strong>Fit Content</strong> - Width based on content<br>• <strong>Fill</strong> - Take full available width<br>• <strong>Custom</strong> - Custom width percentage</p> | -                           |
| **Custom Width Mobile** | Range  | 100%    | Custom mobile width percentage (0-100%)                                                                                                                                                                | When Mobile Width is Custom |

***

### Appearance Settings

| Setting                  | Type             | Default | Description                                  | Visibility                       |
| ------------------------ | ---------------- | ------- | -------------------------------------------- | -------------------------------- |
| **Inherit Color Scheme** | Checkbox         | Yes     | Use parent section's color scheme            | -                                |
| **Background**           | Color            | #FFFFFF | Background color with alpha support          | When not inheriting color scheme |
| **Background Gradient**  | Color Background | -       | Background gradient overlay                  | When not inheriting color scheme |
| **Headings**             | Color            | #000000 | Heading text color with alpha support        | When not inheriting color scheme |
| **Text**                 | Color            | #000000 | Body text color with alpha support           | When not inheriting color scheme |
| **Primary Color**        | Color            | #000F9F | Primary/accent color with alpha support      | When not inheriting color scheme |
| **Primary Hover Color**  | Color            | #000000 | Primary hover state color with alpha support | When not inheriting color scheme |
| **Borders**              | Color            | #E6E6E6 | Border color with alpha support              | When not inheriting color scheme |
| **Shadow Color**         | Color            | #000000 | Shadow color with alpha support              | When not inheriting color scheme |

***

### Background Media Settings

| Setting              | Type         | Default | Description                                                                                                                                                                                            | Visibility                            |
| -------------------- | ------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------- |
| **Background Media** | Select       | None    | <p>Background media type:<br>• <strong>None</strong> - No background<br>• <strong>Image</strong> - Background image<br>• <strong>Video</strong> - Background video</p>                                 | -                                     |
| **Background Image** | Image Picker | -       | Upload background image                                                                                                                                                                                | When media is Image                   |
| **Background Video** | Video URL    | -       | External video URL (YouTube/Vimeo)                                                                                                                                                                     | When media is Video                   |
| **Content Overlay**  | Checkbox     | No      | Show content over background media                                                                                                                                                                     | When background media is set          |
| **Image Ratio**      | Select       | Adapt   | <p>Media aspect ratio:<br>• <strong>Adapt</strong> - Natural ratio<br>• <strong>Square</strong> - 1:1 ratio<br>• <strong>Portrait</strong> - 3:4 ratio<br>• <strong>Landscape</strong> - 4:3 ratio</p> | When media is set and overlay enabled |

***

### Border Settings

| Setting           | Type   | Default | Description                                                                                             | Visibility                     |
| ----------------- | ------ | ------- | ------------------------------------------------------------------------------------------------------- | ------------------------------ |
| **Borders Style** | Select | None    | <p>Border style:<br>• <strong>None</strong> - No borders<br>• <strong>Solid</strong> - Solid border</p> | -                              |
| **Border Width**  | Range  | 1px     | Border thickness (0-10px)                                                                               | When Borders Style is not None |
| **Border Radius** | Range  | 0px     | Corner roundness (0-100px)                                                                              | -                              |

***

### Overlay Settings

| Setting                | Type     | Default   | Description                                                                                                              | Visibility               |
| ---------------------- | -------- | --------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------ |
| **Background Overlay** | Checkbox | No        | Enable background overlay                                                                                                | -                        |
| **Overlay Color**      | Color    | #00000026 | Overlay color with alpha support                                                                                         | When overlay is enabled  |
| **Overlay Style**      | Select   | Solid     | <p>Overlay type:<br>• <strong>Solid</strong> - Solid color overlay<br>• <strong>Gradient</strong> - Gradient overlay</p> | When overlay is enabled  |
| **Gradient Direction** | Select   | To Top    | <p>Gradient direction:<br>• <strong>Up</strong> - Bottom to top<br>• <strong>Down</strong> - Top to bottom</p>           | When overlay is gradient |

***

### Shadow Settings

| Setting               | Type  | Default   | Description                              |
| --------------------- | ----- | --------- | ---------------------------------------- |
| **Shadow Color**      | Color | #00000000 | Shadow color with alpha support          |
| **Horizontal Offset** | Range | 0px       | Horizontal shadow position (-12 to 12px) |
| **Vertical Offset**   | Range | 0px       | Vertical shadow position (-12 to 12px)   |
| **Blur**              | Range | 0px       | Shadow blur amount (0-20px)              |
| **Spread**            | Range | 0px       | Shadow spread radius (0-100px)           |

***

### Margin Settings

| Setting                  | Type  | Default | Description                       |
| ------------------------ | ----- | ------- | --------------------------------- |
| **Margin Top**           | Range | 0px     | Top margin spacing (0-100px)      |
| **Margin Top Mobile**    | Range | 0px     | Top margin on mobile (0-100px)    |
| **Margin Bottom**        | Range | 0px     | Bottom margin spacing (0-100px)   |
| **Margin Bottom Mobile** | Range | 0px     | Bottom margin on mobile (0-100px) |
| **Margin Left**          | Range | 0px     | Left margin spacing (0-100px)     |
| **Margin Left Mobile**   | Range | 0px     | Left margin on mobile (0-100px)   |
| **Margin Right**         | Range | 0px     | Right margin spacing (0-100px)    |
| **Margin Right Mobile**  | Range | 0px     | Right margin on mobile (0-100px)  |

***

### Padding Settings

| Setting            | Type  | Default | Description                      |
| ------------------ | ----- | ------- | -------------------------------- |
| **Padding Top**    | Range | 0px     | Top padding spacing (0-100px)    |
| **Padding Bottom** | Range | 0px     | Bottom padding spacing (0-100px) |
| **Padding Left**   | Range | 0px     | Left padding spacing (0-100px)   |
| **Padding Right**  | Range | 0px     | Right padding spacing (0-100px)  |

</details>

## Testimonial Item Block

The "**Testimonial item**" block can be combined with other blocks to create a layout such as Heading, Text, Button, Image, Group, etc.

* Child Blocks Supported
  * `image` - Image blocks
  * `icon` - Icon blocks
  * `text` - Text content blocks
  * `rating` - Rating/star blocks
  * `image-with-content` - Combined image and content blocks
  * `@app` - App blocks
  * `group` - Nested group blocks
  * `group-basic` - Basic group blocks
  * `spacer` - Spacing blocks
  * `_divider` - Custom divider blocks

<figure><img src="/files/8c2Bb3itwqES3qKY6ORp" alt=""><figcaption></figcaption></figure>

### Testimonial Item Block - Settings Guide

It is a flexible block used to create testimonial items with customizable layout and styling, and it can contain other child blocks. This block is rendered through the `group` snippet and fully supports Flexbox layout features.

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

<details>

<summary>Testimonial Item Block - Settings Guide</summary>

#### Link Settings

| Setting           | Type     | Default | Description                                |
| ----------------- | -------- | ------- | ------------------------------------------ |
| `link`            | url      | -       | Optional link URL for the testimonial item |
| `open_in_new_tab` | checkbox | false   | Open link in new tab                       |

#### Layout & Direction Settings

| Setting                                      | Type     | Default      | Options                                     | Visibility                         | Description                            |
| -------------------------------------------- | -------- | ------------ | ------------------------------------------- | ---------------------------------- | -------------------------------------- |
| `content_direction`                          | select   | "column"     | column, row                                 | -                                  | Main content flow direction            |
| `content_direction_mobile`                   | select   | "column"     | column, row                                 | -                                  | Mobile content flow direction          |
| `horizontal_alignment`                       | select   | "flex-start" | flex-start, center, flex-end, space-between | `content_direction == 'row'`       | Horizontal alignment for row layout    |
| `horizontal_alignment_mobile`                | select   | "flex-start" | flex-start, center, flex-end, space-between | `content_direction == 'row'`       | Mobile horizontal alignment            |
| `vertical_alignment`                         | select   | "center"     | flex-start, center, flex-end                | `content_direction == 'row'`       | Vertical alignment for row layout      |
| `align_baseline`                             | checkbox | false        | -                                           | `vertical_alignment == 'flex-end'` | Align content to baseline              |
| `horizontal_alignment_flex_direction_column` | select   | "flex-start" | flex-start, center, flex-end                | `content_direction != 'row'`       | Horizontal alignment for column layout |
| `vertical_alignment_flex_direction_column`   | select   | "center"     | flex-start, center, flex-end, space-between | `content_direction == 'column'`    | Vertical alignment for column layout   |
| `gap`                                        | range    | 12           | 0-100px (step: 1)                           | -                                  | Gap between child elements             |

#### Size Settings

| Setting               | Type   | Default | Options                   | Visibility                 | Description                    |
| --------------------- | ------ | ------- | ------------------------- | -------------------------- | ------------------------------ |
| `width`               | select | "fill"  | fit-content, fill, custom | -                          | Desktop width behavior         |
| `custom_width`        | range  | 100     | 0-100% (step: 1)          | `width == 'custom'`        | Custom width percentage        |
| `width_mobile`        | select | "fill"  | fit-content, fill, custom | -                          | Mobile width behavior          |
| `custom_width_mobile` | range  | 100     | 0-100% (step: 1)          | `width_mobile == 'custom'` | Custom mobile width percentage |
| `height`              | select | "fit"   | fit, fill, custom         | -                          | Height behavior                |
| `custom_height`       | range  | 100     | 0-100% (step: 1)          | `height == 'custom'`       | Custom height percentage       |

#### Color Scheme Settings

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

#### Background Media Settings

| Setting                     | Type          | Default | Options                            | Visibility                                                     | Description            |
| --------------------------- | ------------- | ------- | ---------------------------------- | -------------------------------------------------------------- | ---------------------- |
| `background_media`          | select        | "none"  | none, image, video                 | -                                                              | Background media type  |
| `video`                     | video         | -       | -                                  | `background_media == 'video'`                                  | Background video file  |
| `video_position`            | select        | "cover" | cover, contain                     | `background_media == 'video'`                                  | Video positioning      |
| `background_image`          | image\_picker | -       | -                                  | `background_media == 'image'`                                  | Background image       |
| `background_image_position` | select        | "cover" | cover, fit                         | `background_media == 'image'`                                  | Image positioning      |
| `content_overlay`           | checkbox      | false   | -                                  | `background_media == 'image' \|\| background_media == 'video'` | Enable content overlay |
| `image_ratio`               | select        | "adapt" | adapt, portrait, square, landscape | `background_media != 'none' && content_overlay`                | Image aspect ratio     |

#### Border & Overlay Settings

| Setting              | Type     | Default     | Options            | Visibility                                      | Description               |
| -------------------- | -------- | ----------- | ------------------ | ----------------------------------------------- | ------------------------- |
| `border`             | select   | "none"      | none, solid        | -                                               | Border style              |
| `border_width`       | range    | 1           | 0-10px (step: 0.5) | `border != '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`                                | Overlay color with alpha  |
| `overlay_style`      | select   | "solid"     | solid, gradient    | `toggle_overlay`                                | Overlay style type        |
| `gradient_direction` | select   | "to top"    | to top, to bottom  | `toggle_overlay && overlay_style == 'gradient'` | Gradient direction        |

#### Shadow Settings

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

#### Margin Settings (Desktop & Mobile)

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

#### Padding Settings

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

</details>

## 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, and the optional `goal` query parameter:

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

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