Using Grids and Carousels

Grids and carousels help you organize content in visually appealing layouts. Here's how to use them.

Understanding the Difference

Grids

• Display items in a fixed arrangement
• All items visible at once
• Best for: Galleries, team pages, feature comparisons

Carousels (Columns Block)

• Items scroll horizontally
• One or few items visible at a time
• Best for: Testimonials, product showcases, featured content

Adding a Grid

Step 1: Add Grid Block

Click "+" to add content

Go to Basic Blocks tab

Select Grid from the Layout section

Step 2: Choose Layout

When you add a grid, you can select:

• Number of columns (2, 3, 4, etc.)
• Layout pattern
• Gap between items

Step 3: Add Content to Cells

Each grid cell can contain:

• Images - Photos, graphics
• Buttons - CTAs, links
• Videos - Embedded or uploaded
• AI Components - Custom generated content
• Text - Rich text content

Click the "+" in any cell to add content.

Adding a Carousel

Step 1: Add Columns Block

Click "+" to add content

Go to Basic Blocks tab

Select Carousels from the Layout section

Step 2: Configure Columns

• Set the number of columns (items shown at once)
• Add content to each column
• Carousel navigation appears automatically

Step 3: Add Content to Each Column

Each column can contain the same types as grids:

• Images
• Buttons
• Videos
• AI Components
• Text

Using AI for Layouts

AI-Generated Grids

Ask AI to create grid layouts:

"Create a 3-column grid showing our team members with photos, names, and titles"

"Build a 4-column feature comparison grid with icons and descriptions"

"Design a 2x2 grid gallery for portfolio images"

AI-Generated Carousels

Ask AI for carousel designs:

"Create a testimonial carousel with customer quotes and photos"

"Build a product showcase carousel with images and buy buttons"

"Design a logo carousel showing partner brands"

Grid vs Carousel: When to Use

Use Grids When:

• All items should be visible together
• Content is for comparison
• You have a fixed number of items
• Items are similar in importance

Use Carousels When:

• You have many items
• Items should be featured one at a time
• Space is limited
• Content is sequential (testimonials, steps)

Customizing Layouts

Adjusting Grid Settings

• Columns: How many items per row
• Gap: Space between items
• Cell alignment: How content aligns within cells

Adjusting Carousel Settings

• Visible columns: Items shown at once
• Navigation: Arrow buttons appear automatically
• Width: Individual item widths

Design Tips

For Grids

• Keep items consistent in size
• Use the same style for all cells
• Consider mobile view (grids often stack)
• Balance visual weight across cells

For Carousels

• First item should hook attention
• Keep similar content types together
• Test navigation on mobile
• Don't overload with too many items

Mobile Behavior

Grids on Mobile

• Columns typically reduce on smaller screens
• 4 columns → 2 columns on tablet → 1 on phone
• Test responsive behavior in device preview

Carousels on Mobile

• May show fewer items
• Swipe gestures for navigation
• Ensure arrows are tap-friendly

Common Issues

Grid Items Misaligned

• Check that all content is similar height
• Use consistent image aspect ratios
• Add padding consistently

Carousel Not Scrolling

• Ensure you have more items than visible columns
• Check if JavaScript is enabled
• Refresh the page