Card Builder

The Card Builder is a visual, drag-and-drop editor that lets you design exactly how each individual item looks inside your Grids. Instead of writing PHP templates or CSS by hand, you construct your cards using dynamic data blocks.

How It Works

Drag & Drop

Drag blocks like 'Image', 'Title', or 'Price' onto your visual canvas.

Style Visually

Use the Inspector panel to adjust fonts, colors, padding, and borders.

Apply Everywhere

Assign the card to a Grid. Updating the card updates your whole site instantly.

Available Blocks & Use Cases

🖼️ Featured Image

Displays the post thumbnail or WooCommerce product gallery image. Automatically handles lazy loading and responsive sizing.

Use Case: 🛍️ Use 'Aspect Ratio: 1/1' to force all e-commerce product images to be perfect squares, preventing messy layouts.

📌 Dynamic Title

The name of the post or product. You can customize the HTML tag (e.g., H2 vs H3) for SEO.

Use Case: 🔗 Turn on the 'Make Clickable Link' toggle so clicking the title takes the user to that product's single page.

📝 Post Excerpt

A brief summary of the content. You can set a strict word limit to keep cards uniform.

Use Case: 📰 News Blogs: Set the word limit to 20 words and add a '...Read More' suffix.

💰 WooCommerce Price & Rating

Two dedicated blocks that automatically pull the live product price (including Sale strikethroughs) and the 5-star customer rating.

Use Case: ⭐ Drag the Rating block right under the Title to instantly build social-proof for your store.

🏷️ Custom Meta & Taxonomies

Pulls raw data from ACF (Advanced Custom Fields) or standard taxonomies and displays them as text or colored badges.

Use Case: 🚗 Real Estate: Display the 'Bedrooms' ACF field, or show '$' badges for the 'Price Tier' taxonomy.

🎯 Call to Action Button

A fully customizable button block with padding, colors, hover states, and dynamic linking.

Use Case: 🛒 Create an 'Add to Cart' button or a 'View Property' button directly on the card.

💻 Custom HTML

An advanced block that lets you write raw HTML/CSS and inject dynamic tags directly into the code.

Use Case: 🎨 Wrap a specific ACF field in a custom SVG icon or build a highly-complex grid layout that standard blocks can't achieve.

Styling & Controls

When you click on any block, the Inspector sidebar reveals specific design controls so you never have to write CSS:

Typography

● Font Family (Google Fonts)
● Font Size (px, em, rem)
● Font Weight
● Line Height
● Letter Spacing

Spacing & Dimensions

● Padding (Top, Right, Bottom, Left)
● Margin (Individually or Linked)
● Width & Max-Width
● Aspect Ratios

Colors & Borders

● Text Color
● Background Color / Gradients
● Border Width & Style
● Border Radius (Rounded Corners)

Leveraging Dynamic Tags

Inside standard text fields or the Custom HTML block, you can use curly bracket tags that FilterX automatically replaces with live data when the card renders.

{{post.title}} — Outputs the post title

{{post.permalink}} — Outputs the URL to the post

{{meta.company_name}} — Grabs a specific custom field value

{{wc.price}} — Outputs formatted WooCommerce pricing

← Grids Layouts Indexer & Auto-Sync →