Get Started

Copy & Paste Workflow

Master the BreakMade copy-paste workflow to quickly add designs to your Breakdance projects.

BreakMade’s copy-paste workflow is designed for speed and simplicity. Unlike traditional theme imports, you can copy individual blocks or entire pages directly into your Breakdance editor.

How It Works

The Concept

Breakdance supports copying and pasting elements, sections, and entire page layouts. BreakMade leverages this by providing:

  1. Pre-built designs on breakmade.com
  2. Copy functionality to grab design code
  3. Direct paste into your Breakdance editor

No export/import files. No complex processes. Just copy and paste.

Copy-Paste Methods

Method 1: Copy Button

On BreakMade.com blocks and templates:

  1. Hover over a block/section
  2. Click the Copy button
  3. Design code is copied to clipboard
  4. Paste in Breakdance with Ctrl/Cmd + V

Method 2: Direct from Preview

Some designs allow direct access:

  1. Open the design preview
  2. Access the Breakdance editor view
  3. Select elements you want
  4. Copy using Breakdance’s native copy
  5. Paste into your project

Method 3: Section Copy

For larger sections:

  1. Open the design
  2. Select the entire section
  3. Use Breakdance’s copy section feature
  4. Paste into your page

Step-by-Step Workflow

Step 1: Prepare Your Environment

Before copying:

  • BreakMade plugin installed and activated
  • Design set installed (Layers recommended)
  • Color palette installed
  • Typography presets installed
  • Active BreakMade license (for premium designs)

Step 2: Find Your Design

On breakmade.com:

  1. Go to Templates or Blocks section
  2. Browse or search for what you need
  3. Preview to ensure it’s right
  4. Note which framework (Native/HeadSpin)

Step 3: Copy the Design

Click the copy button or use the copy interface:

  • Single block: One-click copy
  • Multiple blocks: Copy each separately
  • Full page: May copy in sections

Step 4: Paste into Breakdance

In your WordPress site:

  1. Open your page in Breakdance editor
  2. Click where you want the content
  3. Press Ctrl + V (Windows) or Cmd + V (Mac)
  4. Wait for paste to complete

Step 5: Customize

After pasting:

  1. Replace placeholder text
  2. Swap placeholder images
  3. Update links and buttons
  4. Adjust any styling as needed

What Gets Copied

When you copy a BreakMade design, you get:

Included

  • ✅ Element structure (containers, columns, etc.)
  • ✅ Text content (placeholder text)
  • ✅ Styling (colors, spacing, typography)
  • ✅ Layout settings
  • ✅ Responsive breakpoints
  • ✅ CSS classes applied

Not Included

  • ❌ Images (use placeholders, then replace)
  • ❌ Custom fonts (install separately)
  • ❌ Global settings (use design set)
  • ❌ Third-party integrations

Framework Selection

Native Framework

Use Native designs when:

  • Using BreakMade standalone
  • Not using HeadSpinUI
  • Want standard --s* variables

Variables used:

var(--s8)
var(--primary-base)
var(--radius-lg)

HeadSpin Framework

Use HeadSpin designs when:

  • Using BreakMade + HeadSpinUI
  • HeadSpin Mode is enabled
  • Want --hsp-* variables

Variables used:

var(--hsp-s8)
var(--hsp-primary-base)
var(--hsp-radius-lg)

Choosing the Right Framework

Your SetupChoose
BreakMade onlyNative
BreakMade + HeadSpinUIHeadSpin
UnsureStart with Native

Tips for Efficient Workflow

Batch Your Work

Instead of copying one block at a time:

  1. Plan your full page layout
  2. Copy all needed blocks
  3. Paste them in sequence
  4. Then customize all at once

Use Browser Tabs

Keep multiple tabs open:

  • Tab 1: Your Breakdance editor
  • Tab 2: BreakMade blocks browser
  • Tab 3: Design preview reference

Keyboard Shortcuts

Master these shortcuts:

  • Ctrl/Cmd + V: Paste
  • Ctrl/Cmd + Z: Undo (if paste goes wrong)
  • Ctrl/Cmd + C: Copy (in Breakdance)
  • Ctrl/Cmd + D: Duplicate (in Breakdance)

Save Frequently

After pasting multiple sections:

  • Save your page
  • Preview to check appearance
  • Then continue adding more

Troubleshooting

Nothing Happens When Pasting

  1. Ensure clipboard has content (try copy again)
  2. Click inside the editor before pasting
  3. Try pasting into a specific container
  4. Check browser console for errors

Paste Takes Too Long

Large designs may take a moment:

  • Wait for paste to complete
  • Don’t click during paste
  • Check internet connection

Design Looks Wrong

If pasted design doesn’t match preview:

  1. Check design set: Install matching design set
  2. Check framework: Native vs HeadSpin
  3. Check variables: Ensure CSS is enabled
  4. Clear cache: Breakdance cache + browser

Partial Paste

If only some elements paste:

  1. Try pasting in smaller chunks
  2. Paste into an empty section
  3. Check for element conflicts

Responsive Issues

If mobile view is broken:

  1. Check Breakdance breakpoint settings
  2. Verify responsive settings pasted correctly
  3. May need manual adjustment

Best Practices

Always Start Fresh

When starting a new page:

  1. Create blank page
  2. Add header first
  3. Build sections top-to-bottom
  4. Add footer last

Keep Reference Open

While customizing:

  • Keep original design preview open
  • Match spacing and alignment
  • Use as style guide

Don’t Over-Paste

Avoid pasting too much at once:

  • Paste one section at a time
  • Save between pastes
  • Test as you go

Clean Up After

After finishing a page:

  • Remove unused elements
  • Optimize images
  • Check mobile responsiveness
  • Test all links