Breakdance 101: Understanding the Structure of a Page

  1. Overview
  2. Websites
  3. Breakdance
  4. Breakdance 101: Understanding the Structure of a Page

1. Breakdance Basics

  • Visual Builder: Breakdance is a front-end visual builder for WordPress. It’s drag-and-drop, similar to Webflow or Elementor, but optimized for performance and flexibility.

  • Global Styles: Managed under the “Theme Styles” panel. Controls typography, colors, spacing, and global elements across your site.

  • Structure Panel: Shows the hierarchy of all elements on a page (like the DOM tree). Crucial for understanding nesting.

2. Page Structure Overview

Every page in Breakdance typically follows a hierarchy like this:

Section  
  → Container  
    → Columns or Elements (e.g., Headline, Image, Button)

 

 

🔹 Section

  • The highest-level block.

  • Often used to separate distinct areas (Hero, Services, About, etc.)

  • Can be full-width or constrained.

🔹 Container

  • Controls the width and layout inside a section.

  • Helps with responsiveness and alignment.

  • You can add padding/margins here to control spacing.

🔹 Columns / Inner Containers (optional)

  • Used for layout within a container.

  • Can create multi-column layouts (e.g., 2-column split for text and image).

🔹 Elements

  • Actual content components: headings, paragraphs, icons, images, videos, etc.

  • Each has its own settings for spacing, style, and visibility.

3. Common Elements You'll Use

  • Heading & Text: Control font, size, weight, and responsive visibility.

  • Button: Style with hover effects, link options, and icons.

  • Image: Use WebP when possible. You can add alt text and lazy load.

  • Icon / Icon Box: Vector icons with customizable size and color.

  • Div: A flexible container for grouping elements, great for custom layouts.

4. Responsive Design

  • Breakdance uses a responsive-first approach.

  • Use the top bar to switch between desktop, tablet, and mobile.

  • You can set margins/paddings and font sizes per device.

5. Reusable Components

  • Templates: You can save a section or page layout and reuse it.

  • Conditions & Roles: Set visibility based on login status, device, etc.

6. Best Practices

  • Use Global Classes or the Theme Styles panel for consistency.

  • Keep the DOM tree clean — avoid unnecessary nesting.

  • Use CSS Variables and custom classes when possible.

  • Regularly preview your work on mobile and tablet sizes.

Last updated May 9, 2025
Was this article helpful?