Introduction to Element Studio in Breakdance Builder

Breakdance comes with a decent selection of elements you can use on your post and page templates. Its most recent version offers over 130 elements and widgets, broken down into several categories:

• Basic
• Block
• Site
• Advanced
• Dynamic data
• Forms
• Social
• Product
• Shop Pages
• Checkout
• Cart
• Other

But if you’re an advanced user, you might not find everything you need to build the website of your dreams. As the saying goes, one size doesn’t always fit all.

Fortunately, Breakdance comes with Element Studio where you can create your own custom elements. You can even open Breakdance’s native elements to see how they’re built (but of course, you can’t edit them). 

However, Element Studio does require a little bit of coding, but the entire process is relatively straightforward.

I honestly find this feature attractive for both mid and advanced developers. It offers you the creative freedom to extend your site’s functionality. Plus, creating custom elements to reuse in the future definitely saves you lots of time.

For this tutorial, I’ll show you how you can create custom elements for Breakdance in Element Studio. Let’s get to it!

Why Use Element Studio?

We don't think Element Studio will be used by the everyday Breakdance user. 

However, if you’re looking for a particular functionality but can’t find it in Breakdance's native elements, there’s only one option at your disposal. And that is creating custom elements in Element Studio.

Of course, Breakdance is still very new and the available elements and widgets might not be too impressive right now. I’m pretty sure BD’s library will increase over time. The Breakdance team will continue to fill in the blanks as they always do. 

But for now, Element Studio is your best option if you’re looking for deeper customizations. It’s also the perfect tool for those who want to create custom content to sell or give away. 

Element Studio is 'an IDE for visual element development.’ And while it’s aimed at developers who want to create custom content, anyone can learn to use it to optimize their web development experience.

Creating Custom Elements for Breakdance in Element Studio

1) Install Element Studio

Download the Custom Elements Boilerplate Plugin from GitHub.

In WordPress, go to Plugins > Add New > Upload Plugin. Choose the zip file you’ve downloaded.

Once the installation is complete, activate the plugin.

2) Open Element Studio in Breakdance

You can use Element Studio to modify one of Breakdance’s native blocks. Keep in mind, though, that you can't overwrite these existing blocks. Instead, you’ll have to create new ones with slightly altered properties and save them.

First, let’s open a blank page or template in Breakdance. 

In the editor, click the options menu (...) and select Element Studio. Familiarize yourself with the IDE by opening any Breakdance element and browsing through the settings.

3) Create a New Element

Let’s create a simple block that contains a title and a list. 

In the ES editor, click ‘New element’ and assign a name. In our example, we’re going to name the element ProsConsList.

Add the new element to your Breakdance editor. For now, you’ll notice that it’s blank because we haven’t added anything yet. Adding it in Breakdance will help us visualize the updates as we design it.

4) Add Attributes in the Content Tab

In the ES editor, click the ‘pencil’ icon to open the content tab. This is where we’re going to add and define our block’s attributes.

Click the ‘Add Control Section’ and enter a section name. Make sure it’s relevant or descriptive to its purpose.

For our example, add a ‘Title’ attribute of text type and a ‘List Item’ of repeater type. The repeater lets you add multiple items in this section.

Under the List Item, click ‘Add Control’ for a new text type Item.

Your new attributes should now be visible on the left side of the Breakdance editor.

5) Define Your Element in the HTML Tab

The HTML tab is where you’re going to define the structure of your element such as headings, texts, and links. 

Copy the code block of the attribute from the Content tab. Then, open the HTML tab and paste the code here. 

I highly recommend that you wrap the code in a container for future styling.

In our case, the title is wrapped by an <h3> tag, the list group in <ul> tag, and each list item in an <li> tag.

6) Style in the Design Tab

Here, we can either create our own section and add elements or use Breakdance presets. We'll be doing one of both.

First, click ‘Add Control Section’ for the Title and then ‘Add Preset.’ Select ‘Typography.’

Repeat the process for the ‘List’ section.

Note that each attribute instance will generate its own CSS. You’ll use this later on to add styling options to your element. 

7) Add the CSS Codes in the CSS Tab

Let’s copy each of the generated code from the Design tab.

Then, paste them one by one to the CSS tab. Make sure that each block of code is wrapped in a selector, as shown below. 

%%SELECTOR%% {
  background-color: {{ design.wrapper.background }}
}

%%SELECTOR%% h3 {
  {{ macros.typography(design.title.typography, globalSettings) }}
}

%%SELECTOR%% ul {
  {{ macros.typography(design.list.typography, globalSettings) }}
}

