Wie du mit Breakdance Presets effizient Websites umsetzt

Wie groß war die Schrift vorhin nochmal? Welchen Zeilenabstand hab ich beim letzten Absatz verwendet?

Die Styles für jeden Textblock einzustellen und sich alle Werte zu merken, kann eine mühsame Angelegenheit sein.

Wie wäre eine Funktion, um alle möglichen Typografie-Einstellungen global zu speichern? Am besten so, dass man sie an beliebiger Stelle der Website wieder einsetzen kann und Änderungen überall automatisch aktualisiert werden würden?

Breakdance hat dafür eine Lösung! Breakdance Presets!

Breakdance Presets (Voreinstellungen) sind vordefinierte Stile oder Konfigurationen, die du im Breakdance Pagebuilder auf Texte anwenden kannst, um einheitliche Textformatierungen zu erzielen. Die Presets umfassen Einstellungen wie Schriftart, Schriftgröße, Zeilenabstand, Ausrichtung und andere typografische Eigenschaften.

Die Verwendung von Presets kann Zeit sparen und in Designprojekten für Einheitlichkeit sorgen, insbesondere in Situationen, in denen konsistente typografische Stile über mehrere Elemente hinweg angewendet werden müssen. Deshalb zeige ich dir in diesem Tutorial, wie du Breakdance Presets erstellen und anwenden kannst.

Breakdance Presets erstellen

1. Über die Global Settings erstellen

Es gibt verschiedene Möglichkeiten, deine Presets in Breakdance zu erstellen. Eine Möglichkeit besteht darin, in die „Global Settings“ zu gehen und dann unter „Typography“ zu den „Presets“ zu navigieren und sie dort zu erstellen.

2. Presets im Element erstellen

Eine andere Möglichkeit ist, die Typografie-Einstellungen direkt im Element vorzunehmen und diese Einstellungen dann als Preset zu speichern.

Angenommen, du arbeitest an einem Heading-Element und bearbeitest die Schriftdarstellung unter „Typography“. Nachdem du die Schriftart, Schriftgröße, Schriftstärke, den Zeilenabstand und den Zeichenabstand festgelegt hast, denkst du vielleicht: Hey, diesen Style kann ich auch woanders verwenden. Dann klickst du einfach auf den Button „Save as Preset“ und schon hast du ein neues globales Preset gespeichert welches du an belieber Stelle wieder verwenden kannst.

Es besteht auch die Möglichkeit die Einstellungen eines Presets zu übernehmen und im Nachgang zu ändern. Dazu kannst du für dein Element ein bereits vorhandenes Preset auswählen und danach auf „Custom“ klicken. Alle Einstellungen des Presets werden jetzt in die Einstellungen übertragen. Jetzt hast du die Möglichkeit Änderung vorzunehmen und deine Einstellungen dann als neues Preset speichern. Das ist eine Vorgehensweise um schneller und effizienter arbeiten zu können.

Breakdance Presets nutzen

3. Presets für Überschriften nutzen

Es hat verschiedene Vorteile, die Überschriften in deinen Globalen Einstellungen nicht direkt vorzunehmen, sondern dafür ein Preset zu erstellen und dieses dann der entsprechenden Überschrift zuzuordnen. So kannst du dann beispielsweise verschiedene Texte wie eine H1 aussehen zu lassen indem du das entsprechende Preset zuweist. Sollte es in der Zukunft Änderungen geben, kannst du das Preset ändern und alle H1 Überschriften und alle Elemente die wie eine H1 gestylt sind, werden automatisch aktualisiert.

Die Zuweisung erfolgt in den „Global Settings“ unter „Typography“ > „Advanced“ > „Headings“. In unserem Fall wählen wir das Preset für H1 (du kannst deine Voreinstellungen benennen, wie du möchtest). Für alle anderen H-Tags kannst du genauso vorgehen.

4. Presets den Buttons zuweisen

Ein weiteres Beispiel wäre die Verwendung Breakdance Presets in Buttons. Navigiere dazu zu „Buttons“ > „Primary“ > „Typography“ und wähle unter „Presets“ dein zuvor erstelltes Button-Preset aus. Das Gleiche gilt bei anderen Elementen überall dort, wo die Option Presets unter Typography angezeigt wird.

5. Presets bearbeiten / löschen

Natürlich kannst du deine Breakdance Presets jederzeit bearbeiten oder löschen. Gehe dazu einfach in den Globalen Einstellungen zu „Presets“ und wähle den gewünschten Eintrag aus. Hier kannst du wie gewohnt deine Änderungen vornehmen und speichern.

Über das löschen Icon (Mülleimer) kannst du dein Preset auch wieder entfernen.

Der große Vorteil von Presets ist, neben dem einheitlichen Design, die Möglichkeit die Texte auf deiner Website mit nur wenigen Klicks optisch anzupassen.

Presets für optimale SEO

Im Bereich SEO sind Presets auch sehr hilfreich und ein mächtiges Werkzeug. Warum? Weil du die Tags für deine Überschriften und Texte gemäß SEO Hierarchie festlegen kannst und ein beliebiges Design mit Hilfe von Presets erstellen kannst, ohne die Reihenfolge der Elemente ändern zu müssen.

Als Beispiel: Angenommen, du hast deine H1 und H2, aber du möchtest, dass deine H2 genauso aussieht wie H1. Dafür gehst einfach zu den „Typography“ Einstellungen für deine H2 und wählst H1 als „Preset“ aus. Jetzt sieht deine H2 aus wie deine H1 aus, bleibt im Code aber trotzdem ein H2-Tag.

Fazit

Zusammenfassend ist die Verwendung von Breakdance Presets eine effiziente und leistungsstarke Methode, um einheitliche Typografie und Designstile in Projekten umzusetzen. Mit der Möglichkeit, Presets für verschiedene Elemente anzupassen und zu speichern, können Designer schnell und einfach einheitliche Layouts erstellen, Zeit sparen und die SEO-Optimierung ihrer Inhalte verbessern.

Die Flexibilität und Vielseitigkeit von Presets machen sie zu einem unverzichtbaren Werkzeug für ein effektives Designmanagement mit Breakdance.