What is Breakdance?

Breakdance gives end‑users a fast, visual, drag‑and‑drop way to edit existing pages and build new ones in WordPress. Below is a concise, practical guide focused on using Breakdance — not installing or activating it — so you can confidently update content, adjust layouts, and create new pages.

 

🧩 What Breakdance Is

Breakdance is a visual website builder for WordPress that lets you edit pages directly on-screen, rearrange elements, adjust styling, and build new layouts without coding. It includes a large design library, responsive controls, and powerful editing tools.

 

🖥️ The Breakdance Editing Interface

Breakdance opens in a full-screen visual editor. You’ll work with three core areas:

  • Canvas — Your live page preview where you click to edit text, images, buttons, and sections.

  • Left Panel — Add elements, adjust design settings, manage structure, and access global styles.

  • Structure Panel — A hierarchical outline of your page’s sections, rows, columns, and elements.

 

✏️ Editing Existing Content

Breakdance makes content editing straightforward:

  • Click-to-edit text — Select any text block and type directly.

  • Replace images — Click an image → choose a new one from the media library.

  • Edit buttons/links — Click the button → update text, URL, and styling.

  • Adjust spacing — Use the Design tab to modify padding, margins, alignment, and layout.

  • Duplicate or delete elements — Right‑click or use the element toolbar.

Useful Tools While Editing

  • Undo / Redo & Revisions — Roll back changes safely.

  • Quick Navigator — Jump quickly to any element.

  • Client Mode — Restrict access to advanced settings if needed.

 

➕ Creating New Content

You can build new pages or add new sections to existing ones.

Add New Elements

From the left panel, you can insert:

  • Headings

  • Text blocks

  • Images

  • Buttons

  • Icons

  • Forms

  • Sliders

  • Columns & layout containers

Use the Design Library

Breakdance includes pre‑built sections you can drop in instantly:

  • Hero banners

  • Feature grids

  • Pricing tables

  • Contact sections

  • Footers & headers

These can be customized with your own text, images, and colors.

 

📱 Responsive Editing

Breakdance provides device-specific controls:

  • Switch between desktop, tablet, and mobile views.

  • Adjust font sizes, spacing, and layout per device.

  • Hide or show elements on specific breakpoints.

 

🔧 Global Styles (Optional but Powerful)

Global settings let you maintain consistency across your site:

  • Colors

  • Typography

  • Buttons

  • Spacing rules

  • Form styles

Changing a global style updates all linked elements automatically.

 

🔍 Helpful Breakdance Resources

Official learning materials:

  • Breakdance YouTube Channel 100+ video tutorials

 

🧭 Quick Workflow Summary for End Users

  1. Open the page in Breakdance.

  2. Click directly on text or images to edit.

  3. Use the left panel to add new elements or sections.

  4. Use the Structure Panel to organize your layout.

  5. Switch to mobile view to adjust responsive styling.

  6. Save changes and preview before publishing.