Note that you can also use the container elements or class names from your HTML tab. In web development, using class names is considered a good practice to easily organize and style multiple elements.

With the CSS in place, you can now modify each attribute's style. For example, you can change the color of the title and list or modify their font size.

8) Add More Elements As You Want

To change an element’s layout or background color, you'll need a wrapper.

Simply repeat the process above. Here, we’ve added a wrapper attribute for layout and background color modifications.

9) Save and Preview

Once you’re satisfied with the settings, click the save button at the top of the editor.

Here’s a simple output of our ProsConsList block. 

To use your ProsConsList block, simply locate it in the left menu and drag it into your editor, just like the default Breakdance elements.

Sample Project - Creating A Recipe Element

Let’s say you’re building a food recipe website. You want to have a custom recipe block that you can reuse every time you want to add a new recipe.

Let's try to create this custom element in Breakdance. Here are the steps to follow:

1) In your Element Studio IDE, click ‘Add New Element.’ Then, define its attributes in the Content tab.

2) Copy the codes from the Content tab and paste them into the HTML tab. Here, I’ve defined all my classes so that I can easily style them later on.

If you want to view the full code, please visit this link.

3) Add styling options in the Design tab.

4) Again, copy the generated codes from the Design tab and paste them into the CSS tab.

%%SELECTOR%% .recipe-image { 
  font-size: {{ design.image.width.style }};
  font-size: {{ design.image.height.style }};
}

%%SELECTOR%% h3 {
  {{ macros.typography(design.typography.title, globalSettings) }}
}

/* Stars */
%%SELECTOR%% .recipe_rate {
  margin-bottom: {{ design.spacing.below_stars.style }};
  order:{{ design.stars.position }};
}
%%SELECTOR%% .recipe_rate svg {
  width: {{ design.stars.size.style }};
  fill: {{ design.stars.color }}
}

%%SELECTOR%% .recipe-author {
  {{ macros.typography(design.typography.author, globalSettings) }}
}

%%SELECTION%% .recipe-desc {
  {{ macros.typography(design.typography.recipe, globalSettings) }}
}

%%SELECTION%% .recipe-details {
  {{ macros.typography(design.typography.details, globalSettings) }}
}

%%SELECTION%% .recipe-desc {
  {{ macros.typography(design.typography.details, globalSettings) }}
}

%%SELECTION%% {
  {{ macros.spacing_padding_all(design.wrapper.padding) }}
}

%%SELECTION%% .recipe-image {
  {{ macros.spacing_complex(design.image.new_control, 'margin') }}
}

5) Add global styling for all instances of your object under the default CSS tab. Here, I used the name classes to style each element of our block. Add and tweak your CSS codes here to achieve your desired style and layout.

.recipe-image {
  display:flex;
  align-items:center;
  justify-content:center;
  width: 800px;
  height: 50px;
  border-radius: 8px;
  flex-shrink: 1;
  flex-grow: 1;
  z-index:10
}
.recipe-image img {
  padding-top: 100px;
  width:100vw;
  object-fit:cover;
}
h3 {
  font-size: 250px;
  font-weight: 800;
  margin-top: 480px;
}
.recipe_rate {
  display: flex;
  gap: 4px;
  margin-bottom: 36px;
  z-index:10;
  order:3
}
.recipe_rate svg {
  width: 32px;
  fill: var(--bde-brand-primary-color);
}
.recipe-author {
  font-size: 20px;
}
.cook-details {
  margin-left: 50px;
}
.recipe-desc {
  font-size: 20px;
}
.recipe-details {
  font-size: 20px;
}
.recipe-steps {
  font-size: 20px;
}
.recipe-content {
  padding-top: 325px;
}

6) Save your settings and preview. 

Here’s what our Recipe block looks like on the front-end.

Wrapping It Up

Custom elements allow you to add unique features to your site that may not be available in Breakdance’s native elements.

Element Studio is a powerful IDE for creating custom elements in Breakdance. For new users, the tool might look a little bit intimidating. However, custom elements can simplify the development process, so it’s definitely worth exploring the tool. 

Just make sure to use a staging site to safely experiment with your new custom elements. 

Element Studio generates PHP codes for the new elements, and you might lose your site with one simple mistake. For this reason, the Breakdance team recommends using Git to back up your website files.

And while you’re at it, consider adding third-party plugins and extensions that work well with Breakdance. You might find the extra functionalities here and save you the time of creating an element from scratch.

We’ve covered the best plugins and extensions to use with Breakdance in a separate article.

Last but not least, please let us know in the comments if you’ve encountered issues while building custom elements in Breakdance.