How to efficiently implement websites with breakdance presets

Tutorials, Tips

Contents

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.

Share
Contact now

Let's finish your website.

What we guarantee

You will only receive an invoice if we have been able to help!

Our team works hard every day to solve problems quickly for our customers or to achieve optimal results during implementation. As a result, bedemy is now known for its first-class service and has many happy customers. Our past experience and belief in our abilities enables us to offer new customers a unique promise that underlines our commitment to customer satisfaction.

We only issue an invoice if we have really been able to help!

If we are unable to help with a problem or implementation, we will not issue an invoice. Even if we have already invested time. You have no risk, because even in the event that we have implemented everything as requested, our costs are transparent, agreed in advance and never exceed the planned budget!

What our help costs

No nasty surprises

We charge according to a fixed hourly rate, which we will inform you of in a written offer before we charge you for the use of our team. This means that implementing a small feature or fixing a problem is usually quick (often within a few minutes) and therefore doesn't cost much. The implementation of a complete site, on the other hand, can take a few days (depending on the scope).

But you don't have to worry about the costs.

Firstly, you will always receive a quote from us in advance via email, even for smaller support requests. Secondly, we always stick to this cost estimate unless we tell you otherwise. If, during implementation, we realize that the task assigned to us is more complex and will take longer, we will contact you with a revised cost estimate. You can then decide whether you are prepared to accept this revised offer or not. If it's too much for you, we'll stop the project and you won't pay a penny. Not even for the work we have already invested in the project up to that point (according to the initial estimate).