Breakdance Page Builder

Breakdance is a powerful WordPress website builder that allows users to create custom websites visually without needing to write code. It includes a drag-and-drop design interface, responsive controls, global styling options, templates, forms, dynamic data, WooCommerce tools, and many built-in elements for building professional websites.

Breakdance is suitable for freelancers, agencies, business owners, designers, marketers, and WordPress users who want more control over their website design and layout. This documentation covers how to use Breakdance effectively, details on Breakdance websites, and insight into Breakdance design.

How to Use Breakdance #

Getting Started #

To start using Breakdance, follow these basic steps:

Install WordPress:
Breakdance works inside WordPress, so you need a WordPress website before using it.

Install Breakdance:
Download Breakdance from your Breakdance account, then upload and activate the plugin in WordPress by going to Plugins > Add New > Upload Plugin.

Activate Your License:
After installation, enter your Breakdance license key so you can receive updates and access premium features.

Choose Your Site Setup:
Breakdance can take control of your site design, so you may use a lightweight theme or rely heavily on Breakdance’s own design tools.

Create a New Page:
Go to Pages > Add New, enter a page title, then launch the Breakdance builder.

Start Designing:
Use the visual builder to add sections, columns, divs, headings, text, images, buttons, forms, menus, and other elements.

Basic Breakdance Builder Overview #

Once you open the Breakdance builder, you will see several important areas:

Canvas Area:
This is the main visual editing area where you build and preview your page.

Elements Panel:
The elements panel contains the building blocks used to create your website, such as headings, text, images, buttons, forms, menus, icons, pricing tables, and WooCommerce elements.

Structure Panel:
The structure panel helps you view and organize the layout of your page. It is useful for selecting sections, containers, columns, and nested elements.

Design Controls:
Breakdance includes styling controls for typography, colors, spacing, borders, backgrounds, layout, effects, and responsive design.

Global Styles:
Global Styles allow you to set site-wide design rules for colors, typography, buttons, forms, and other visual elements.

Responsive Controls:
Breakdance allows you to adjust how your design appears on desktop, tablet, and mobile devices.

Save Button:
After making changes, save your work so the page updates on the live website.

Creating Content #

To create content using Breakdance, you can:

Create a New Page #

1. Navigate to Pages > Add New.
2. Enter a page title.
3. Launch the Breakdance builder.
4. Add a section or layout structure.
5. Drag elements into the page.
6. Customize the content, spacing, styling, and responsive settings.
7. Preview the page.
8. Save or publish the page when ready.

Add Headings and Text #

To add written content:

1. Add a Heading element to the page.
2. Enter your headline.
3. Adjust the font, size, color, weight, and alignment.
4. Add a Text or Rich Text element for paragraph content.
5. Use proper heading structure to keep the page organized.

Add Images #

To add images:

1. Add an Image element.
2. Select an image from the WordPress Media Library or upload a new one.
3. Adjust image size, alignment, borders, shadows, and spacing.
4. Add alt text to improve accessibility and SEO.

Add Buttons #

To add a button:

1. Add a Button element.
2. Enter the button text.
3. Add the destination link.
4. Customize the button style, size, colors, spacing, icon, and hover effect.
5. Use buttons for important actions such as contacting you, booking a call, buying a product, or joining an email list.

Use Templates #

Breakdance includes template and design features that can help speed up the website-building process.

You can use templates for:

Pages:
Create complete page layouts more quickly.

Sections:
Reuse common sections such as hero areas, testimonials, services, calls to action, and contact sections.

Headers and Footers:
Build custom website headers and footers visually.

WooCommerce Layouts:
Create custom product pages, shop pages, and e-commerce layouts.

Dynamic Templates:
Design templates for blog posts, archives, custom post types, and other dynamic content.

Breakdance Websites #

Types of Breakdance Websites #

Breakdance can be used to create many types of WordPress websites, including:

Business Websites:
Useful for local businesses, agencies, consultants, service providers, and professional brands.

Landing Pages:
Ideal for lead generation, sales campaigns, product launches, webinars, and advertising traffic.

