The Review Card Grid widget by Atomic Addons shows reviews you write in as cards in a grid. Each card has the reviewer's photo, name and job title, a rating as stars or a number, and the review text, which can be cut short with a Read more link. To show the same cards as a sliding row, use the Review Card Carousel widget.
Enable the Review Card Grid Widget
Review Card Grid is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:
- 1
Go to WordPress Dashboard → Atomic Addons.
- 2
Click the Widgets tab.
- 3
Search for Review Card Grid. You can also open the Marketing category.
- 4
Turn the Review Card Grid widget on.
- 5
Click Save Settings.
Add the Review Card Grid Widget
- 1
Open the page in Elementor (Edit with Elementor).
- 2
In the widget panel, search for Review Card Grid. The widget sits in the Atomic Addons category.
- 3
Drag it into the page and set it up with the controls below.
- 4
Click Publish (or Update).
Review Card Items
Content → Review Card Items holds the reviews, six sample ones to start with. Click a review to open it:
- 1
Image: The reviewer's photo, shown as a 56px circle by default.
- 2
Name: The reviewer's name, such as “Adam Smith”.
- 3
Job Title: A line under the name, such as “SEO Expert”.
- 4
Rating: 0 to 5 in half steps, 4.5 by default.
- 5
Review Text: The review itself, in a text editor so you can add bold text or links.
Each field accepts Dynamic Tags. Use Add Item for another review, the copy icon to duplicate one and drag the items to reorder them.
Under the list, Limit Words cuts every review to that many words and adds a Read more link that opens the full text in place (and Read less to close it). Leave it empty to show the full text.
Additional Settings
Content → Additional Settings sets the grid and what each card shows:
- 1
Columns: 1 to 6 columns: 3 by default, 2 on tablets and 1 on phones. Use the device icon to change the tablet and phone numbers.
- 2
Row Gap: The space between rows, 20px unless you set another.
- 3
Column Gap: The space between columns, 20px unless you set another.
- 4
Show Name: The reviewer's name. On by default.
- 5
Name HTML Tag: The name's markup: H1 to H6, div, span or p. H3 by default.
- 6
Show Job Title: The job title under the name. On by default.
- 7
Show Rating: The rating. On by default.
- 8
Rating Type: Star, the default, shows five stars with halves. Number shows the figure with one star, such as “4.5 ★”.
- 9
Rating Position: Before Review Text (the default), under the name, or After Review Text.
- 10
Show Review Text: The review. On by default.
- 11
Show Image: The photo. On by default.
- 12
Image Resolution: Which image size WordPress serves for the photos, Medium by default.
- 13
Image Position: Top, the default, puts the photo above the text. Left and Right set it beside the whole card's text. Use the device icon to set another position for tablets and phones.
- 14
Image Inline: With Left or Right: places the photo beside just the name, job title and rating, with the review text running full width below. The panel notes it applies to every screen size, whatever you set per device.
- 15
Image Alignment: While Image Inline is off: lines the photo up with the Start (the default), Center or End of the card.
- 16
Alignment: Left, center, right or justified text.
Cards in the same row stretch to the same height, so their borders line up.
Style the Review Card Grid
Everything below is on the Style tab. Sections that belong to a feature you turned off are hidden.
- Items — the card: background, border, radius, padding and shadow, with a Hover state.
- Image — radius, padding, Size (or Advanced Size for a separate width and height), the space beside it and an Offset to nudge it horizontally or vertically.
- Name, Job Title and Text — color, spacing and typography.
- Rating — for stars, the empty Color and the filled Active Color; for a number, its color, Star Color, background, border, radius and padding; for both, size, spacing and margin.
- Read More Link — with Limit Words set: the link's color, hover color and typography.
Can't find what you need?
Our support team can help with setup questions and anything the docs don't cover yet.