Category Cloud Pills

The Category Cloud Pills is a dynamic, multi-colored navigation and filtering component designed to organize content topics into a modern, tactile cloud interface. Moving away from standard, boring text links or rigid drop-down menus, this widget uses smooth, rounded pill shapes embedded with minimalist iconography and an energetic color palette. It is the perfect choice for websites that need to present a varied taxonomy—like blog categories, project tags, or service sectors—with a high-end, user-friendly rhythm.

Design & Visual Aesthetic

The widget focuses on a highly interactive, non-linear composition that brings a playful yet professional energy to content filtering.

• Multi-Tone Color Harmonization: The standout feature is its intentional use of a cohesive, shifting color palette. By blending vibrant neon greens, rich emeralds, and deep forest tones, the pill cloud creates immediate visual interest without looking chaotic.
• Integrated UI Micro-Iconography: Each pill container houses a clean, technical vector icon alongside its text (such as charts for "Insights," arrows for "Growth," and checkmarks for "Review"). This provides immediate visual cues that enhance scannability and boost the overall app-like sophistication of the interface.
• Centered Fluid Stacking: The cloud layout uses a centered, organic wrapping logic. This subtle, offset arrangement feels natural and tactile, preventing the section from looking like a boxy, standard grid.

Core Features

• Dynamic Content Filtering: Built to function as an active navigation bridge, these pills can be configured to filter portfolio grids, blog index pages, or product categories instantly.
• Fully Flexible Tag Management: Easily add, remove, or rename pills through the Redesignee interface. The cloud automatically calculates the optimal wrapping spacing whether you host five tags or twenty.
• Lightweight Performance Engineering: Optimized to run flawlessly alongside the Squarespace Fluid Engine and WordPress, this widget relies on modern CSS layout properties rather than heavy, bloated scripts, maintaining excellent page speed scores.
• Touch-Optimized Mobile Stacking: On mobile screens, the pills scale beautifully and wrap into an easy-to-tap, finger-friendly cloud, maintaining large touch targets for a flawless mobile user experience.

Where to Use This Widget

This component is highly effective anywhere you need to help users sort through multiple topics or indices:

• Blog & Resource Index Headers: Place this cloud at the top of an insights or article library page to allow readers to jump straight to their topic of choice.
• Portfolio & Case Study Filters: Perfect for creative agencies to let visitors sort projects by capability (e.g., "Strategy," "Launch," "Systems").
• E-Commerce Product Tags: Cleanly organize shop sections or collections below a main header banner without cluttering the main navigation.
• Interactive Capabilities Sections: Use the cloud purely to showcase a brand's skills or tool stacks in a colorful, energetic layout rather than using standard bullet points.

How to install Category Cloud Pills to your website

Bring this layout to life on your website in just a few clicks.

Install on Squarespace

Edit visually using the extension or native blocks

+−

First, ensure you have pasted the global Redesignee connector script into your site's Code Injection settings. Once connected, you have two easy ways to build:

1. Native Block: Simply add the native Redesignee Widget Block directly from the fluid engine editor menu inside Squarespace.

2. Manual Markdown: Add a standard Markdown Block, paste your widget’s code snippet, and the Redesignee floating "Customize" button will automatically appear right over the block.

Both methods let you tweak settings, copy items, and design visually in real time. Saving your changes syncs the updates instantly to your live page.

See Squarespace installation guide

Install on WordPress

Connect natively via Gutenberg or Elementor

+−

Make sure you have the free Redesignee WordPress Plugin installed. If you are using Elementor, simply drag and drop the Redesignee widget from your sidebar. If you are using the Gutenberg Block Editor, click the " + " icon and select the Redesignee Block. Launch the Cloud Library directly inside your workspace, choose your customized template, and import it with a single click. It automatically inherits your theme fonts and styles!

WordPress plugin installation guide

Install on Other CMS as Code

Quick copy-and-paste for custom setups

+−

If you are using Webflow, Shopify, Wix, or a custom HTML site, click the "Export Widget" button on this page and ensure the platform selector is set to"HTML". Click "Copy" to copy the clean, un-nested source code snippet directly to your clipboard. Paste this code into any HTML component, Code Block, or Embed tool inside your website builder. All styles, animations, and scripts are self-contained and ready to run.