The CMS uses a powerful block system that allows you to create engaging, professional websites using modular building blocks. This comprehensive guide covers all 21 block types available in the system.

Think of blocks as LEGO pieces for your website:

• Modular Design: Each block serves a specific purpose
• Drag and Drop: Easily rearrange blocks to change your layout
• Consistent Styling: Blocks automatically match your brand's design
• Responsive: All blocks work perfectly on mobile, tablet, and desktop
• SEO Optimized: Blocks are built with search engine optimization in mind
• Fade-In Animations: Most blocks support fade-in effects as users scroll

Navigation blocks form the structure of your website. There are two types:

Purpose: Folders organize your site's navigation hierarchy. They can contain other folders and pages, creating a nested structure for your content.

Use Cases:

• Creating main navigation sections (e.g., Services, About Us, Resources)
• Organizing related pages together
• Building multi-level navigation menus

Key Features:

• Can contain both folders and pages
• Automatically generates navigation menus
• Supports SEO metadata (title, description, keywords)
• Can be published or kept as draft

Example: A "Services" folder containing "Roofing", "Siding", and "Windows" pages.

Purpose: Pages are the primary content containers in your website. They hold all the content blocks that visitors see.

Use Cases:

• Creating landing pages
• Building service pages
• Crafting blog posts or articles
• Designing contact pages

Key Features:

• Can contain any content block type
• Full SEO control (meta title, description, keywords)
• Unique URL slug
• Publish status control
• Supports all content blocks listed below

Example: A "Roof Repair" service page containing headers, text, images, and a lead form.

Content blocks are the building blocks you use to create engaging pages. Each block type serves a specific purpose and can be combined in creative ways.

Purpose: Headers create semantic structure for your content and are crucial for SEO. They range from H1 (most important) to H6 (least important).

Use Cases:

• Page titles (H1)
• Section headings (H2)
• Subsection headings (H3-H6)
• Creating visual hierarchy

Key Features:

• Six heading levels (H1-H6)
• Custom text and background colors
• Container styling options
• Fade-in animation support

SEO Best Practice: Use headers hierarchically - H1 for page title, H2 for main sections, H3 for subsections, etc. Don't skip levels!

Purpose: Rich Text blocks are the primary way to add formatted text content to your pages. They provide a WYSIWYG editor for easy content creation.

Use Cases:

• Body copy and paragraphs
• Formatted text with bold, italic, underline
• Lists (bulleted and numbered)
• Blockquotes
• Inline links

Key Features:

• Full WYSIWYG editor
• Text formatting (bold, italic, strikethrough)
• Lists and blockquotes
• Inline code blocks
• Keyboard shortcuts (CMD/CTRL-B for bold, CMD/CTRL-I for italic)
• File attachments (use sparingly)

Best Practice: Use Rich Text for body content and Header blocks for headings to maintain proper semantic structure.

Example: Formatted body text with lists and emphasis.

Purpose: Media blocks display images and videos uploaded directly to the site. They support advanced features like cropping, filters, and Lytho integration.

Use Cases:

• Hero images
• Product photos
• Before/after images
• Video content
• Gallery images (combine with Collection block)

Key Features:

• Upload images and videos
• Import from Lytho DAM
• Advanced image cropping and filters
• Custom width and height
• Captions
• Alignment options (left, center, right)
• Fade-in animations

Pro Tip: Use the Image Editor to crop and apply filters before publishing. See the Image Editor guide for details.

Purpose: Collections are container blocks that organize other blocks into various layouts. They're incredibly versatile and powerful.

Collection Types:

• Columns: Display blocks side-by-side in responsive columns (great for feature grids, service showcases)
• Rows: Stack blocks vertically with consistent spacing (great for FAQs, step-by-step guides)
• Carousel: Auto-rotating slideshow, 1 slide at a time (great for hero images, testimonials)
• Slider: Manual navigation with arrows, show N items at a time (more versatile than carousel for various block types)

Collection Sources:

