Feedspace Home Dashboard

How to Create a Masonry Widget in Feedspace

Last updated on October 9, 2025

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

Go to your Feedspace Dashboard and log in using your credentials.

Step 2 – Navigate to Widgets

  • From the left sidebar, click on Share Reviews → Widgets.
  • Then select Masonry as your widget type.
Left Side Bar: Select Widgets

Step 3 – Select Reviews

Choose the reviews you want to include in your Masonry layout. You can select reviews from different sources or add them manually.

Select Reviews Tab

Step 4 – Customize Widget Design

After selecting your reviews, click Customize to open the Widget Design Settings panel.

Select Customize Tab

Widget Design Settings

Step 5 – Configure Layout & Spacing

The Masonry widget automatically arranges reviews in different card heights for a natural, staggered effect. You can adjust spacing and borders to fine-tune the look.

Branding

Step 6 – Manage Branding Options

If you’re on a Pro plan, you can toggle Remove Feedspace Branding to hide the Feedspace logo.

Widget Content Design

Step 7 – Choose What to Display

  • Display Review Date: Show when the review was posted.
  • Display Review Ratings: Show star ratings for each review.
  • Enable ‘Read More’: Trims longer reviews and adds a “Read More” link.
  • Enable Dark Mode: Apply a dark theme to the widget background.

Border and Visual Design

Step 8 – Enable and Customize Borders

  • Toggle Show Border to add a border around each review card.
  • Adjust:
    • Thickness: Choose from 1px to 5px.
    • Radius: Define how rounded you want the corners.
    • Color: Pick your preferred border color (default #E5E7EB).
  • Optionally, toggle Show Shadow for depth.

Color Settings

Step 9 – Set Custom Colors

Personalize your widget with brand colors:

  • Primary Text Color: #1f2937
  • Secondary Text Color: #6b7280
  • Card Background Color: #f9fbff
  • Card on Hover Color: #d3d5d8
  • Star Rating Color: #FACC15
  • Star Rating Border Color: #EAB308

Advanced Options

Step 10 – Add Custom CSS

For further personalization, enable Add Custom CSS (Pro feature) and apply your own styling rules.

Step 11 – Review Order

  • Preview how the widget will look on your site.
  • Reorder reviews if needed under the Review Order tab.
Select Review Order Tab

Step 12 – Save and Embed

Once all settings are configured:

  1. Click Save & Next.
  2. Copy the embed code generated.
  3. Paste it into your website HTML or use your CMS integration (like WordPress, Webflow, or Wix) to publish.
Embed Widget to Your Website

The Masonry widget works best for pages where you want to showcase a variety of reviews in an aesthetically balanced and responsive grid. Ideal for testimonials, product feedback, or client wall sections.

You might also find helpful

How to Create a Widget in Feedspace

Overview Widgets in Feedspace allow you to showcase your collected reviews directly on your website. They are easy to set up, customizable, and come in different layouts to match your site’s design. This guide walks you through the steps to create your first widget and explains all the available widget...

How to Create a Carousel Widget in Feedspace

Overview The Carousel widget in Feedspace lets you display multiple reviews in a continuously sliding format. You can enable autoplay, customize speed, and fine-tune design elements such as border, background color, and text colors. It’s a great way to keep your testimonials engaging and visually dynamic. How to Access Step...

How to Create a Strip Slider Widget in Feedspace

Overview The Strip Slider widget in Feedspace allows you to showcase your reviews in a single, horizontally scrolling line — perfect for website headers, footers, or testimonial sections that need a minimalist design. You can adjust autoplay speed, borders, and colors to match your brand style. How to Access Step...