> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Blum Testimonial **Theme:** Blum · **Section type:** All-template section The **Testimonials** section shows quotes from your customers with their photo, name, and title. Real reviews build trust and help new customers decide to buy. > **Note:** You can add this section to any template, but not to the header or footer. The section comes with 5 **Testimonial** blocks. ![Testimonials section with circle photos](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/testimonials-1_1s8a83q.png) **What you can do** - Add the section and your testimonials - Choose the layout - Change the photo style - See what customers see - Look up every setting - Fix common problems --- ## Add the section and your testimonials 1. In the theme editor, open the template where you want the section. 2. In the left sidebar, click **Add section** > **Testimonials**. 3. Under **General**, enter a **Section subheading**, a **Section heading**, and a **Section description**. Leave a field empty to hide it. 4. Click a **Testimonial** block. 5. Select an **Avatar**, then enter the **Author**, the **Author title**, and the **Testimonial content**. 6. To add more testimonials, click **Add block** > **Testimonial**. 7. Click **Save**. > **Tip:** Use square photos of at least 360 × 360 px. Add the customer's city or job in **Author title** to make the quote more credible. ## Choose the layout 1. Click the **Testimonials** section. 2. Under **Layout**, select a **Content alignment**: - **Left** or **Center**: shows the testimonials in a row. Set **Items per row on desktop** from 1 to 6. - **Diagonal**: on desktop, places the section heading on the left and shows the testimonials 2 per row on the right, set slightly lower than the heading. 3. Optional: check **Enable carousel on mobile** to let customers swipe through the testimonials on phones. Check **Show navigation on mobile** to add arrow buttons. 4. Click **Save**. > **Note:** **Items per row on desktop** is hidden when you select **Diagonal**. ## Change the photo style 1. Click the **Testimonials** section. 2. Under **Testimonial item**, select an **Image style**: **Bubble**, **Circle**, or **Square**. 3. Drag **Image size** to set the photo size, from 60 px to 200 px. 4. Optional: set a **Mask overlay** color and **Mask overlay opacity** to tint the photos. 5. Optional: check **Show quote icon** and select an **Icon color scheme**. 6. Click **Save**. ## What customers see - **Desktop:** the testimonials show in a row. If there are more testimonials than **Items per row on desktop**, customers use the arrow buttons to scroll through them. - **Diagonal:** on desktop, the heading sits on the left and the testimonials show 2 per row on the right. - **Tablet:** 2 testimonials per row. - **Mobile:** with **Enable carousel on mobile**, customers swipe through the testimonials one by one. Without it, the testimonials stack on top of each other. - **Quote icon:** a quote mark shows on each photo when **Show quote icon** is checked. ![Testimonials carousel on a phone with bubble photos and quote icon](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/testimonials-2_je1x6x.png) ## Settings reference ### General | Setting | What it does | | ---- | ---- | | Color scheme | Sets the colors of the section. You can edit color schemes in Theme settings > Colors. | | Section subheading | Small text above the heading. Leave it empty to hide it. | | Section heading | The main heading. Leave it empty to hide it. | | Section description | Short text below the heading. Leave it empty to hide it. | ### Layout | Setting | What it does | | ---- | ---- | | Content alignment | Sets the layout: Left, Center, or Diagonal. | | Items per row on desktop | Sets how many testimonials show in a row on desktop, from 1 to 6. Hidden with Diagonal. | | Enable carousel on mobile | Lets customers swipe through the testimonials on phones. | | Show navigation on mobile | Shows arrow buttons in the mobile carousel. Appears when Enable carousel on mobile is checked. | | Remove padding top | Removes the space above the section. | | Remove padding bottom | Removes the space below the section. | ### Testimonial item | Setting | What it does | | ---- | ---- | | Image style | Sets the shape of the photos: Bubble, Circle, or Square. | | Image size | Sets the photo size, from 60 px to 200 px. | | Mask overlay | Sets the color of the overlay on the photos. | | Mask overlay opacity | Sets how strong the overlay on the photos is, from 0 % to 90 %. | | Show quote icon | Shows a quote mark on each photo. | | Icon color scheme | Colors the quote mark with the Main accent or Extra accent color. Appears when Show quote icon is checked. | ### Prominent badge | Setting | What it does | | ---- | ---- | | Text | The badge text. Leave it empty to hide the badge. | | Accent scheme | Colors the badge with the Main or Extra accent colors. Appears when the badge has text. | | Position | Places the badge on the Left or Right. Appears when the badge has text. | | Shape | Sets the badge shape: Star, Diamond, or Asterisk. Appears when the badge has text. | ### Testimonial block settings | Setting | What it does | | ---- | ---- | | Avatar | The customer's photo. A 360 × 360 px .jpg is recommended. | | Author | The customer's name. | | Author title | Text below the name, for example a job or a city. | | Testimonial content | The customer's quote. | ## Troubleshooting **I can't find Items per row on desktop.** This setting is hidden when **Content alignment** is **Diagonal**. Select **Left** or **Center** to see it. **There is no setting for tablets.** Tablets always show 2 testimonials per row. You can only change the number of items per row on desktop. **The photos look too dark.** Lower the **Mask overlay opacity** under **Testimonial item**. **Customers can't swipe on mobile.** Check **Enable carousel on mobile** under **Layout**. ## Related articles - [Blum Icon With Text](https://doc.ecomx.co/en/article/blum-icon-with-text-a8a4ez/) - [Blum Logo List](https://doc.ecomx.co/en/article/blum-logo-list-1gw3bx2/) - [Blum Image With Text](https://doc.ecomx.co/en/article/blum-image-with-text-asff90/) - [Blum All-Template Sections](https://doc.ecomx.co/en/article/blum-all-template-sections-jwz099/)