Understanding Content Section Types
Building Pages with Section Blocks
Instead of building pages from scratch with code, you can assemble them using pre-built section blocks. Think of it like building with LEGO - each piece serves a purpose and snaps together to create something beautiful.
The 'Add Section' Modal
This is your content toolbox. As shown in the screenshot, sections are organized into categories (tabs) at the top:
- Posts & Content - Display blog posts and articles
- Media & Images - Rich text, images, galleries, videos
- Call to Action - Buttons and conversion-focused elements
- Features & Stats - Feature lists, statistics, benefits
- Social Proof - Testimonials, reviews, logos
Posts & Content Sections (Detailed)
1. Posts Grid
What it looks like: A clean, organized grid of blog posts (typically 2-4 columns).
Description shown: '3-column grid of posts'
Best for:
- Blog listing pages
- News or article archives
- Portfolio showcases
Typical layout: Each post shows thumbnail image, title, excerpt, author, and date in a card format.
When to use: You want a structured, easy-to-scan presentation of multiple posts. Perfect for blog homepages or category pages.
2. Posts List
What it looks like: Vertical list of posts, one per row.
Description shown: 'Vertical list of posts'
Best for:
- News feeds
- Chronological updates
- Search results pages
Typical layout: Thumbnail on left, title and excerpt on right, stacked vertically.
When to use: You want to show many posts in a compact space. Users can quickly scroll through titles.
3. Posts Magazine
What it looks like: One large featured post + grid of smaller posts.
Description shown: 'Featured post with grid'
Best for:
- Editorial sites
- News portals
- Content-heavy blogs
Typical layout: Top story takes 50% of space with large image, supporting stories in grid below.
When to use: You have one hero article you want to feature prominently + related stories.
4. Posts Carousel
What it looks like: Horizontally scrolling slider of posts.
Description shown: 'Horizontal scrolling posts'
Best for:
- Featured/trending sections
- Related posts at bottom of articles
- Showcase sections
Typical layout: Cards slide left/right, usually showing 2-3 at a time with arrows or dots for navigation.
When to use: Limited vertical space but want to showcase many items. Creates visual interest with motion.
5. Posts Masonry
What it looks like: Pinterest-style layout where posts fit together like a puzzle.
Description shown: 'Pinterest style layout'
Best for:
- Visual blogs (photography, design, food)
- Mixed content types (some posts longer than others)
- Creative/artistic sites
Typical layout: Variable height cards arranged in columns, creating an organic, flowing appearance.
When to use: Content has varying lengths and you want a dynamic, visually interesting layout.
6. Posts Cards
What it looks like: Posts displayed as elevated cards with shadows.
Description shown: 'Cards with shadows'
Best for:
- Modern, clean designs
- Service pages
- Feature highlights
Typical layout: Each post in a distinct box with shadow, creating depth and separation.
When to use: You want clear visual distinction between items and a contemporary look.
7. Posts Minimal
What it looks like: Simple text-focused layout with minimal graphics.
Description shown: 'Clean, text-focused layout'
Best for:
- Professional/corporate sites
- Text-heavy content
- Fast-loading pages
Typical layout: Small thumbnails or none, emphasis on titles and excerpts.
When to use: Content quality matters more than visuals, or you want maximum reading speed.
8. Posts Overlay
What it looks like: Text overlaid on full-width images.
Description shown: 'Text over image'
Best for:
- Travel blogs
- Lifestyle content
- Visual storytelling
Typical layout: Large background image with title and excerpt text overlaid, usually with semi-transparent overlay for readability.
When to use: You have stunning imagery and want it to be the hero. Very engaging visually.
9. Category Tabs
What it looks like: Tabbed interface where clicking tabs shows different category content.
Description shown: 'Tabbed category browser'
Best for:
- Multi-topic sites
- News sites with sections (Sports, Politics, Tech)
- E-commerce with product categories
Typical layout: Horizontal tabs at top, content below changes when tab clicked.
When to use: You want to show content from multiple categories without page reloads.
Choosing the Right Section
Consider these factors:
- Content type: Do you have strong images? Use Overlay or Magazine. Text-focused? Use Minimal or List.
- Number of items: Many posts? Use Grid or List. Few? Use Cards or Magazine.
- Page purpose: Homepage? Use Magazine or Grid. Archive? Use List. Related posts? Use Carousel.
- Brand style: Modern/tech? Cards or Grid. Editorial? Magazine. Creative? Masonry.
- Mobile consideration: Carousels and Masonry can be tricky on mobile. Grid and List work everywhere.