Overview
The Masonry widget displays your reviews in a Pinterest-style staggered grid, arranging cards across multiple columns at varying heights so visitors can take in many reviews at once. Because each card floats independently in that open grid layout, the card background color is one of the most visible design choices you can make. It fills the surface of every review card and defines how those cards read against your page background, whether you want them to blend in with a subtle neutral tone or pop with a bold brand color.
The Card Background Color picker is found in the Widget Color Customization section of the Design tab. On the Masonry widget a Card on Hover Color picker also appears alongside it, letting you set a separate fill color that activates when a visitor hovers over a card. Together these two settings give you precise control over the at-rest and interactive state of every card in the grid.
How to Change the Card Background Color for Your Masonry Widget
Step 1: Open the Widgets Section
Log in to your Feedspace account and navigate to the Widgets section from the main sidebar. You will see a list of all the widgets you have created.
Step 2: Edit Your Masonry Widget
Locate the Masonry widget you want to update and click the Edit button next to it. This opens the widget editor for that specific widget.
Step 3: Go to the Design Tab
Inside the widget editor, click the Design tab at the top of the panel. This tab contains all visual customization options for your Masonry widget.
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 all color pickers for the widget, including the card colors.
Step 5: Set the Card Background Color
Click the Card Background Color picker to open the color selector. Choose your desired color by entering a hex code, using the color wheel, or adjusting the RGB sliders. The Masonry grid preview will update in real time so you can see how the fill looks across all the staggered cards. If you also want to define the color that appears when a visitor hovers over a card, click the Card on Hover Color picker directly below it and select a second color.
Step 6: Save Your Changes
Once you are satisfied with the card background color, click Save to apply the change. Your Masonry widget will now display every review card with the new fill color wherever the widget is embedded.
What You Can Do Next
- Set a contrasting Card on Hover Color so visitors get a clear visual response when they mouse over any card in the Masonry grid.
- Adjust the text color on your Masonry widget to ensure it remains legible against the new card background color you just applied.
- Preview your Masonry widget on both light and dark page backgrounds to confirm the card fill color works well in all the contexts where it is embedded.
- Explore the other options in the Widget Color Customization section, such as the widget background and rating star colors, to create a fully cohesive look across your Masonry widget.
You might also find helpful
How Do I Change the Text Color on My Masonry Widget in Feedspace?
Overview The Masonry widget displays your reviews in a Pinterest-style staggered grid, arranging cards across multiple columns of varying heights so visitors can scan many testimonials at once. Because cards differ in height and density, the text inside each card must stand out clearly against whatever background color is set,...
How to Create a Masonry Widget in Feedspace
Overview The Masonry widget in Feedspace arranges your reviews in an elegant grid layout of varying card sizes, similar to Pinterest-style walls. Itβs perfect for showcasing multiple reviews together while maintaining a modern, responsive design that automatically adjusts across devices. How to Access Step 1 – Log in to Feedspace...
How Do I Customize the Design of My Widget in Feedspace?
Overview Feedspace widgets come with a powerful Design tab that lets you tailor every visual aspect of your widget. From card colors and fonts to dark mode and call-to-action buttons, you can fully customize the look to match your website’s brand without writing any code. How to Customize the Widget...