The Review Card Carousel widget by Atomic Addons shows reviews you write in as a row of cards that slides sideways. 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. You choose how many cards show at once and how visitors move through them: arrows, dots, a counter, a progress bar or autoplay. To show the same cards in a fixed grid, use the Review Card Grid widget.
Enable the Review Card Carousel Widget
Review Card Carousel 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 Carousel. You can also open the Marketing category.
- 4
Turn the Review Card Carousel widget on.
- 5
Click Save Settings.
Add the Review Card Carousel Widget
- 1
Open the page in Elementor (Edit with Elementor).
- 2
In the widget panel, search for Review Card Carousel. 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 layout and what each card shows:
- 1
Columns: How many cards show at once, 1 to 6: 3 by default, 2 on tablets and 1 on phones. Use the device icon to change the tablet and phone numbers.
- 2
Item Gap: The space between cards, 20px by default.
- 3
Item Match Height: Stretches every card to the height of the tallest one. On by default.
- 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.
Navigation
Content → Navigation sets the controls visitors use to move the carousel. They can also swipe or drag the cards.
- 1
Navigation: Arrows, the default, adds previous and next buttons. Arrows and Dots adds a dot for each position as well, and Arrows and Fraction a counter such as “1 / 6”. Dots shows only the dots, Progress a bar that fills as the carousel moves, and None nothing.
- 2
Dynamic Bullets?: With dots: shows only a few dots at a time, smaller the further they are from the current one. Useful when the carousel holds many reviews.
- 3
Show Scrollbar?: Adds a draggable bar under the cards. It appears while the carousel moves and fades out a moment later.
- 4
Arrows and Dots Position: Where the controls sit. Its name follows your choice above: Arrows Position, Arrows and Fraction Position and Arrows and Dots Position offer nine places around the carousel, Center by default, which puts the arrows at the sides; Dots Position offers eight, Bottom Center by default. With Progress, Progress Position puts the bar at the Bottom (the default) or the Top.
- 5
Hide Arrow on Mobile: Hides the arrows on screens narrower than 960px, where visitors swipe. On by default.
Carousel Settings
Content → Carousel Settings controls how the carousel moves:
- 1
Layout: Carousel, the default, slides the cards in a flat row. Coverflow turns the cards beside the current one away in 3D.
- 2
Coverflow Effect: Coverflow only: Rotate sets how far the side cards turn (50 by default), Stretch the space between them (0), Depth how far back they sit (100) and Modifier multiplies the whole effect (1).
- 3
Autoplay: Moves the carousel on by itself. On by default.
- 4
Autoplay Speed: How long each position stays, in milliseconds: 5000, or 5 seconds, by default.
- 5
Pause on Hover: Stops autoplay while the pointer is over the carousel. Off by default.
- 6
Slides to Scroll: How many cards each move advances, 1 by default. Use the device icon to set it for tablets and phones.
- 7
Center Slide: Keeps the current card in the middle, with the others on either side. The panel's hint suggests an even number of Columns.
- 8
Grab Cursor: Shows a hand cursor over the cards, a hint that they can be dragged.
- 9
Drag Free Mode: Lets a drag or swipe glide on and stop anywhere, instead of snapping to the next card.
- 10
Loop: Starts again from the first review after the last one. On by default.
- 11
Animation Speed (ms): How long one move takes, 500 by default.
- 12
Observer: Turn it on when the carousel sits in a tab, an accordion or a popup that is hidden when the page loads, so it sizes itself when it appears.
- 13
Mousewheel: Lets visitors move the carousel with the mouse wheel or a trackpad while the pointer is over it.
Style the Review Card Carousel
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. Match Padding adds space around the row so a shadow isn't cut off at the edges.
- 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.
- Navigation — the arrows in Normal and Hover states (color, background, border, radius, padding, size, spacing), the dots, the fraction counter, the progress bar and the scrollbar, plus Offset sliders that move the arrows and dots.
- 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.