Testimonials Section

You can easily create a reviews page on the website or add your reviews on a page using the testimonials section. Adding client reviews to your website builds trust in your brand, and helps in maintaining quality client relations.

In this article:

• What is a Testimonial List?
• Add Testimonial Section to the page
• Add and edit list items
• Sequencing list items
• Deleting list items
• Changing section layout
• Style options
• The Full card and the Text card

The Testimonial List

• You can easily include a Testimonial Section on your website where you can showcase feedback, comments, and testimonials on your website.
• It’s a great way to showcase the positive buzz on your website.

Add Testimonial List Section

• A section can be added to a page. You can either add a section to an already existing page or create a new page within your website.
• On your page, click on the blue + icon to add a New Section to your page.

• You will now see the section categories on the left side.
• Scroll down and choose the Testimonials Section (1) option where you can choose from the different layouts.

• Choose any section layout (2) and click on it to add it to your page.

Add and Edit List Items

Add List Item

Once you have added the section:

• Click on the Edit Testimonials (1) button to open the List Item Panel.

• Click on the Add Item (2) button to add a new list item.
• You will have the option to duplicate and delete (3) the list items.

Edit List Item

• Click on the list item that you want to edit.
• It will open the particular List item editing options.
• Upload an Image (1) for the List Item.
• Add a Title (2), Subtitle (3), and Description (4) of the List Item.

• Click on the Link Builder icon of the Title Link (5) to open the link builder to link the list item title to any page.
• Set the Link to open in a new tab or in the same tab (6).
• Add any type of Link (7) to the list item. You can add a Button/Image link/Social Icon/Text Link. Learn more.
• Save (8) your changes.

See in action:

Sequence List Items

• You can easily drag and drop the list items to change the sequence.

Delete a List Item

Once you have added a list item, you can edit the same and also delete it.

• Click on the Delete icon next to the testimonial list item.
• Click on the Delete button in the confirmation popup.
• Save your changes.

Section Layout

• Click on the Edit Testimonials button to open the section editing panel.
• Choose the Layout tab.
• From here, you can easily change the layout of the section even after adding it to the page.

While changing the layout, you will see the section-related layouts on the top.

Apart from these, you also have the option to choose a layout from other sections under the More Layouts heading.

Style your Section

• Click on Edit Testimonials (1) button to open the Testimonial List editing panel.

• Choose the Style (2) tab.
• Change the Style for the section elements and Save (3) your changes.

Style Options

You will have multiple style options for the section: 

1. 1. Items
   2. Text Size
   3. Spacing
   4. Section Headline
   5. Images
   6. Image Border
   7. Cards
   8. Shadow
   9. Button & Links

Items 

1. Choose to Show Items in rows and columns or carousel 
   • If you have chosen the rows and columns option, the list items will be arranged in rows and columns. In this case, you need to specify the number of rows and columns.
   • If you have chosen the carousel option, the list items will be presented as a slideshow. Know more.
2. Set the number of columns for the list items. You can choose from 1 to 10 columns.
3. Specify the Space between columns of the list items.
4. Choose the Content Order i.e., the images of the list items to be displayed first or the associated text.
5. Align the content in the List items. You can set them to be left, right, or center aligned.
6. Choose to Loop the Carousel or not.
7. In case of the Carousel, choose the Navigation Controls. You can choose between No Controls, Arrows – Bottom Center/Top Right/Bottom Right, Chevron, or Dots.

Text Size

1. Click on the Change Text Style button to visit the Design section and manage your font sizes and styles.
2. Set the Title font style for the list items.
3. Set the Subtitle font style for the list items.
4. Set the default Description font style for the list items.

Spacing

1. Specify the Image Width for list items.
2. Specify the Content Width for the list items.
3. Specify the Space below Section Headline in px.
4. Specify the Space below images of the list items (in %).
5. Specify the Space below the titles of the list items (in %).
6. Specify the Space below the Subtitle of the list items (in %).

Section Headline

1. Horizontally Align the section headline text. You can set it to Left, Center, and Right.
2. Enable/Disable the Divider between the section headline and the section content.
3. Set the thickness of divider (in px).
4. Specify the Divider Color from color picker.
5. Select a style for section headline divider.

Images 

1. Choose the image crop for the list items. You can set the images as Square, Circle, Landscape,  Portrait, and Dynamic.
2. Choose to have a common corner radius or different corner radius for each side of the list items and set a number (in px) for the corner radius of the list item images.

• In case you have chosen split corners, you can set different corner radius for each corner.

On Image Hover 

3. Choose the Image Overlay Color to be the accent color or to be specified. If you have chosen the accent color, then specify the opacity.
4. If you have chosen the specify color option then set the Overlay color for the list items.
5. Set the Elements color for the list items of the section.
6. Choose to animate the list item images on hover by clicking on Yes.
7. Select an Animation Style for the images on hover.

Image Border

1. Enable / Disable border around the images by switching the toggle.
2. Choose to have a common border on all sides of images or you can specify the borders separately for each side.
3. Specify the width of the border. If it is set to 0, then the border will not appear. You also have the option to set the border width individually for each side of the image.
4. Select the Border Color from color picker.
5. Select a preferred Border Style from the dropdown.
6. Determine the border width for mobile devices, aligning it with the width chosen for desktop.

Cards

• See how to manage cards.

Shadow

1. Display – Choose to show the shadow behind the list items always or on hover only.
2. Style – Choose from existing presets or create a custom shadow.
   In case you have chosen the Custom option, then visit this Box Shadow Generator to create a custom shadow. Finally, copy and paste the box shadow CSS.
3. In case you have chosen the presets option, then Choose Shadow Styles from the dropdown.

Button & Links

• See how to manage the styling of Buttons & Links.

Save all the style changes.

Text Card

When the text card option is selected, the card color is applied only to the text associated with the image. Have a look: 

Related articles:

• Types of Sections
• Section Visibility options