How Do I Add a Border to Review Cards on My Avatar Card Carousel Widget in Feedspace?
Overview
The Avatar Card Carousel widget displays your testimonials as a horizontal sliding carousel, where each review is presented inside an individual card that prominently features the reviewer’s avatar alongside their testimonial text, name, and rating. Because each card is a visually distinct unit in the carousel, adding a border helps define the edges of every card clearly, preventing cards from blending into the surrounding background as users slide through them.
The Show Review Card Border toggle, found in the Widget Color Customization section of the Design tab, lets you draw a visible border around each review card. Once enabled, three sub-options become available: Border Thickness (1px to 12px), Border Radius (None to XX-Large for rounded corners), and Border Color (a color picker). Together these controls let you match the card borders to your site’s visual style, whether you prefer a subtle hairline outline or a bold, rounded frame that gives each testimonial a card-like, polished appearance.
How to Add a Border to Review Cards on Your Avatar Card Carousel Widget
Step 1: Open the Widgets Section
Log in to your Feedspace account. In the left sidebar, click Widgets to open the Widgets listing page, where all your existing widgets are displayed.
Step 2: Edit Your Avatar Card Carousel Widget
Locate the Avatar Card Carousel widget you want to update. Click the Edit icon or the widget name to open it in the widget editor.
Step 3: Go to the Design Tab
Inside the widget editor, click the Design tab at the top of the settings panel. This tab contains all visual customization options for the widget, including layout, colors, typography, and card styling.
Step 4: Find the Widget Color Customization Section
Scroll down within the Design tab until you reach the Widget Color Customization section. This section groups together all color and border-related styling controls for the widget’s review cards.
Step 5: Enable the Show Review Card Border Toggle
Find the Show Review Card Border toggle and click it to turn it on. Once enabled, three additional sub-options will appear directly below the toggle.
Step 6: Set the Border Thickness
Use the Border Thickness control to choose how thick the border should appear on each card. The available range is 1px (a very fine outline) to 12px (a bold, prominent frame). Drag the slider or enter a value directly to set your preferred thickness.
Step 7: Set the Border Radius
Use the Border Radius control to choose the roundness of the card corners. The options range from None (sharp, square corners) to XX-Large (very rounded, pill-like corners). Select the option that best fits your site’s design language.
Step 8: Choose the Border Color
Click the Border Color picker to open the color selection panel. Choose a color that complements your site’s palette. You can enter a hex code directly for an exact brand color match, or use the visual picker to select a hue and shade.
Step 9: Save and Publish
Once you are satisfied with the border settings, click Save to apply your changes. The border styling will be applied to every review card in your Avatar Card Carousel widget wherever it is embedded.
What You Can Do Next
- Add a shadow to your review cards to complement the border and give cards a lifted, three-dimensional appearance in your Avatar Card Carousel widget.
- Adjust the card background color in the Widget Color Customization section so the border and background work together as a cohesive visual style.
- Preview your Avatar Card Carousel widget on both desktop and mobile breakpoints to confirm the border renders correctly at all screen sizes.
- Copy the updated embed code from the widget’s Embed tab and replace the existing snippet on your site to publish the new border styling live.