Wie ändere ich das Design meiner Website?

Mit dem Bricks Builder kannst du das Design deiner Website einfach und intuitiv anpassen. In diesem Tutorial zeigen wir dir, wie du globale Schriftarten, Farben, Schriftgrößen und Abstände anpassen kannst.

1. Bricks Builder Oberfläche verstehen

• Bricks Builder: Der Bricks Builder ist ein visuelles Tool, das dir ermöglicht, deine Website in Echtzeit zu gestalten. Du kannst Elemente per Drag-and-Drop hinzufügen und anpassen.
• Elemente: In der linken Seitenleiste findest du verschiedene Elemente (z.B. Text, Bilder, Buttons), die du auf deiner Seite verwenden kannst. Auf der rechten Seite findest du das Struktur-Panel. Das ist die Leiste, die dir alle Elemente, die du auf dieser Seite verwendest, anzeigt.
• Einstellungen: Wenn du ein Element auswählst, erscheinen auf der linken Seite die Einstellungen, mit denen du das Element anpassen kannst.

2. Globale Schriftarten anpassen

• Schriftarten: Um die globalen Schriftarten deiner Website anzupassen, gehe zu „Einstellungen“ im Bricks Builder.
• Schritte:
  1. Klicke im WordPress Backend rechts auf Bricks -> Eigene Schriftarten
  2. Hier kannst du nun deine eigenen Schriftarten hochladen.
  3. Speichere deine Änderungen.
  4. Damit du die jeweilige Schriftart dem korrekten Text zuordnen kannst, musst du zuerst eine beliebige Seite mit Bricks bearbeiten.
  5. Klicke dann oben links auf das Zahnrad.
  6. Klicke auf Designstile
  7. Öffne nun den Reiter “Typographie”
  8. Hier kannst du nun global die Typographie einstellen. Nutze die Einstellung von “Inhalt” für alles, was keine Überschrift ist. Nutze die Einstellung von “Alle Überschriften” um global alle Überschriften anzupassen.

• Hinweis: Google Schriftarten sind prinzipiell ausgestellt, können aber problemlos als eigene Schriftart hochgeladen werden. Lade dir dazu einfach deine bevorzugte Schriftart bei Google runter und lade sie in diesem Abschnitt hoch.

3. Globale Farben anpassen

• Automatic.css: Mit Automatic.css kannst du die globalen Farben deiner Website anpassen, um ein einheitliches Design zu gewährleisten.
• Schritte:
  1. Melde dich auf deiner Website an und gehe zu einer beliebigen Seite.
  2. Klicke oben in der Admin-Zeile auf „Automatic.css“.
  3. Wähle den Tab „Color Palette“.
  4. Hier siehst du die aktuellen Farben deiner Website. Klicke auf die Farbe, die du ändern möchtest, und wähle eine neue Farbe aus. Du kannst auch nicht benötigte Farben aus stellen, um dein CSS zu minimieren.
  5. Speichere deine Änderungen.

4. Schriftgröße anpassen

• Schriftgrößen: Du kannst die Schriftgrößen für verschiedene Elemente direkt im Bricks Builder anpassen.
• Schritte:
  1. Wähle das Text-Element aus, dessen Schriftgröße du ändern möchtest.
  2. Im Reiter “Stil” findest du den Reiter “Typographie”.
  3. Stelle dort die gewünschte Größe ein und speichere deine Änderungen.

5. Abstände anpassen

• Abstände: Die Abstände (Margin und Padding) können ebenfalls über Automatic.css global angepasst werden.
• Schritte:
  1. Gehe wieder zu „Automatic.css“ und wähle den Tab „Spacing“.
  2. Hier kannst du die Standardabstände für verschiedene Elemente festlegen.
  3. Passe die Werte für Margin und Padding an und speichere deine Änderungen.

6. Individuelle Anpassungen mit Bricks Builder

• Elemente anpassen: Du kannst jedes Element individuell anpassen, indem du es auswählst und die entsprechenden Einstellungen in der linken Seitenleiste änderst.
• Vorschau: Nutze die Vorschaufunktion, um zu sehen, wie deine Änderungen in Echtzeit aussehen.

7. Änderungen speichern und veröffentlichen

• Speichern: Vergiss nicht, deine Änderungen regelmäßig zu speichern, indem du in Bricks oben rechts auf „Änderungen speichern“ / das Speichern-Symbol klickst.

Wir hoffen, dass dieses Tutorial dir hilft, das Design deiner Website mit dem Bricks Builder erfolgreich anzupassen! Bei weiteren Fragen stehen wir dir jederzeit zur Verfügung.

Wenn du mal nicht weiter weißt

Wenn du Fragen zur Anpassung deiner Website hast, zögere nicht, unseren Support zu kontaktieren. Du kannst uns eine E-Mail an support@magicsites.io senden oder unsere Support-Seite besuchen: Support.