Portfolio Websites:
Great for designers, photographers, developers, writers, and creative professionals.

Blogs:
Breakdance can be used to design blog layouts, single post templates, archive pages, and category pages.

E-commerce Stores:
When combined with WooCommerce, Breakdance can help build custom shop pages, product pages, cart layouts, checkout pages, and product archive templates.

Membership Websites:
Breakdance can be used with membership plugins to create protected pages, member dashboards, and custom content areas.

Online Course Websites:
Course creators can use Breakdance to build course sales pages, lesson layouts, student resource pages, and marketing funnels.

Benefits of Using Breakdance #

Visual Website Building:
Breakdance allows you to design pages visually, so you can see your changes as you build.

No Coding Required:
Users can create custom layouts and designs without needing HTML, CSS, PHP, or JavaScript.

Advanced Design Control:
Breakdance gives users detailed control over spacing, typography, colors, borders, backgrounds, layout, effects, and responsive behavior.

Global Styles:
You can control site-wide colors, fonts, buttons, forms, and other design settings from one central place.

Built-In Elements:
Breakdance includes many built-in elements, reducing the need for extra add-on plugins.

WooCommerce Features:
Breakdance includes tools for designing WooCommerce stores, product pages, shop pages, and other e-commerce layouts.

Dynamic Data:
Breakdance can display dynamic WordPress content, making it useful for blogs, directories, custom post types, and advanced website builds.

Performance Focus:
Breakdance is designed to help users build fast, clean, and efficient WordPress websites.

Breakdance Design #

Choosing a Theme #

Your WordPress theme provides the foundation for your website, but Breakdance can handle much of the visual design.

When choosing a theme for Breakdance, consider:

Lightweight Performance:
Choose a theme that does not add unnecessary scripts, styles, or design bloat.

Minimal Design Interference:
A simple theme gives Breakdance more control over the website layout.

Compatibility:
Use a theme that works well with modern WordPress standards.

Flexibility:
Choose a setup that allows Breakdance to control headers, footers, templates, and page layouts as needed.

In many cases, Breakdance users prefer a minimal theme or a setup where Breakdance controls most of the visual design.

Customizing Your Website #

Breakdance gives you several ways to customize your website.

Using Global Styles #

Global Styles help create a consistent design across your entire website.

You can use Global Styles to control:

Colors:
Set brand colors and reuse them across your site.

Typography:
Define font families, font sizes, heading styles, and text styles.

Buttons:
Create consistent button styles for calls to action.

Forms:
Style form fields, labels, buttons, and spacing.

WooCommerce:
Apply consistent styling to WooCommerce store elements.

Using Global Styles is one of the best ways to keep your website professional, consistent, and easier to update.

Building Page Layouts #

When building page layouts in Breakdance, consider the following:

Start with a Clear Structure:
Plan your sections before designing. Common page sections include hero, services, about, features, testimonials, pricing, FAQ, and contact.

Use Consistent Spacing:
Keep padding and margins consistent across sections.

Use Reusable Design Patterns:
Reuse layouts for similar sections to make the site feel more polished.

Keep Pages Focused:
Every section should have a clear purpose.

Prioritize Calls to Action:
Use buttons and clear messaging to guide visitors toward the next step.

Using Headers and Footers #

Breakdance allows you to create custom headers and footers visually.

A website header usually includes:

Logo:
The main brand mark or site name.

Navigation Menu:
Links to important pages such as Home, About, Services, Blog, and Contact.

Call-to-Action Button:
A button such as “Book a Call,” “Get Started,” or “Contact Us.”

A website footer usually includes:

Copyright Text:
Basic ownership and legal information.

Footer Navigation:
Links to important pages.

Contact Information:
Email, phone number, address, or support details.

Social Links:
Links to social media profiles.

Using Forms #

Breakdance includes form-building features that allow you to create contact forms, lead generation forms, quote request forms, and signup forms.

Common form fields include:

Name Field:
Collects the visitor’s name.

Email Field:
Collects the visitor’s email address.

Phone Field:
Collects a phone number if needed.

Message Field:
Allows visitors to send a longer message.

