An Introduction to the Element Studio in Breakdance Builder

Published July 22, 2022
Breakdance is still in beta, please be cautious about creating long-term content as it could be incompatible with future updates of the plugin

Breakdance Beta 2 is out and its biggest change is the addition of the Element Studio! The Element Studio is where you create and edit custom breakdance elements, both pre-built and custom ones. In this tutorial, we'll give you a rundown on how to use it. The Studio is extremely powerful for creating custom elements and macros. Today, we'll dissect the element customizer and the process for creating a new block. In addition to creating elements, you can use the element studio to view and edit any existing element in Breakdance.

Why Use Element Studio?

We don't think this feature will be used by the everyday Breakdance user, but for those who want to create custom content to sell or give away, this is a powerful tool. It's described as 'an IDE for visual element development'. This tool is definitely aimed at developers and people who want to create custom content. Regardless, anyone can use it to optimize their site building experience.

Saving Your Own Elements

You may be asking, why do I need to know how to save elements before I even know how to make them? The answer is because the editor does not know where to save the block output. The good news is, it's an easy fix. We're not sure if you'll have to install a plugin in the future or if the builder with come with compatibility to save blocks within the default Breakdance plugin settings.

Download and install the Breakdance Custom Elements plugin from GitHub and activate it on your site. We wouldn't recommend making and saving anything long term or content you wouldn't want to lose, as previous updates haven't been backwards compatible. As we wait for stable versions, the studio is still great to learn about creating custom content for the visual builder. Of course, you should ensure you have Breakdance Installed on a web server before trying to use the Element Builder.

Editing Existing Elements

You can use the Element Studio (ES) to modify any current Breakdance block. You can't overwrite existing blocks, but you can create new ones with the slightly altered properties and save those. It's a bit like using ACF, rather for visually designed blocks. In the editor, open the options menu (...) and open the Element Studio. Feel free to open any Breakdance element and browse through the settings before we dive in and build a block ourselves.

Creating Custom Elements

We're going to create a block that has a simple icon, name, and price attribute. Start off by opening any page in the editor. Make sure you are running Breakdance Beta 2 or later. Click on the options menu (...) and open the Element Studio.

Inside the ES, create a new element and call it whatever you want. We're going to be focusing on the first five tabs today: content, design, HTML, CSS, and default CSS. Once you make it, you should be able to drag it into the visual builder. Go ahead and do this now so we can see updates in realtime as we design them.

Content Tab

The content tab will be where we add our block's attributes. Click the '+ Add Control' button and create a new section & attribute. We're going to name our section 'content' and create three attributes in it: icon, product, and price. The icon will be an icon while the latter two attributes are just plain text.

Design Tab

Next up is the design tab, where we'll be able to add custom options so we are able to style our block using the visual editor. We can either create our own section and add elements, or use Breakdance presets. We'll be doing one of both. Add a typography preset & add a custom element with 3 attributes: color, padding, border radius. This will allow us to style each pricing block we design.

HTML Tab

The HTML tab is where we'll place our element onto the screen where the breakdance block is physically added onto the builder. You could format this however you want, we made two div's and added the custom content from our content tab inside. To do this, on the content tab copy the code from inside the twig code helper to the left of the attribute names.

Inside the HTML tab, paste the dynamic data inside the div and you'll begin to see the block get populated with content on the left

<div class='pricingSettings'>
  <div class='iconSize'>
	{{ content.content.icon.svgCode }}
  </div>
  {{ content.content.product }}
  {{ content.content.price }}
</div>

Dynamic CSS Tab

This CSS is generated for each instance of the element you set. Inside of here, we're going to add all of our code for the pricing widget. This includes default settings, some set code, and some dynamic variables based on our content. Now these settings will update when you edit individual settings on each pricing block, go ahead and play around with the colors and border radius.

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

.iconSize {
  width: 80%;
  margin: auto;
  text-align: center;
  padding-bottom: 1rem;
}

.pricingSettings {
  margin: auto;
  text-align: center;
  height:300px;
  background-color: {{ design.background.color }};
  padding: {{ design.background.padding }}px;
  border-radius: {{ design.background.border }}px;
}

Default CSS Tab

Inside the default CSS tab will be global styling for all instances of the object. We're not going to be using it for this particular tutorial, but it can be used as general CSS for an element.

Saving Your Element Builder Block

Now you can save the block, all your data will be saved in the plugin you uploaded earlier, to access the content you'll need to have a file viewer like FileZilla or similar. Your element will now appear in the element library for you to use throughout the visual builder like any other Breakdance block.

Next Steps

Now we've created a 3 column section with different pricing elements. You could go ahead and customize this way more, maybe adding hover states, links, shadows, and even more content to display. This is a huge feature for designers and those wanting to build massive design blocks to use at scale.

Conclusion

Even though the Element Builder was just released, it shows huge potential for complete customization and design of elements using Breakdance. As of now, there is no documentation for the feature, so be sure to stay updated on Breakdance as I'm sure slowly documentation will get created.

Want to Learn More?

You can open any element in the Element Studio, giving complete customization and access to anything else you'll use in the builder. This is currently the best form of documentation available. Beware though, you can delete actual Breakdance elements if you're not careful. Use at your own risk.

Additionally, Breakdance released two tutorials describing the Element Builder & Plugin Implementation

Introducing Breakdance Element Studio & Saving Your Custom Elements In A Plugin

And lastly, keep an eye out on the documentation for the studio, as we're sure over the next few weeks it will be getting updated.

That's it for this tutorial, be sure to check back as we'll be going over every new feature in Breakdance as it's released! Have a question regarding the new Element Studio in Breakdance? Leave a comment below!

Written By Justin
Justin is the founder of Gold Penguin, a web design and marketing agency that helps businesses achieve their online goals. Justin has a passion for web design and marketing, and he loves working with clients to help them grow their businesses.

Related Posts

Comments

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Made with 💛 by Gold Penguin © 2022