Overview
Blocks are reusable content components that you add to pages and posts. They provide structured layouts for common content patterns like heroes, pricing tables, and testimonials.
TallCMS includes 17 built-in blocks organized into categories, plus 9 additional Pro blocks available with a TallCMS Pro license.
Adding Blocks
- Edit a page or post
- Click inside the content editor
- Click the + Add Block button (or type
/to search) - Select a block from the picker
- Fill in the block's fields in the modal
- Click Save to add the block
Block Picker
The block picker organizes blocks by category:
- Content: Hero, Content, CTA, Features, Pricing, Divider
- Media: Media Gallery, Document List, Parallax
- Social Proof: Testimonials, Team, Logos, Stats
- Dynamic: Posts, FAQ, Timeline
- Forms: Contact Form
- Pro: Accordion, Tabs, Table, Comparison, Before/After, Video, Counter, Code Snippet, Map
Use the search box to quickly find blocks by name or keyword.
Block Reference
Click any block for detailed documentation and live examples.
Content Blocks
| Block | Description |
|---|---|
| Hero | Full-width section for page headers and landing pages |
| Content | Rich text section with title and body |
| Call to Action | Promotional section to drive conversions |
| Features | Grid layout for product or service features |
| Pricing | Pricing table with plan comparison |
| Divider | Visual separator between sections |
Media Blocks
| Block | Description |
|---|---|
| Media Gallery | Image and video gallery with lightbox |
| Document List | Downloadable documents from collections |
| Parallax | Full-width section with parallax effect |
Social Proof Blocks
| Block | Description |
|---|---|
| Testimonials | Customer testimonials and reviews |
| Team | Team member profiles |
| Logos | Client or partner logo showcase |
| Stats | Key metrics and statistics |
Dynamic Blocks
| Block | Description |
|---|---|
| Posts | Display blog posts from your site |
| FAQ | Frequently asked questions accordion |
| Timeline | Chronological events or milestones |
Form Blocks
| Block | Description |
|---|---|
| Contact Form | Customizable contact form |
Pro Blocks
Pro blocks require a TallCMS Pro license.
| Block | Description |
|---|---|
| Accordion | Collapsible content sections for FAQs and lists |
| Tabs | Tabbed content sections with rich text and icons |
| Table | Data tables with headers, highlighting, and styling |
| Comparison | Side-by-side feature comparison for plans or products |
| Before/After | Interactive slider for image or text comparisons |
| Video | Embed YouTube, Vimeo, or self-hosted videos |
| Counter | Animated number counters with scroll trigger |
| Code Snippet | Syntax-highlighted code with copy button |
| Map | Interactive maps from OpenStreetMap, Google, or Mapbox |
Block Settings
Most blocks share common settings:
Content Width
Controls how wide the block content appears:
- Inherit from Page: Uses the page's width setting
- Narrow (672px): Focused reading
- Standard (1152px): Default for most content
- Wide (1280px): Image-heavy layouts
- Full Width: Edge-to-edge
Background Options
Many blocks support background customization:
- Solid colors (using theme palette)
- Images with overlay
- Gradient options
Alignment
Control text and content alignment:
- Left, Center, Right
- Some blocks have vertical alignment too
Tips for Using Blocks
Start with HeroMost pages benefit from a Hero block at the top to set the tone.
Alternate block typesVary your blocks to create visual interest. Don't stack multiple Content blocks without variety.
Use consistent stylingStick to 2-3 background colors throughout your site for a cohesive look.
Preview oftenUse the Preview button to see how blocks look on the frontend.
Common Pitfalls
"Block looks different in preview"Admin preview shows structure but may not match exact theme styling. Always check the frontend.
"Images are blurry"Upload high-resolution images. Most blocks work best with images at least 1200px wide.
"Block not saving"Ensure all required fields are filled. Required fields are marked with an asterisk.
Next Steps
- Block development guide - Create custom blocks
- Managing media
- Page settings reference