Overview
The Avatar Blocks widget displays your testimonials in a structured block grid, placing each reviewer’s avatar alongside their review text in a clean, side-by-side card layout. Because all cards are visible at once in this grid, visitors can feel visually overwhelmed when scanning multiple testimonials simultaneously.
The Hover Fadeout Effect addresses this directly. When a visitor moves their cursor over one review card, the surrounding cards fade slightly in opacity, drawing attention to the card being hovered. This creates a natural focus highlight that guides the visitor’s eye and encourages them to read each testimonial individually, rather than skimming the entire grid at once. The result is a more engaging, polished experience that makes your social proof feel interactive and intentional.
This option is available exclusively in the Avatar Blocks widget under the Layout Design section of the Design tab.
How to Enable the Hover Fadeout Effect for Your Avatar Blocks Widget
Step 1: Open the Widgets Section
Log in to your Feedspace account. In the left-hand navigation, click Widgets to open your list of saved widgets.
Step 2: Edit Your Avatar Blocks Widget
Locate the Avatar Blocks widget you want to update. Click the Edit button (or the pencil icon) next to that widget to open 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 and layout customisation options for your Avatar Blocks widget.
Step 4: Find the Layout Design Section
Scroll down within the Design tab until you reach the Layout Design section. This section contains display options specific to how the Avatar Blocks grid is rendered on the page.
Step 5: Enable the Hover Fadeout Effect Toggle
Inside the Layout Design section, locate the Enable Hover Fadeout Effect toggle. Click the toggle to switch it on. When enabled, the toggle will appear highlighted or active. Non-hovered review cards will now fade slightly whenever a visitor hovers over any card in the grid, creating a clear visual focus on the card being viewed.
Step 6: Save and Preview Your Widget
Click Save to apply your changes. Then use the preview option or visit the page where your Avatar Blocks widget is embedded to confirm the fadeout effect is working as expected when hovering over individual review cards.
What You Can Do Next
- Adjust the card background color on your Avatar Blocks widget to complement the fadeout effect and strengthen the visual contrast between hovered and non-hovered cards.
- Explore other Layout Design options in the Design tab to further refine how your Avatar Blocks grid is arranged and spaced on the page.
- Embed or update your Avatar Blocks widget on your website and test the hover interaction on a live page to see how real visitors experience the focus effect.
- Review other widget design customisation options in Feedspace to ensure your Avatar Blocks widget matches your brand’s color scheme and typography across the full card layout.
You might also find helpful
How Do I Change the Card Background Color on My Avatar Blocks Widget in Feedspace?
Overview The Avatar Blocks widget displays your testimonials in a structured block grid, placing each reviewer’s avatar alongside their review text in a clean, side-by-side layout. Each testimonial sits inside its own individual card, and the card background color defines the fill of that card container, framing the avatar and...
How to Create an Avatar Blocks Widget in Feedspace
Overview Feedspace’s Avatar Blocks widget displays your reviews in bold, grid-based cards where the reviewer’s profile picture takes centre stage. It’s a strong, visually balanced layout that works well on testimonial pages, pricing pages, and anywhere you want reviews to feel authentic and human. 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...