Why: The Content Grid block allows you to display various types of content in an organized and visually appealing way. By configuring it effectively, you can enhance your app's user experience and help your subscribers find the content they love quickly.
Navigate: App Station > Page Builder > Add Block > Content Grid
Quick Start
Click Add Block in the Page Builder.
Select Content Grid from the block options.
Choose the content type you want to display (e.g., Recipes, Meal Plans).
Configure your layout (Grid or List) and set any filtering options.
Click Save to apply your changes.
Overview
The Content Grid block is a versatile tool for displaying different content types, including recipes, meal plans, resources, challenges, and blog posts. You can choose between grid or list layouts, apply filters, and customize the appearance of content cards.
Key Features
Multiple Content Types: Display a variety of content types in one block.
Layout Modes: Choose between grid (columns) or list (compact rows) layouts.
Search & Filtering: Enable search functionality with advanced filtering options.
Card Templates: Customize how each content card appears.
Animation Effects: Add engaging entrance animations as items scroll into view.
Live Preview: See real-time updates as you configure the block.
Configuration
Basic Properties
When setting up your Content Grid block, you can configure the following basic properties:
Content Type: Choose the type of content to display (e.g.,
RECIPE,MEAL_PLAN).Layout: Select either
gridorlistfor how content will be displayed.Title: Optionally add a header title above the content grid.
Limit: Set the maximum number of items to display (leave empty to show all).
Card Size: Choose the size of the cards (e.g.,
medium,small,large).
Card Size Options
The cardSize property determines how many columns will display at different screen sizes:
Compact: Maximum density, ideal for large catalogs.
Small: Dense browsing with readable cards.
Medium: Balanced layout for most uses (default).
Large: For featured content with larger images.
Feature: Showcase sections with larger cards.
Filtering Properties
You can filter the content displayed in the grid using:
Category ID: Filter by specific category.
Tags: Filter by tag IDs to narrow down content.
Sort By: Choose how to sort the content (e.g.,
newest,popular).Featured First: Optionally show featured items at the top.
Search Properties
To enhance user experience, you can enable search functionality:
Enable Search: Turn on search capabilities for users.
Show Advanced Filters: Allow users to access advanced filtering options.
Search Placeholder: Customize the placeholder text in the search input.
Show Sort: Display a sorting dropdown when search is enabled.
Animation Properties
Add visual interest with entrance animations:
Animation Enabled: Toggle animations on or off.
Animation Type: Choose from various animation styles (e.g.,
fadeInUp).Animation Duration: Set how long the animation lasts.
Animation Stagger Delay: Control the delay between animations for each item.
Layout Modes
Grid Layout
When using the grid layout, items are displayed in a responsive grid format. The cardSize property controls how many columns are shown based on the screen size.
List Layout
In list layout, items are displayed in a single column, optimized for scanning and reading. The cardSize property is not applicable in this layout.
Related Features
Card Template System: Learn how to customize the appearance of your content cards.
Page Builder System: Explore how to use the Page Builder to create and manage your app's layout.