Skip to content

How to Show Testimonials in Grid Layout in Elementor?

Table Of Content

A grid is the simplest way to show several testimonials at once: every card sits in a row of equal-width columns, and the rows wrap.

The Testimonial widget from The Plus Addons for Elementor builds that grid for you, with a separate column count for desktop, tablet and mobile.

To check the complete feature overview documentation of The Plus Addons for Elementor Testimonial widget, click here.

Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.

Before You Start

  • Edition: the Testimonial widget is in the free plugin. Style-3 and the extras listed below need The Plus Addons for Elementor Pro.
  • Widget to enable: Testimonial, switched on under The Plus Addons > Widgets. Its card is badged FREEMIUM.
  • If you use the Post Type source: the testimonial custom post type has to be switched on first, under The Plus Addons > Extra Options > Listing > Testimonial. Until then there are no testimonials to list.

Build the grid

  1. Edit the page with Elementor and drag the Testimonial widget in.
  2. In Layout (Content Layout in the free plugin) pick a Style.
  3. Set Layout to Grid – the first of the three pictures.
  4. Set Select Source to Post Type to list the testimonial post type, or Repeater to type the testimonials into the widget.
Layout set to grid in the testimonial widget panel

The testimonials line up in a grid:

Front end showing four testimonials side by side in one grid row

Set the columns

Open the Columns Manage section. Read the labels rather than the numbers: the label says how many cards fit in a row.

SettingWhat it doesDefault
Desktop ColumnCards per row on desktop.Column 4
Tablet ColumnCards per row on tablet.Column 3
Mobile ColumnCards per row on mobile.Column 2
Columns Gap/Space BetweenSpacing around each card, set as padding inside its cell.15 px on all sides
Columns manage section with desktop column, tablet column and mobile column

Even out the card heights

Cards in a grid are as tall as their longest testimonial. Under Extra Option you can fix that height:

  • Content Height(px) fixes the height and adds a scrollbar to whatever overflows. In the Pro plugin this sizes the whole card, so a small value clips the author picture and name too; in the free plugin it sizes only the testimonial text.
  • Title Height(px) does the same for the testimonial title.
  • Content Scroll chooses whether that scrollbar is hidden until the card is hovered (On Hover) or always drawn (Visible).

How It Behaves

  • All three layouts – Grid, Masonry and Carousel – work in the free plugin for Style-1, Style-2 and Style-4. Only Style-3 needs Pro.
  • The column count is a real breakpoint change, not a squeeze: at 390 px wide the default grid shows two cards per row.
  • Columns Gap is padding on each cell, so the space you see between two cards is twice the value you type.
  • Grid keeps the rows aligned. If you would rather each card kept its natural height and packed upwards, use the Masonry layout instead.

Limitations

  • The column dropdown labels are the opposite way round to the stored values – Column 4 is four per row, not four columns wide. Always read the label.
  • Content Height(px) behaves differently in the two editions, as described above. Check the result on the published page before settling on a value.
  • In the free plugin, Content Scroll has no effect when Select Source is Post Type – the scrollbar is always visible.
  • There is no Load More or pagination on this widget: Maximum Posts Display is the whole list.

Troubleshooting

There is no Columns Manage section

The Layout is set to Carousel. Columns Manage is hidden there; a carousel takes its column count from Style > Carousel Options.

I get one card per row on desktop

Desktop Column is set to Column 1. Change it to Column 3 or Column 4.

The gap between cards is twice what I set

That is expected – the value is applied as padding on both cards. Halve it.

The cards are different heights

Set Content Height(px) under Extra Option, or switch to the Masonry layout if uneven heights are fine.

Related Docs

Related Frequently Asked Questions

Related Docs