Breakdance Editor Layout

Introduction

Welcome to the Breakdance Editor Layout guide!

In this lesson, we’ll explore the core features of the Breakdance website builder, tailored for authors creating stunning, functional websites. Whether you’re new to website building or transitioning from another tool, this walkthrough will ensure you feel confident using Breakdance’s intuitive interface.

Open the Style Guide Page

OK, back in the WordPress dashboard lets go to PAGES > STYLE GUIDE

Edit the page

When the page is open click on the EDIT WITH BREAKDANCE BUTTON.

Breakdance Interface

If you’ve used page builders before then this is a recognisable layout for you but in case this is your first page builder I’ll go through the interface so you know where everything is.

Top Bar

Along the top of the screen we have the TOP BAR with the following features

• The ADD button to activate the ELEMENTS PANEL where we will get the elements we need to add to our pages including sections, headings, buttons, images, text and much more.
• TOGGLE BUTTON for the ELEMENT PANEL. Use this button to toggle the ELEMENT PANEL on and off if you want a full screen experience or access to the elements or their settings,
• Page Selector – Breakdance gives you the option to switch between pages and templates from within the builder so you don’t have to save, close the builder, then open up another page like you have to in other platforms.
• Responsive Views. With Breakdance we can see what our website looks like on different devices. So we can build for desktop then look at how each page looks on tablets and phones in different orientation.
• Undo / Redo buttons. These are greyed out as we haven’t made any changes to this page yet.
• Next we have the toggle button for the STRUCTURE PANEL. I always have the structure panel switched on so I can see everything I add to the page. The structure panel also makes it easier to move or copy elements around the page which you’ll see in action throughout this course.
• Then we have the dot dot dot menu (that’s what the Breakdance creator named it) to access GLOBAL SETTINGS, HISTORY, and other advanced features. I’ll cover using GLOBAL SETTINGS and DESIGN PRESETS in this module but the others are out of scope for this course. If you want to know more about selectors, element studio or other advanced features in the interface take a look at the Breakdance documentation.
• Beside that is the SAVE button.
• Finally we have the exit button which can take a bit of getting used to. When you click on the X icon Breakdance will ask if you want to exit to the Frontend (Go to the page you have been working on ) or Exit to WordPress (the admin panel). My habit is to exit to the admin dashboard but there no right or wrong way of doing this.

ELEMENTS Panel

Let’s take a closer look at the ELEMENTS PANEL. This is where Breakdance stores all the elements we use on the website. Elements are grouped into 6 areas inside the ELEMENTS PANEL.

• Basic
• Blocks
• Site
• Advanced
• Dynamic
• Forms

If we had WOOCOMMERCE installed there would be a seventh area for WOOCOMMERCE elements.

We will use a number of different elements throughout this course and you can see a full list of the available elements on the Breakdance Website.

There are two ways of finding what we need on the ELEMENTS PANEL.

• Scroll
• And Search

As you start out with Breakdance you’ll scroll to find the elements you want to use on your pages and templates.

• For this blank page I’ll go to ADD PANEL > BASIC
• Click to add a SECTION
• Right away you can see as well as adding the element to the MAIN EDITING PANEL this also updates the STRUCTURE PANEL on the right hand side and will do so for every new element we add to the page.
• Staying within BASIC I’ll add a HEADING, TEXT, a TEXT LINK, and a BUTTON

As you get used to Breakdance you’ll get a feel for the elements you want to use and you’ll use the search bar more often.

Main Editing Panel

Inside the MAIN EDITING PANEL I can click on any element I’ve added to the page.

When I click on the heading I can see what it is, a heading, I can drag it around, duplicate it or remove it.

I can also click inside some elements to edit the content. Like here I can change this heading to read Dirk Volcano’s Website and change the tag to make it a H1 (top level) heading.

Element Edit Panel

When I click on an element the ELEMENT PANEL changes from a list of available elements to three tabs for the element I’ve selected on the main editing panel.

• The element CONFIGURATION tab
• The element STYLING tab
• The element SETTINGS tab

I’ll cover using each of this tabs in the different elements as we use them in the course.

Structure Panel

Over on the other side of the screen from the ADD PANEL is the STRUCTURE PANEL. As I’ve added elements to the page they’ve also been added to the STRUCTURE PANEL.

Each element on the structure panel has an icon representing what kind of element it is, an editable name, a menu to access copy, paste, delete and other functions, a duplicate icon and a delete icon.

Selecting an element on the STRUCTURE PANEL will take you take on the MAIN EDITING PANEL. We can also move elements around on the STRUCTURE PANEL by clicking and dragging them up or down to where we want them to go. As we do this it will update the MAIN EDITING PANEL in real time.

Just like the search feature for finding elements the more you use Breakdance the more you’ll find you use the STRUCTURE PANEL to select and move around your elements especially on bigger pages with more elements.

Responsive Views

As we build our authors websites in Breakdance we can easily check to see what they look like use the responsive views menu on the top bar. Websites built with Breakdance are responsive out of the box and I’m going to show you a few extra ways to ensure your website looks good on any device but the RESPONSIVE VIEW feature is how we’ll check we are getting what we expect from our designs.

Clean Up

I’m save this page and exit to WordPress.

When we save a new page on Breakdance it DOES NOT publish it. All the changes we make inside Breakdance on a new page will be saved as DRAFT. When we are happy with what we’ve built we have to PUBLISH through the normal WordPress edit screen.

When Breakdance edits a PUBLISHED page or template it will update the content seen by visitors as the page / template is already live.

Summary

In this lesson, we covered the Breakdance Editor layout, breaking down its user-friendly interface and powerful features. From navigating the Elements Panel to using the Responsive Views and Structure Panel, you now have the tools to create and manage a professional author website with ease. With these basics mastered, you’re ready to confidently design pages and templates tailored to your unique author brand.

If you have any questions about the course so far you can contact me or tag me in a post over in the Facebook group.