All Collections
Website
Widgets
Testimonial panel widget
Testimonial panel widget

How to display testimonals in a customised list or grid on your website.

Clare Wade avatar
Written by Clare Wade
Updated over a week ago

What is a testimonial panel?

A testimonial panel is a way of displaying a number of testimonials with quotes, customer information, images and dates. Testimonials panels have a range of settings that can be used to customise the arrangement of the testimonials, the appearance of the testimonial image and the appearance and behaviour of the scroll-triggered animation.

Once a testimonial panel has been added, it can then be displayed on your website by adding it to the content of a row column.

How do I add a testimonial panel?

In the admin area

For a testimonial panel that displays the testimonials in individual rows:

  1. Go to Website > Widgets.

  2. Click the Add button in the top right.

  3. Click the Testimonial panel icon.

  4. Enter a Title.

  5. Tick/un-tick one or more Testimonials.

  6. Optionally, enter a Number of testimonials.

  7. Tick/un-tick Show capture date.

  8. Tick/un-tick Show image.

  9. Select the List option from the listing arrangement Layout drop-down menu.

  10. Select a listing arrangement Alignment.

  11. Select a listing arrangement Horizontal layout.

  12. Select a listing image Aspect ratio.

  13. Optionally, enter a listing image Minimum width.

  14. Optionally, enter a listing image Maximum width.

  15. Select a listing image Position.

  16. Optionally, select a listing animation Type.

  17. Enter a listing animation Duration.

  18. Tick/un-tick Only play the animation once.

  19. Click the Add button.

For a testimonial panel that displays a number of testimonials per row:

  1. Go to Website > Widgets.

  2. Click the Add button in the top right.

  3. Click the Testimonial panel icon.

  4. Enter a Title.

  5. Tick/un-tick one or more Testimonials.

  6. Optionally, enter a Number of testimonials.

  7. Tick/un-tick Show capture date.

  8. Tick/un-tick Show image.

  9. Select the Grid option from the listing arrangement Layout drop-down menu.

  10. Select a listing arrangement Orientation.

  11. Select a listing arrangement Alignment.

  12. Select a listing arrangement Horizontal layout*.

  13. Enter a listing arrangement Maximum per row.

  14. Enter a listing arrangement Minimum width.

  15. Select a listing image Aspect ratio.

  16. Optionally, enter a listing image Minimum width*.

  17. Optionally, enter a listing image Maximum width*.

  18. Optionally, enter a listing image Maximum height**.

  19. Optionally, select a listing animation Type.

  20. Enter a listing animation Duration.

  21. Tick/un-tick Only play the animation once.

  22. Click the Add button.

You can now add this widget to your website but it will only be visible if it contains published testimonials so it's important to ensure that you have some published testimonials available.

* Only available if the Listing orientation is set to Horizontal.

** Only available if the Listing orientation is set to Vertical.

How do I edit a testimonial panel?

In the admin area

  1. Go to Website > Widgets.

  2. Find the testimonial panel you are looking for and click the Edit button in the Options column.

  3. Edit the testimonial panel's details.

  4. Click the Update button.

How do I delete a testimonial panel?

In the admin area

  1. Go to Website > Widgets.

  2. Find the testimonial panel you are looking for and click the Delete button in the Options column.

  3. Click the Delete button to confirm.

How do the settings affect the appearance of a testimonial panel?

The range of customisation settings available depends on which listing arrangement layout option is used.

For a testimonial panel using the List option:

  • Listing arrangement alignment - Changes the alignment of the listing content to left-aligned or center-aligned.

  • Listing arrangement horizontal layout - Changes the ratio of text and the image.

  • Listing image aspect ratio - Changes how the images are cropped and sized.

  • Listing image minimum width - Sets a minimum image width to prevent the image from getting too narrow.

  • Listing image maximum width - Sets a maximum image width to prevent the image from getting too wide.

  • Listing animation type - Changes which animation will play when a customer scrolls past the testimonial panel.

  • Listing animation duration - Changes the speed of the animation, a longer duration means the animation will be slower.

  • Listing animation only play the animation once - Sets the animation to only play the first time the customer scrolls past the testimonial panel or to play every time the customer scrolls past the testimonial panel.

For a testimonial panel using the Grid option:

  • Listing arrangement orientation - Changes the orientation of the listing content to vertically (image above, text below) or horizontally (image on the left, text on the right)

  • Listing arrangement alignment - Changes the alignment of the listing content to left-aligned or center-aligned.

  • Listing arrangement horizontal layout* - Changes the ratio of text and the image.

  • Listing arrangement maximum per row - Sets the maximum number of listings to display per row in the grid. (e.g. 3 per row, 4 per row, etc).

  • Listing arrangement minimum width - Sets the minimum width of a testimonial. This determines when the testimonials will wrap onto the next row in the grid when the space available is reduced.

  • Listing image aspect ratio - Changes how the images are cropped and sized.

  • Listing image minimum width* - Sets a minimum image width to prevent the image from getting too narrow.

  • Listing image maximum width* - Sets a maximum image width to prevent the image from getting too wide.

  • Listing image maximum height** - Sets a maximum image height to prevent the image from getting too tall.

  • Listing animation type - Changes which animation will play when a customer scrolls past the testimonial panel.

  • Listing animation duration - Changes the speed of the animation, a longer duration means the animation will be slower.

  • Listing animation only play the animation once - Sets the animation to only play the first time the customer scrolls past the testimonial panel or to play every time the customer scrolls past the testimonial panel.

* Only available if the listing Orientation is set to Horizontal.

** Only available if the listing Orientation is set to Vertical.

Did this answer your question?