• Manual: Manually add blocks as children of the collection
• Content Collections: Link to reusable content collections via slug (cross-brand stable)
• Template (Dynamic): Uses page request URI to match to a content collection (used in templates)
• Services: Auto-populate from your brand's services (with optional filtering)
• Locations: Auto-populate from your brand's locations
• Google Import: Import content from Google Docs

Use Cases:

• Image galleries (carousel or slider)
• Feature comparisons (columns)
• Testimonial rotators (carousel)
• Service showcases (columns or rows)
• Before/after sliders
• Team member profiles (columns)
• FAQ sections (rows)

Key Features:

• Can contain most other block types
• Auto-populate from multiple sources
• Configurable duration for carousels (milliseconds)
• Shadow effects and peek effects (slider)
• Custom background colors
• Random or sequential ordering
• Responsive column counts (desktop vs mobile)

Pro Tip: Collections can contain other collections for complex layouts!

This example shows a 2-column collection with manual content. The collection will display the child blocks side-by-side on desktop and stack them on mobile.

Purpose: CTA (Call-to-Action) buttons are clickable elements that direct users to take specific actions.

Use Cases:

• "Get a Quote" buttons
• "Learn More" links
• "Contact Us" actions
• Navigation to other pages
• External links

Key Features:

• Custom button text
• Any URL (internal or external)
• Automatic brand styling
• Fade-in animations

Purpose: Lead forms are the heart of the site, capturing visitor information and converting them into potential customers.

Form Types:

• Single-Step: All fields shown at once (simple, fast)
• Multi-Step Wizard: Progressive disclosure for better conversion (recommended)

Display Types:

• Popup Modal: Button triggers a modal form
• Inline: Form embedded directly in the page

Key Features:

• Multiple form variants for A/B testing
• Dynamic fields without database changes
• Conditional logic (show/hide steps based on answers)
• Interstitial pages (information between steps)
• Google Places address autocomplete
• Salesforce integration
• Conversation tracking

Pro Tip: Use multi-step wizards with conditional logic for the best conversion rates. See the Lead Form Variants guide for advanced features.

Purpose: Service blocks display brand services with details, descriptions, and call-to-action buttons.

Use Cases:

• Service pages
• Service listings
• Feature showcases
• Product displays

Key Features:

• Links to brand service records
• Automatic service details
• Service descriptions
• CTA buttons
• Combine with Collections for service grids

Best Practice: Use Collection blocks with auto-populate to automatically display all your brand's services.

Purpose: Location blocks display brand locations with address, contact information, and embedded maps.

Use Cases:

• Contact pages
• Location finders
• Office listings
• Service area displays

Key Features:

• Links to brand location records
• Address display
• Phone and email
• Embedded Google Maps
• Hours of operation
• Combine with Collections for multi-location displays

Purpose: Case study blocks display customer success stories and project showcases to build credibility and demonstrate work quality.

Use Cases:

• Customer testimonials with context
• Project showcases
• Before/after stories
• Success stories

Key Features:

• Hero title
• Detailed description
• Can contain child blocks for images, quotes, etc.
• Fade-in animations

Best Practice: Combine with Media blocks and Quote blocks inside Collections for compelling case studies.

Purpose: Profile blocks display team member information including photos, names, titles, and bios.

Use Cases:

• Team pages
• About Us pages
• Leadership showcases
• Staff directories

Key Features:

• Profile photo
• Name and title
• Bio/description
• Combine with Collections for team grids

Purpose: Quote blocks display customer testimonials and reviews in an attractive, formatted way.

Use Cases:

• Customer testimonials
• Reviews
• Pull quotes
• Social proof

Key Features:

• Quote text
• Attribution (name, company)
• Styled blockquote formatting
• Combine with Collections for testimonial carousels

Best Practice: Use Collection carousels to rotate through multiple testimonials automatically.

Purpose: Embed blocks allow you to include videos from YouTube, Vimeo, and other embeddable content.

Use Cases:

• YouTube videos
• Vimeo videos
• Video tutorials
• Product demonstrations

