1. Home
  2. Docs
  3. Fullsite Editing
  4. Beispiele zum Verwenden v...
  5. Stile – für dein Design

Stile – für dein Design

Übersicht der verschiedenen Stile

Stile sind wie voreingestellte Design-Pakete für deine Website. Sie bestimmen das Aussehen von Text,Schriftart, Farbe, Hintergrundfarbe, etc.





Ein praktisches Beispiel:
Du möchtest deiner Seite schnell einen anderen Look geben. Statt einzeln Farben und Schriften zu ändern, wählst du einfach einen neuen Stil aus – schon hat deine Seite ein komplett neues, Design.

Wie Stile funktionieren

  • Farben für Text, Hintergrund und Links
  • Abstände zwischen Elementen
  • Schriftarten und Schriftgrößen
  • Blockdesigns (wie Buttons, Listen oder Tabellen aussehen)
  • Layout-Vorlagen für ganze Seitenbereiche
  • Das Besondere ist:
  • Du kannst zwischen verschiedenen Stilen für deine Seite wählen. Die Stile findest du unter „Design“ → „Website-Editor“ „Stile“ in der linken Menüleiste.

Die Stile, die du über den Menüpunkt Stile auswählst wirken sich auf die gesamte Website aus. Wenn du z. B. hier die Hintergrundfarbe änderst, ändert sich die Hintergrundfarbe aller Beiträge, Seiten und Vorlagen.

Im rechten Stile Menü findest du die Stile und Standardeinstellungen, die von deinem Theme bereitgestellt werden und die, die mit WordPress geliefert werden.


Du kannst diese Einstellungen im Menüpunkt „Stile“ durch deine eigene Auswahl überschreiben. So kannst du z. B. deine eigenen Farben zur Farbpalette hinzufügen, die Layoutabmessungen ändern und vieles mehr.


Das Bild rechts zeigt die geöffnete rechte Seitenleiste „Stile“ mit allen aufgelisteten Optionen.

Du kannst auch das Aussehen bestimmter Blöcke für die gesamte Website anpassen. So kannst du z. B. eine Hintergrundfarbe auswählen und die Schriftgröße und Zeilenhöhe für alle Zitatblöcke auf deiner Website festlegen.


So verwendest du das Stile Menü

Um diese Funktion nutzen zu können, musst du ein Block-Theme installieren und aktivieren und WordPress 5.9 oder höher verwenden.
Gehe zu Design > Website – Editor. Wähle dann in der rechten Seitenleiste das halbschattierte Kreissymbol in der oberen rechten Ecke des Bildschirms über der Seitenleiste für die Blockeinstellungen, um das Bedienfeld „Stile“ auszuwählen.

Das Symbol „Stile“ ist im Website – Editor und bei der Bearbeitung der Vorlage verfügbar.
Im Bedienfeld Formatvorlagen findest du Abschnitte für Typografie, Farben und Layout. Alle Änderungen, die du hier vornimmst, wirken sich auf die gesamte Website aus.

Außerdem findest du einen Abschnitt für Blöcke. Wenn du auf den Abschnitt „Blöcke“ klickst wird eine Liste aller Blöcke angezeigt. Du kannst jeden Blocktyp auswählen und das Erscheinungsbild des jeweiligen Blocks für die gesamte Website anpassen.

Variationen für Farbe und Typografie

Farb- und Typografievariationen sind Untergruppen des bestehenden globalen Stilvariationssystems, das in WordPress 6.6 eingeführt wurde. Die Farb- und Typografievariationen sind wie ihr Name schon sagt auf Farben und Typografie beschränkt.

Wenn sie verfügbar sind, erscheinen diese Variationen als neue Optionen in der rechten Seitenleiste.

Typografie


In diesem Bereich kann man die verschiedenen Typografieeinstellungen für die Elemente Text, Links, Überschriften und Schaltflächen für die gesamte Website verwalten. – Klicke auf Typografie, um den Bereich Typografie zu öffnen. Wähle das Element aus, das Du anpassen möchtest, und es öffnet sich das Bedienfeld Typografie für dieses Element.

Du kannst die Typografieeinstellungen ändern, einschließlich Schriftart, Schriftgröße, Aussehen und Zeilenhöhe. Während Du die Auswahl triffst siehst Du eine Vorschau.

