Wie du mit Breakdance Presets effizient Websites umsetzt

Tutorials, Tipps

Inhalt

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.

Teilen
Jetzt kontaktieren

Lass uns deine Website fertigstellen.

Was wir dir garantieren

Du bekommst nur eine Rechnung, wenn wir helfen konnten!

Unser Team engagiert sich Tag für Tag, um für unsere Kunden Probleme schnell zu lösen, oder bei Umsetzungen optimale Ergebnisse zu erzielen. Das hat dazu geführt, dass bedemy heute für seine erstklassige Dienstleistung bekannt ist und viele glückliche Kunden hat. Unsere bisherige Erfahrung und die Überzeugung in unsere Fähigkeiten ermöglicht es uns, auch Neukunden ein einzigartiges Versprechen zu geben, das unsere Verpflichtung zur Kundenzufriedenheit unterstreicht.

Wir stellen nur eine Rechnung, wenn wir wirklich helfen konnten!

Sollten wir bei einem Problem, oder bei einer Umsetzung nicht helfen können, stellen wir auch keine Rechnung. Selbst wenn wir bereist Zeit investiert haben. Du hast kein Risiko, denn selbst die Kosten für den Fall, dass wir alles umgesetzt haben wie gewünscht, sind unsere Kosten transparent, vorher ausgemacht und niemals über dem geplanten Budget!

Was unsere Hilfe kostet

Keine bösen Überraschungen

Wir rechnen nach einem festen Stundensatz ab, den wir dir vor einem kostenpflichtigen Einsatz unseres Teams in einem schriftlichen Angebot mitteilen. Das bedeutet: Die Umsetzung eines kleinen Features, oder das Beheben eines Problems geht in der Regel schnell (oft innerhalb einiger Minuten) und kostet somit auch nicht viel. Die Umsetzung einer kompletten Seite dagegen nimmt schon mal (je nach Umfang) ein paar Tage in Anspruch.

Was die Kosten angeht, musst du dir aber keinen Kopf machen.

Zum einen bekommst du von uns vorab immer via E-Mail ein Angebot, selbst bei kleineren Support-Anfragen. Zum anderen halten wir uns auch immer an diese Kostenschätzung, wenn wir dir nichts anderes mitteilen. Sollten wir bei der Umsetzung merken, dass die an uns gestellte Aufgabe doch komplexer ist und länger dauert, melden wir uns bei dir mit einer überarbeiteten Kostenschätzung. Dann kannst du entscheiden, ob du bereit bist dieses überarbeitete Angebot anzunehmen, oder nicht. Sollte dir das zu viel sein, stoppen wir das Projekt und du zahlst keinen Cent. Auch nicht für die Arbeit, die wir bis dahin (entsprechend der ersten Einschätzung) schon in das Projekt investiert haben.