Key Features:

• YouTube and Vimeo support
• Responsive video players
• Fade-in animations

Example URL: https://www.youtube.com/embed/VIDEO_ID

Purpose: Map blocks embed Google Maps to show specific addresses or locations.

Use Cases:

• Office locations
• Service areas
• Event venues
• Directions

Key Features:

• Google Maps integration
• Address-based display
• Interactive maps
• Fade-in animations

Purpose: Hours of Operation blocks display business hours in a consistent, easy-to-read format.

Use Cases:

• Location pages
• Contact pages
• Office hours
• Service availability

Key Features:

• Seven-day week display
• Open/close times for each day
• Closed day support
• Formatted time display

Purpose: Dynamic Number blocks display animated counting numbers that increment from a starting value to a final value, creating engaging visual statistics.

Use Cases:

• Statistics ("500+ Projects Completed")
• Achievements ("25 Years in Business")
• Social proof ("10,000+ Happy Customers")
• Key metrics

Key Features:

• Animated counting effect
• Custom start and end numbers
• Prefix and suffix support ($, %, +, etc.)
• Configurable animation speed
• Custom text and background colors
• Label text

Best Practice: Use Collections with columns to display multiple statistics side-by-side.

Purpose: In My Area blocks display location-specific content based on the visitor's location or selected area.

Use Cases:

• Service area pages
• Location-specific offers
• Regional content
• Local SEO pages

Key Features:

• Location-aware content
• Dynamic content based on area
• SEO optimization for local search

Purpose: Spacer blocks add vertical or horizontal spacing between other blocks to improve layout and readability.

Use Cases:

• Adding breathing room between sections
• Creating visual separation
• Adjusting layout spacing
• Fine-tuning page design

Key Features:

• Custom height (e.g., 50px, 100px, 10vh)
• Custom width (e.g., 100%, 50px)
• Flexible units (px, %, vh, vw)

Best Practice: Use spacers sparingly - most blocks have built-in spacing. Spacers are best for fine-tuning specific layouts.

Purpose: Line Break blocks add a horizontal rule (line) to visually separate content sections.

Use Cases:

• Section dividers
• Visual breaks between content
• Separating different topics

Key Features:

• Horizontal rule display
• Automatic brand styling
• Simple, clean separation

Purpose: FAQ (Frequently Asked Questions) blocks display questions with expandable answers, perfect for help sections and common inquiries.

Use Cases:

• FAQ pages
• Product information
• Service details
• Help sections
• Common customer questions

Key Features:

• Question text field
• Rich text answer with full formatting
• Optional icon for visual categorization
• Expandable/collapsible answer display
• Configurable default state (expanded or collapsed)
• Bootstrap icon picker for easy icon selection

Display Behavior:

• Standalone: Shows question with expand/collapse button
• In Collections (Columns): Card layout with icon and question in header
• In Collections (Carousel/Slider): Full display with icon, question, and complete answer

Best Practice: Use Collection blocks to group related FAQs together. Assign different icons to different FAQ categories for visual organization.

Purpose: Raw HTML blocks allow you to add custom HTML code directly to your page.

Use Cases:

• Custom widgets
• Third-party integrations
• Advanced formatting
• Special layouts

Key Features:

• Direct HTML input
• Full HTML support
• Custom styling

⚠️ Warning: Use Raw HTML blocks as a last resort. They can introduce security risks if not used carefully. JavaScript injection is a concern. Prefer other block types when possible.

Purpose: Text blocks provide simple, plain text display without formatting options.

Use Cases:

• Simple text content
• Plain text displays
• Minimal formatting needs

Key Features:

• Plain text input
• No formatting options
• Simple and fast

Note: For most use cases, Rich Text blocks are preferred as they offer more flexibility.

Purpose: Content Collections allow you to create reusable collections of content (like team profiles, customer testimonials, case studies, FAQs) that can be displayed across multiple pages.

How It Works:

