How to efficiently implement websites with breakdance presets

How big was the font again earlier? What line spacing did I use in the last paragraph?

Setting the styles for each text block and remembering all the values can be a tedious task.

How about a function to save all possible typography settings globally? Preferably in such a way that they can be reused anywhere on the website and changes would be automatically updated everywhere?

Breakdance has a solution! Breakdance presets!

Breakdance presets are predefined styles or configurations that you can apply to text in Breakdance Pagebuilder to achieve consistent text formatting. The presets include settings such as font, font size, line spacing, alignment and other typographic properties.

The use of Presets can save time and provide consistency in design projects, especially in situations where consistent typographic styles need to be applied across multiple elements. That's why in this tutorial, I'll show you how to create and apply Breakdance presets.

Create breakdance presets

1. create via the Global Settings

There are various ways to create your presets in Breakdance. One option is to enter the "Global Settings" and then under "Typography" to the "Presets" and create them there.

2. create presets in the element

Another option is to make the typography settings directly in the element and then save these settings as a preset.

Let's assume you are working on a heading element and editing the font display under "Typography". After you have set the font, font size, font weight, line spacing and character spacing, you may think: Hey, I can use this style somewhere else too. Then simply click on the button "Save as preset" and you have saved a new global preset which you can use again at any point.

It is also possible to adopt the settings of a preset and change them afterwards. To do this, you can select an existing preset for your element and then to "Custom" click. All settings of the preset are now transferred to the settings. You now have the option of making changes and then saving your settings as a new preset. This is a procedure for working faster and more efficiently.

Use breakdance presets

3. use presets for headings

There are various advantages to not making the headings in your global settings directly, but instead creating a preset for them and then assigning it to the corresponding heading. For example, you can then make different texts look like an H1 by assigning the corresponding preset. If there are changes in the future, you can change the preset and all H1 headings and all elements that are styled like an H1 will be updated automatically.

The allocation is made in the "Global Settings" under "Typography" > "Advanced" > "Headings". In our case, we select the preset for H1 (you can name your presets as you wish). You can proceed in the same way for all other H tags.

4. assign presets to the buttons

Another example would be the use of breakdance presets in buttons. Navigate to "Buttons" > "Primary" > "Typography" and select under "Presets" your previously created button preset. The same applies to other elements wherever the Presets under Typography is displayed.

5. edit / delete presets

Of course, you can edit or delete your Breakdance presets at any time. Simply go to the global settings to "Presets" and select the desired entry. Here you can make and save your changes as usual.

You can also remove your preset again using the delete icon (trash can).

The big advantage of presets, in addition to the uniform design, is the ability to visually customize the texts on your website with just a few clicks.

Presets for optimal SEO

Presets are also very helpful and a powerful tool when it comes to SEO. Why? Because you can define the tags for your headings and texts according to the SEO hierarchy and create any design with the help of presets without having to change the order of the elements.

For example, let's say you have your H1 and H2, but you want your H2 to look exactly like H1. To do this, simply go to the "Typography" settings for your H2 and select H1 as "Preset" off. Now your H2 looks like your H1, but still remains an H2 tag in the code.

Conclusion

In summary, using Breakdance presets is an efficient and powerful way to implement consistent typography and design styles in projects. With the ability to customize and save presets for different elements, designers can quickly and easily create consistent typography and design styles in projects. Layouts save time and improve the SEO optimization of their content.

The flexibility and versatility of presets make them an indispensable tool for effective design management with Breakdance.