Submit Button:
Sends the form information.

When using forms, keep them simple. Only ask for the information you actually need.

Using Popups #

Breakdance can be used to create popups for marketing and communication purposes.

Common popup uses include:

Email List Signup:
Invite visitors to join your mailing list.

Special Offers:
Promote discounts, launches, or limited-time deals.

Announcements:
Share important updates.

Lead Magnets:
Offer downloads, guides, checklists, or free resources.

Popups should be used carefully. Too many popups can frustrate visitors and hurt the user experience.

WooCommerce with Breakdance #

Breakdance is especially useful for building WooCommerce websites because it gives users more visual control over store layouts.

With Breakdance and WooCommerce, you can create:

Custom Product Pages:
Design product pages with images, prices, descriptions, add-to-cart buttons, reviews, and related products.

Shop Pages:
Customize how products are displayed in your store.

Product Category Pages:
Create layouts for specific product categories.

Cart and Checkout Pages:
Improve the buying experience with cleaner cart and checkout designs.

Sales Pages:
Build focused pages for individual products, bundles, offers, or promotions.

For e-commerce websites, make sure your design is clear, fast, and easy to navigate. The buying process should feel simple from product discovery to checkout.

Dynamic Content #

Breakdance supports dynamic content, which allows your website to display information from WordPress automatically.

Dynamic content can be useful for:

Blog Posts:
Display post titles, featured images, authors, dates, categories, and excerpts.

Custom Post Types:
Build directories, listings, portfolios, case studies, team member pages, and resource libraries.

WooCommerce Products:
Display product names, prices, descriptions, images, categories, and other product data.

Advanced Custom Fields:
Use custom fields to create more flexible and advanced website layouts.

Dynamic content is helpful when you need one design template to display many different pieces of content.

Responsive Design #

To make your Breakdance website mobile-friendly:

Use Responsive Preview:
Check how your design looks on desktop, tablet, and mobile.

Adjust Font Sizes:
Large desktop headlines may need to be smaller on mobile screens.

Check Spacing:
Reduce padding and margins when needed for smaller screens.

Stack Columns Properly:
Make sure side-by-side layouts stack cleanly on mobile devices.

Simplify Mobile Sections:
Mobile layouts should be easy to read and navigate.

Test on Real Devices:
Previewing in the builder is helpful, but you should also test the live site on actual phones and tablets.

Breakdance Performance Tips #

To keep your Breakdance website fast and efficient:

Use Optimized Images:
Compress images before uploading them to WordPress.

Avoid Unnecessary Plugins:
Only install plugins that are needed for your website.

Use Global Styles:
Global styling reduces inconsistent design choices and makes updates easier.

Keep Layouts Clean:
Avoid adding unnecessary nested sections, effects, and elements.

Limit Animations:
Use animations only when they improve the user experience.

Use Caching:
Enable caching through your hosting provider or a caching plugin.

Keep Everything Updated:
Update WordPress, Breakdance, WooCommerce, your theme, and plugins regularly.

Test Page Speed:
Use performance testing tools to check load times and identify problems.

Additional Resources #

For more information, you can refer to the following resources:

Breakdance Documentation
Official guides and tutorials for using Breakdance.

Breakdance Website
Information about Breakdance features, updates, pricing, and resources.

Breakdance WooCommerce Documentation
Guides for building and customizing WooCommerce stores with Breakdance.

WordPress Support
General WordPress documentation and troubleshooting help.

WordPress Plugins Directory
Find plugins that extend WordPress functionality.

WooCommerce Documentation
Helpful for learning how to manage online stores, products, payments, shipping, and checkout settings.

Conclusion #

Breakdance is a flexible and powerful WordPress website builder that allows users to create professional websites visually without needing to code. Whether you are building a business website, landing page, blog, portfolio, membership site, course website, or WooCommerce store, Breakdance provides the tools needed to design custom layouts and manage your site more efficiently.

By learning how to use the builder, Global Styles, templates, forms, dynamic data, WooCommerce tools, and responsive controls, you can build attractive, fast, and easy-to-manage WordPress websites with Breakdance.