Using Blocks (Layers)

Layers is BreakMade’s extensive block library with 500+ professionally designed sections that you can mix and match to create unique page layouts.

Block Categories

• Headers & Navigation: Sticky headers, mega menus, mobile navs
• Hero Sections: Full-width, split layouts, video backgrounds
• Features & Benefits: Icon grids, feature lists, comparisons
• Pricing: Pricing tables, plan comparisons, toggle switches
• Testimonials: Quote carousels, client logos, reviews
• Team & About: Team grids, profiles, timelines
• Contact & Forms: Contact forms, maps, newsletters
• CTAs: Banners, inline CTAs, download prompts
• Footers: Multi-column, minimal, social media
• Content: Blog grids, galleries, FAQs, stats

Browsing Blocks

1. Visit breakmade.com/blocks or access Layers
2. Filter by category or search by keyword
3. Preview shows visual preview, category tag, and framework (Native/HeadSpin)

Using Blocks

Copy-Paste Workflow

1. Find the block you want on breakmade.com
2. Copy using the copy button
3. Paste into Breakdance editor (Ctrl/Cmd + V)
4. Customize content and styling

Building a Page

A typical landing page structure:

1. Header
2. Hero
3. Logos/Social proof
4. Features
5. Testimonials
6. Pricing
7. FAQ
8. CTA
9. Footer

Mix blocks freely - just ensure you’re using the same framework (Native or HeadSpin).

Customizing Blocks

After pasting:

• Content: Click and edit text, replace images, update buttons
• Style: Blocks inherit your design set - adjust individual colors, padding, fonts as needed
• Layout: Remove unnecessary elements, change grid layouts

Blocks vs Templates

Troubleshooting

Block looks different after pasting?

1. Check design set is installed
2. Verify correct framework (Native vs HeadSpin)
3. Clear Breakdance cache

Missing styles?

1. Ensure BreakMade CSS is enabled
2. Install default color palette

Related

• Using Templates - Complete page templates
• Copy-Paste Workflow - How to copy blocks
• Design Sets Explained - Foundation for blocks