1. Create a Content Collection (e.g., "Leadership Team")
2. Choose the block type (Profile, Quote, Case Study, FAQ, etc.)
3. Add items to the collection using inline forms
4. Reference the collection from Collection blocks on any page
5. Updates to the collection automatically appear on all pages using it

Use Cases:

• Team Profiles: Create once, display on About page, Contact page, etc.
• Customer Testimonials: Manage testimonials centrally, show different subsets on different pages
• FAQs: Organize FAQs by category, display relevant FAQs on service pages
• Case Studies: Showcase projects across multiple landing pages

Key Features:

• Centralized content management
• Reusable across multiple pages
• Drag-and-drop reordering
• Works with any content-manageable block type
• Automatic cache invalidation when updated

How to Create:

1. Navigate to Content Collections in your user menu
2. Click New Content Collection
3. Enter a name and select block type
4. Add items using the inline form
5. Reorder items via drag-and-drop
6. Save

How to Use on Pages:

1. Add a Collection block to your page
2. Set source to Content Collection
3. Select your collection from the dropdown
4. Choose display type (columns, carousel, slider, rows)
5. Configure ordering (normal or random)
6. Publish

Best Practice: Use Content Collections for any content that appears on multiple pages or needs centralized management. This ensures consistency and makes updates much easier.

Purpose: Templates (also called Super-Blocks) are pre-built, reusable block compositions that help you maintain consistent design patterns across your site.

What Are Templates?

Templates are complete block structures (like a hero section with header, image, and CTA button) that can be applied to pages with a single click. When you apply a template, it creates a copy of all the blocks in that template, which you can then customize for your specific page.

Use Cases:

• Hero Sections: Consistent header + image + CTA layout
• Service Showcases: Pre-built service grid with icons and descriptions
• Contact Sections: Standard contact form + map + hours layout
• Testimonial Sections: Quote carousel with consistent styling
• Feature Grids: 3-column feature comparison layouts

Key Features:

• One-click application to pages
• Blocks become independent after application (not linked)
• Icon picker for easy template identification
• Organized in dedicated Templates folder
• Only Root Admins can create/edit templates
• All users can apply templates to their pages

How to Apply a Template:

1. Edit any page or folder
2. Click Add Block
3. Look for templates in the block library (marked with their custom icons)
4. Click the template you want
5. The template's blocks are copied to your page
6. Customize the content as needed

Template Organization:

All templates are stored in a special Templates folder visible in the Navigation panel. This folder is universal (shared across all brands) and only accessible to Root Admins for editing.

Best Practice: When you find yourself creating the same block structure repeatedly, ask your Root Admin to create a template for it. This ensures consistency and saves time.

Block Selection:

• Use the right block for the job - each block type is optimized for specific content
• Prefer Rich Text over Text blocks for formatted content
• Use Header blocks for headings, not inline headers in Rich Text
• Combine blocks creatively with Collections
• Use Content Collections for reusable content across multiple pages
• Apply Templates for consistent design patterns

SEO:

• Use proper header hierarchy (H1 → H2 → H3, etc.)
• Add descriptive captions to Media blocks
• Fill in meta descriptions for Pages
• Use semantic block types (Header, not styled Rich Text)

Performance:

• Optimize images before uploading (use Image Editor)
• Use appropriate image sizes
• Limit the number of blocks per page for faster loading
• Use Collections to organize related content

User Experience:

• Use fade-in animations sparingly for visual interest
• Maintain consistent spacing with Spacer blocks
• Group related content with Collections
• Use CTA buttons to guide user actions
• Test on mobile devices - all blocks are responsive
• Group related FAQs in collections for easy navigation

Now that you understand the block system, explore these related guides:

• Content Collections: Learn how to create and manage reusable content
• Templates: Discover how to use pre-built block compositions
• Image Editor: Learn how to crop and apply filters to images
• Lytho Image Import: Import assets from your DAM system
• Lead Form Variants: Create advanced multi-step forms with conditional logic
• Creating and Managing Pages: Build complete pages using blocks