Kava Theme: Schriften und Farben zentral steuern

Letztes Update:
von sanchez.s
Kava Theme Schriften und Farben zentral steuern

Stell dir vor, deine Website ist fertig.

Aber die Überschriften sind zu klein und der Body Text würde in einer Serifen-Schrift besser aussehen.

Jetzt gibt es 2 Möglichkeiten:

  • Entweder steuerst du deine Schriften und Farben zentral über dein Theme
  • ODER du legst Schrift und Farbe für jede einzelne Seite fest.

Wenn du Schrift und Farbe zentral steuerst, änderst du Überschrift und Body-Text mit 2 Klicks.

Wenn nicht … dann kremple die Ärmel hoch und plane für die nächsten 2 Stunden nichts anderes. Denn du hast eine Menge Arbeit vor dir 😊

Mit dem Kava Theme steuerst du Schriften und Farben zentral.

Das geht längst nicht mit jedem Theme. Das beliebte Hello Theme von Elementor hat diese Funktion zum Beispiel nicht.

Beispiel-Seite anlegen

Bevor du das Kava Theme einstellst, legst du eine Beispiel-Seite an.

  1. Lösche alle Demo-Seiten außer der Startseite.
  2. Öffne die Startseite mit Elementor.
  3. Lösche nun den gesamten Demo-Content von der Startseite.
  4. Füge jetzt alle Typografie-Elemente mit dem jeweiligen HTML-Tag hinzu, die wir gleich im Theme einstellen möchten.

Grundeinstellungen im Customizer

Im Customizer stellst du das Kava Theme nach deinen Bedürfnissen ein.

  1. Benenne deine Website. Ich nenne das Nachrichten-Portal beispiehalft „DIE ZEITUNG“ mit dem Untertitel „Online-Nachrichten-Portal“
  2. Das Logo und das Favicon ergänzt du später. Am Page Layout änderst du ebenfalls nichts.
  3. Kava bringt eine hauseigene Breadcrumb-Funktion. Aktiviere Sie, wenn du eine Breadcrumb-Navigation haben möchtest. 
  4. Die Social Links im Header und Footer deaktivierst du, weil du Header und Footer sowieso von Grund auf selber aufbaust.
  5. Den ToTop-Button finde ich für eine Nachrichten-Seite mit teils sehr langen Texten praktisch. Deshalb bleibt er bei mir aktiviert.
  6. Die Hintergrund-Farbe ist auf weiß voreingestellt und bleibt so.

Farben

Die Farbpalette für die Website ist dank Demo-Content bereits voreingestellt. Hier kannst du Primär-, Sekundär und Akzent-Farben und die Farben der einzelnen Typo-Elemente voreinstellen. Wenn du bereits eine Farbpalette hast, stelle sie jetzt ein.

Bist du dir noch unsicher, welche Farben zueinander passen, probiere das Adobe Color Wheel.

Ich mag die Farbpalette und nehme deshalb keine Änderungen vor, bis auf eine einzige: Ich stelle die H4-Überschrift auf rot.

Schriften

Der Body-Text soll Schriftgröße 18 haben. Als Schriftart nehme ich für die ganze Website die Serifen-Schrift Georgia. Das hat 3 Gründe:

Menschen können Schriftarten mit Serifen wie Times New Roman oder Georgia besser lesen als serifenlose Schriftarten wie Arial.

Georgia ist eine Systemschrift und kann von jedem Browser angezeigt werden. Das gilt bei weitem nicht für jede Schriftart. Falls du eine Schriftart wählst, die ein Browser deines Besuchers nicht kennt, zeigt der Browser deine Seite automatisch mit einer Backup-Schrift an und du verlierst die Kontrolle.

Georgia ist kein Google Font. Google Fonts sind datenschutzrechtlich bedenklich. Falls du unbedingt Google Fonts nutzen möchtest, solltest du sie lokal einbinden. Eine Anleitung dafür habe ich dir verlinkt .

Stelle die Stärke auf 400 und den Zeilenabstand auf den Faktor 1,5 der Schriftgröße.

Die restlichen Schriftgrößen habe ich wie folgt eingestellt:

Diese Schriftgrößen habe ich verwendet.

Alle weiteren Punkte im Kava Theme kannst du ignorieren. Nach einem Klick auf „Veröffentlichen“ ist unser Theme aktualisiert und du kannst mit deinem Nachrichten-Portal  durchstarten.

Faustformel für Schriftgrößen und Farben

Noch ein Tipp zum Schluss: Benutze, wenn möglich, nur 1 Schriftart in maximal drei Schriftgrößen auf einer Seite.

Je stärker du deine Schriften variierst, desto unruhiger wird das Erscheinungsbild deiner Seite.

Dasselbe gilt für Farben. Mehr als 3 Farben sehen unruhig aus. Braucht es eine 4 Farbe, nutze eine bestehende Farbe in einer geringeren Stärke.

Denke daran: Deinen Besuchern geht es um deine Inhalte, nicht um das Webdesign.

Im nächsten Schritt gebe ich dir einen kurzen Überblick über den Arbeitsprozess, mit dem wir diese Seite erstellen.

Das könnte dich auch interessieren

WordPress-Plugins erweitern deinen Blog um bestimmte Funktionen – und das...
Du hast dein eigenes Nachrichten-Portal gebaut. Nimm dir jetzt einen...
Deine Besucher starten immer seltener auf der Startseite – auch...
Footer-Seiten erstellen Bevor du deinen Footer entwickelst, sollten zunächst alle...

Kommentare

{{ reviewsTotal }} Review

{{ reviewsTotal }} Reviews

{{ options.labels.newReviewButton }}
{{ currentUserData.canReviewMessage }}