Die Schriftgröße ist zwischen S, M, L, XL und XXL wählbar. Man kann auch benutzerdefinierte Werte in px, em und rem einstellen.

Die Typografieeinstellungen für Überschriftenelemente von H1 bis H6 sind hier änderbar.


Farben

In diesem Bereich kannst Du die Farbpaletten und die Standardfarbe verschiedener globaler Elemente auf der Website verwalten. Dazu gehören die Hintergrundfarbe Deiner Website sowie die Farben für Texte, Links, Überschriften und Schaltflächen.

Klicke auf Farben, um den Bereich Farbe zu öffnen. Oben findest du die Farbpalette, die von der Stilvariante deines aktiven Blockthemas verwendet wird. Hier findest du auch die Liste der Elemente, deren globale Standardfarbe über das Panel Farbeinstellungen angepasst werden kann.

HINWEIS: Falls dein Thema keine Farbpaletten hat, siehst du die Schaltfläche Benutzerdefinierte Farben hinzufügen. Klicke darauf, um mit der Erstellung deiner benutzerdefinierten Palette zu beginnen.


Es gibt die Theme Palette

Standard Palette

Indivduelle Palette

Anpassen der Farben in der Themenpalette


Klicke im Bereich Farbeinstellungen auf Palette, um den Bereich Paletten zu öffnen. Hier kann man die Farboptionen festlegen, die standardmäßig für Blöcke auf der Website verfügbar sind. Die Themenfarben auf der Registerkarte „Einfarbig“ können in allen Einstellungen Ihres Themas verwendet werden. Die Standardfarben können in den Blöcken verwendet werden, die Sie auf Ihren Seiten und Beiträgen einsetzen.

Klicke auf das Symbol mit den drei vertikalen Punkten in der oberen rechten Ecke von Thema oder Standard und wähle Farben bearbeiten, um die Farbe der einzelnen Kreise zu ändern.

Die Standardfarben werden nicht angezeigt, wenn Ihr Thema dies ausdrücklich ausschließt.

Es wird eine Liste mit allen Farben angezeigt, die sich derzeit in dieser Palette befinden. Klicken Sie auf eine Farbe, um sie zu bearbeiten.

Sie können entweder eine Farbe aus dem Farbwähler auswählen oder die HEX-, RGB- oder HSL-Farbwerte für Ihre Marke eingeben. Klicken Sie auf die beiden rechteckigen Felder neben dem Farbregler, um die HEX-, RGB- oder HSL-Farbwerte zu kopieren.

Wenn Sie mit der Auswahl der Farben fertig sind, können Sie in der oberen rechten Ecke auf Fertig klicken, um die Farbauswahl zu speichern.

Um die von Ihnen vorgenommenen Änderungen rückgängig zu machen, klicken Sie auf das Symbol mit den drei vertikalen Punkten und wählen Sie Farben zurücksetzen. Dadurch wird die Farbpalette auf die ursprüngliche Auswahl der Stilvariationen des Themas zurückgesetzt.



Hinzufügen einer benutzerdefinierten Farbe zur Themenpalette

Du kannst auch eine benutzerdefinierte Palette im Abschnitt Benutzerdefiniert im Palettenbedienfeld erstellen. – Klicke auf das +-Symbol in der oberen rechten Ecke des Abschnitts Benutzerdefiniert, um eine Farbe hinzuzufügen. – Du kannst einen Namen für die neue Farbe angeben. – Du kannst entweder eine Farbe aus dem Farbwähler auswählen oder die HEX-, RGB- oder HSL-Farbwerte für die neue Farbe eingeben. – Klicke auf das Symbol – rechts neben einer Farbe, um diese Farbe aus der benutzerdefinierten Palette zu entfernen. – Klicke auf fertig, wenn Du alle benutzerdefinierten Farben hinzugefügt hast. – Klicke auf das Symbol mit den drei vertikalen Punkten in der oberen rechten Ecke und wähle alle Farben entfernen aus, um die Farben aus der Palette zu entfernen.



Anpassen der Design-Farbverläufe

Das Palettenbedienfeld wird standardmäßig mit der Registerkarte „Einfarbig“ geöffnet. Du kannst auf die Registerkarte Farbverlauf klicken, um Deinem Design Farbverläufe hinzuzufügen. Im Palettenbedienfeld kannst Du die Standardfarbverläufe, die mit dem Design geliefert wurden, bearbeiten oder benutzerdefinierte Farbverläufe hinzufügen.

