Create Your First Preset in Breakdance

Introduction

In this lesson, you’ll learn how to create your first preset in Breakdance, a powerful feature that streamlines website design by applying consistent styles across multiple elements. Presets allow you to save time, maintain a cohesive look, and make global updates effortlessly. By the end of this lesson, you’ll know how to create, customise, and apply presets to enhance your author website’s design efficiency and professionalism

What is a Breakdance Preset?

Presets allow you to create and edit designs that can be applied to multiple elements across your website. Changing the design of a Preset will update all elements on your site that use that Preset.

A Preset stores any properties added to an element’s DESIGN TAB and can be applied to other elements of the same type. For example, a Text element Preset can only be applied to other Text elements.

Breakdance Preset in action

• Edit the Style Guide page with Breakdance
• Open the Structure Panel
• Click on the section we added in the previous lesson

Click on the the Style Tab for the section and apply the following settings

• Vertical Layout
• Gap 3 rem (30 Pixels)

We’ve just told the section to arrange all the internal elements from top to bottom and to put 3 rem of space between each one. I want to use this as the default settings for a section that extends the full width of the website like this one does.

So why aren’t the Div’s inside the Grid stacked vertically? 

Because while the section settings apply to the Grid element, making it stack vertically underneath the Secondary button, those settings do not apply to the inside of the Grid or any other element inside a section. Section settings apply to the elements not what’s inside the elements. This gives us added flexibility. In this case I want the grid to display 4 Divs in a row and not stacked.

I also want this wide section to have a subtle bottom border to indicate when the visitor is moving from one section to another.

• From the design tab go to BORDERS
• Under Styling click on BORDER BOTTOM
• Set the width to 1 pixels ( want this to be a fixed width so pixels are good for that)
• Set the colour to #FCB900

This is the BRAND colour we are going to set in a future lesson with reduced opacity. We want the border to signal the end of each section but not so much that it distracts the visitor from the content.

• Set the Border style to solid.

That’s difficult to see with just one section so I’ll add another, save the page and look at the live page on a separate tab.

Using a border like this is one way to guide visitors from one section of information to another. Using Breakdance we can use other methods which you can see over on the portfolio page.

Now that we have a section layout I like we can save it as a PRESET.

• Click on the first section we added to the page, the one with all the content.
• I click on the CHOOSE PRESET DESIGN drop down box

Because there are no existing presets the only option is to CREATE DESIGN PRESET

• I’m going to call this WIDE SECTION and click save

You’ll see the contents of the DESIGN TAB blanks out and is replaced by a message that ‘A preset is currently selected for this element’

• I can remove this preset from the section by clicking on the X beside the preset name. 

This removes all the styling to the element applied by the preset. 

• We can apply it again be clicking the drop down box and choose WIDE SECTION

Now, any time we want a section that extends the full width of the page to have a vertical layout with a default gap of 3 rem between elements and a bottom border we can use the WIDE SECTION PRESET.

As well as speeding up site builds if we want to change this preset we just have to click on an element it is applied to and click edit.

This will replace the structure panel with a Editing PRESET panel where we can make changes that will apply to ALL elements that use this preset across the ENTIRE website.

And I’ll just label this section Wide Section.

Summary

This lesson covered the process of creating your first preset in Breakdance. Presets enable consistent styling across your author website, saving time and ensuring a polished design. We explored how to configure a preset for a wide section layout and use it to apply uniform styles across sections. With this knowledge, you can efficiently update your website’s design while maintaining a cohesive aesthetic.