Klicke auf das Symbol mit den drei vertikalen Punkten in der oberen rechten Ecke im Abschnitt Standard und dann auf Farbverläufe bearbeiten, um die Farbverläufe im Design anzupassen.

Es erscheint eine Liste mit allen Farbverläufen. Klicke auf einen von ihnen, um ihn zu bearbeiten.

Die Standard-Farbverläufe werden nicht angezeigt, wenn Dein Thema dies ausdrücklich nicht vorsieht.

Es erscheint ein Schieberegler, der die beiden Farbpunkte anzeigt, aus denen der Farbverlauf besteht.

Du kannst auf einen der beiden Farbpunkte klicken, um den Farbwähler zum Ändern des Farbwerts anzuzeigen. Du kannst entweder eine Farbe aus der Farbauswahl wählen oder die HEX-, RGB- oder HSL-Farbwerte eingeben.

Du kannst bei Bedarf weitere Farbpunkte hinzufügen, indem Du auf das +-Symbol klickst, das angezeigt wird, wenn Du den Mauszeiger über den Farbverlaufsschieber bewegst.

Wähle unter Typ zwischen Linear (Übergänge in einer geraden Linie) und Radial (Übergänge in einem Kreis). Du kannst auch den Winkel des Farbverlaufs bearbeiten.

Wenn Sie mit Ihrer Farbauswahl für den Farbverlauf zufrieden sind, klicken Sie in der oberen rechten Ecke auf „Fertig“.

Wenn Du zu den Farben zurückkehren möchtest die mit dem Thema geliefert wurden, klicke auf das Symbol mit den drei vertikalen Punkten in der oberen rechten Ecke und dann auf Farbverlauf zurücksetzen.


Benutzerdefinierten Farbverlauf hinzufügen


Man kann benutzerdefinierte Farbverläufe im Abschnitt Benutzerdefiniert auf der Registerkarte Farbverlauf hinzufügen.

Klicken auf das + Symbol in der oberen rechten Ecke, um einen neuen Farbverlauf hinzuzufügen.

Klicke dann auf den Farbverlauf in der Liste, um die beiden Farbpunkte festzulegen, weitere Farbpunkte hinzuzufügen und den Typ und den Winkel für den benutzerdefinierten Farbverlauf festzulegen.

Man kann den Namen des Farbverlaufs ändern, um ihn intuitiver zu gestalten.

Klicken Sie auf das Symbol – neben dem Farbverlauf in der Liste, um einen benutzerdefinierten Farbverlauf zu löschen.

Klicken Sie auf Fertig, wenn Sie mit den erstellten benutzerdefinierten Farbverläufen zufrieden sind.

Klicken Sie auf das Symbol mit den drei vertikalen Punkten in der oberen rechten Ecke und wählen Sie Alle Farbverläufe entfernen, um alle benutzerdefinierten Farbverläufe mit einem Klick zu löschen.

Anpassen der Farbe von Elementen

Im Panel Farben unter Elemente können Sie die Farbe des Hintergrunds Ihrer Website, von Text, Links, Überschriften und Schaltflächen ändern.

Klicken Sie auf das Element, das Sie bearbeiten möchten, um ein neues Panel mit den Farboptionen für dieses Element zu öffnen.

Während Sie Änderungen vornehmen, wird das Design Ihrer Website auf der linken Seite aktualisiert.

Sie können auf den Link „Löschen“ in der rechten unteren Ecke des Elements klicken, um die für dieses Element getroffenen Farbauswahlen zu löschen.

Für den Hintergrund können Sie eine Volltonfarbe oder einen Farbverlauf festlegen.

Hier Video

Für die Links können Sie die Standardfarbe für Links auf der gesamten Website festlegen. Sie können auch den Hover-Status für die Links festlegen.

Für die Überschriften wählen Sie die Überschriftsebene – H1, H2, H3, H4, H5 und H6 – und können dann die Standardfarbe für diese Ebene auf der gesamten Website festlegen. Sie können auch die Hintergrundfarbe für die ausgewählte Überschriftsebene auf eine Volltonfarbe oder einen Farbverlauf einstellen. Wenn Sie auf der Registerkarte Überschriftenebene die Option Alle wählen, werden die Änderungen für alle Überschriftenebenen gleichzeitig vorgenommen.

How can we help?