Stile sind eine Funktion, mit der du die allgemeine Ästhetik und das Layout deiner Website auf globaler Ebene festlegen kannst, anstatt einzelne Blöcke oder Seiten zu bearbeiten. Sie ist in Blockthemen enthalten und erfordert WordPress 5.9 oder höher.

Du kannst Farben, Typografie, Layout, Abstände und mehr für die gesamte Site festlegen und deiner Website ein einheitliches Erscheinungsbild verleihen.

Du kannst auch das Standarderscheinungsbild von Blöcken bearbeiten, um das Erscheinungsbild deiner Website zu optimieren – füge deine individuellen Farben hinzu, um einen Button-Block zu erstellen, oder passe den Überschriftenblock an deine bevorzugte Schriftgröße an.

So funktionieren Stile

Die Stile, die du im Stilebuch festlegst, wirken sich auf deine gesamte Website aus.

Hier ein Beispiel: Wenn du die Hintergrundfarbe änderst, ändert sich die Hintergrundfarbe aller deiner Beiträge, Seiten und Vorlagen.

Im Bereich „Stile“ findest du die Stile und Standardeinstellungen deines Designs sowie die in WordPress enthaltenen Stile und Einstellungen.

Du kannst diese Einstellungen mit deinen eigenen Auswahlmöglichkeiten aus dem Bedienfeld „Stile“ überschreiben. Du kannst beispielsweise der Farbpalette deine eigenen benutzerdefinierten Farben hinzufügen, die Layoutabmessungen ändern und vieles mehr.

So verwendest du das Stilfenster

Um auf diese Funktion zugreifen zu können, musst du ein Blockthema installieren und aktivieren sowie WordPress 5.9 oder höher verwenden.

Gehe zu Darstellung > Editor. Wähle das halbschattierte Kreissymbol in der oberen rechten Ecke des Bildschirms über der Seitenleiste mit den Blockeinstellungen, um auf das Bedienfeld „Stile“ zuzugreifen. Das Symbol „Stile“ ist im Site-Editor und beim Bearbeiten der Vorlage oder von Vorlagenteilen verfügbar.

Im Bedienfeld „Stile“ siehst du die Abschnitte Typografie, Farben und Layout. Alle hier vorgenommenen Änderungen wirken sich auf die gesamte Site aus.

Du findest auch einen Abschnitt für Blöcke. Wenn du auf den Abschnitt Blöcke klickst, wird dir eine Liste aller Blöcke angezeigt. Du kannst jeden Blocktyp auswählen und das Erscheinungsbild dieses bestimmten Blocks auf der gesamten Site anpassen.

Der Stile-Willkommensleitfaden

Wenn du das Bedienfeld „Stile“ zum ersten Mal öffnest, wird ein Willkommensdialogfeld angezeigt. Du kannst dich mithilfe der Links Weiter und Zurück durch den Leitfaden klicken oder das Dialogfeld schließen, indem du oben rechts im Dialogfeld auf das x-Symbol klickst.

Falls du später erneut auf den Willkommensleitfaden zugreifen möchtest, kannst du ihn finden, indem du oben rechts auf das Symbol mit den drei vertikalen Punkten klickst und Willkommensleitfaden auswählst.

Stilvariationen

So verwendest du die Stilvariationen

Stilvariationen sind eine neue Funktion von Blockthemen, die in WordPress 6.0 eingeführt wurden.

Mit diesen Stilvarianten erhältst du alternative Versionen deines Blockdesigns mit unterschiedlichen Kombinationen aus Farben, Schriftarten, Typografie, Abständen, Blockeinstellungen und mehr. Du kannst die Stilvarianten problemlos austauschen und das Erscheinungsbild deiner Site ändern, ohne dein Design zu verändern.

• Im Bereich Stile findest du einen Screenshot der Stilvariante, die deine Site derzeit verwendet.
• Wähle unten im Screenshot Stile durchsuchen aus, um die verschiedenen Stilvarianten zu erkunden, die für dein Blockdesign verfügbar sind. Du kannst eine andere Stilkombination auswählen und im Editor sofort sehen, wie deine Site mit dieser Stilvariante aussieht.
• Klicke auf das Symbol mit dem linken Pfeil, um zum Bedienfeld Stile zurückzukehren.

Typografie

In diesem Abschnitt kannst du die verschiedenen Typografieeinstellungen für die unterschiedlichen Elemente (Text, Links, Überschriften und Schaltflächen) für die gesamte Site verwalten.

1. Klicke auf Typografie, um das Fenster „Typografie“ zu öffnen. Wähle das Element aus, das du anpassen möchtest.
2. Du kannst die Typografieeinstellungen ändern, einschließlich Schriftart, Schriftgröße, Erscheinungsbild und Zeilenhöhe. Während du deine Auswahl triffst, kannst du eine Vorschau des Erscheinungsbilds sehen.
3. Die Schriftgröße kannst du auf S, M, L, XL oder XXL einstellen oder benutzerdefinierte Werte in px, em oder rem festlegen.
4. Du kannst die Typografie-Einstellungen für Überschriftenelemente von H1 bis H6 ändern.

Farben

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

1. Klicke auf Farben, um das Farbfenster zu öffnen. Oben findest du die Farbpalette, die von der Stilvariante deines aktiven Blockdesigns verwendet wird.
2. Falls dein Design keine Farbpaletten hat, wird die Schaltfläche Benutzerdefinierte Farben hinzufügen angezeigt. Klicke darauf, um mit der Erstellung deiner benutzerdefinierten Palette zu beginnen.
3. Klicke auf Palette, um das Palettenfenster zu öffnen. Hier kannst du die Farboptionen festlegen, die standardmäßig für Blöcke auf deiner Website verfügbar sind.
4. Klicke auf das Symbol mit den drei vertikalen Punkten in der oberen rechten Ecke von Design oder Standard und wähle Farben bearbeiten, um die Farbe jedes Kreises zu ändern.
5. Wenn du mit der Farbauswahl fertig bist, klicke oben rechts auf Fertig, um die Farbauswahl zu speichern.
6. Um die vorgenommenen Änderungen rückgängig zu machen, klicke auf das Symbol mit den drei vertikalen Punkten und wähle Farben zurücksetzen.

Mit diesen Funktionen kannst du das Design deiner Site ganz nach deinen Vorstellungen gestalten und anpassen!

Es wird ein Schieberegler angezeigt, der die beiden Farbpunkte zeigt, aus denen der Farbverlauf besteht.

Die beiden Farbpunkte im Verlauf

Du kannst auf einen der beiden Farbpunkte klicken, um die Farbauswahl 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 erscheint, wenn du den Mauszeiger über den Verlaufsregler bewegst.

Hinzufügen zusätzlicher Farbwähler im Verlaufsregler

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

Wenn du mit der Farbauswahl für den Farbverlauf zufrieden bist, klicke oben rechts auf „Fertig“.

Um zu den Farben zurückzukehren, die mit dem Design geliefert wurden, klicke auf das Symbol mit den drei vertikalen Punkten in der oberen rechten Ecke und wähle „Farbverlauf zurücksetzen“.

Benutzerdefinierten Farbverlauf hinzufügen

Du kannst benutzerdefinierte Farbverläufe aus dem Abschnitt „Benutzerdefiniert“ auf der Registerkarte „Farbverlauf“ hinzufügen.

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

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

Du kannst den Namen des Farbverlaufs ändern, um ihn intuitiver zu gestalten.

Klicke auf das Symbol „–“ neben dem Farbverlauf in der Liste, um einen benutzerdefinierten Farbverlauf zu löschen.

Klicke auf „Fertig“, wenn du mit den erstellten benutzerdefinierten Farbverläufen zufrieden bist.

Klicke oben rechts auf das Symbol mit den drei vertikalen Punkten und wähle „Alle Verläufe entfernen“, um alle benutzerdefinierten Verläufe mit einem Klick zu löschen.

Passen der Farbe der Elemente an

Im Bedienfeld „Farben“ kannst du unter „Elemente“ die Farbe des Site-Hintergrunds, des Textes, der Links, Überschriften und Schaltflächen ändern.

Klicke auf das Element, das du bearbeiten möchtest, um ein neues Fenster mit den Farboptionen für dieses Element zu öffnen.

Wenn du Änderungen vornimmst, wird auf der linken Seite das Design deiner Site aktualisiert.

Du kannst auf den Link „Löschen“ in der unteren rechten Ecke des Elementfensters klicken, um die Farbauswahl zu entfernen, die du für dieses Element getroffen hast.

Für den Hintergrund kannst du eine Volltonfarbe oder einen Farbverlauf festlegen.

Für den Text kannst du eine Standardfarbe festlegen, die auf der gesamten Site verwendet wird. Du kannst entweder eine Farbe aus der Farbauswahl wählen oder die HEX-, RGB- oder HSL-Farbwerte für die neue Farbe eingeben.

Für die Links kannst du die Standardfarbe für Links auf der gesamten Site festlegen. Du kannst auch den Hover-Status für die Links bestimmen.

Wähle für die Überschriften die Überschriftenebene aus H1, H2, H3, H4, H5 und H6 und lege dann die Standardfarbe für diese Ebene auf der gesamten Site fest. Du kannst die Hintergrundfarbe für die ausgewählte Überschriftenebene auch auf eine Vollton- oder Farbverlaufsfarbe festlegen. Wenn du auf der Registerkarte „Überschriftenebene“ die Option „Alle“ wählst, werden die Änderungen für alle Überschriftenebenen gleichzeitig vorgenommen.

Für die Schaltflächen kannst du die Standardtext- und Hintergrundfarbe für Schaltflächen auf der gesamten Site festlegen.

Layout

Festlegen der Inhaltsbreiten im Layoutbereich

In diesem Abschnitt kannst du die Breite des Hauptinhaltsbereichs deiner Website global festlegen.

Du kannst die Inhaltsbreite und die Breite in den Einheiten PX, %, EM, REM, VW und VH festlegen. Die hier festgelegte Inhaltsbreite ist die Standardbreite der Blöcke, wenn in der Block-Symbolleiste „Ausrichten“ auf „Keine“ gesetzt ist. Die hier festgelegte Breite ist die Breite der Blöcke, wenn in der Block-Symbolleiste „Ausrichten“ auf „Breite“ gesetzt ist.

Um die Werte für „Inhalt“ und „Breite“ zurückzusetzen, klicke auf das Symbol mit den drei vertikalen Punkten und wähle „Inhaltsgröße“ oder „Breite“ aus. Die von dir vorgenommenen Änderungen werden dann rückgängig gemacht.

Zurücksetzen des Inhalts und der Breitgröße

Du kannst im Layout-Bedienfeld auch die Polsterung oder den Leerraum um deine Website herum festlegen.

Du kannst die Polsterung auf den vier Seiten einstellen: oben, rechts, unten und links.

Standardmäßig ist die Polsterung gesperrt, d. h. wenn du den Polsterungswert anpasst, wird dieser für alle vier Seiten angewendet. Wenn du auf das Verknüpfungssymbol klickst, wird die Verknüpfung der Seiten aufgehoben und du kannst die Polsterung für jede Seite einzeln festlegen.

Die Polsterung kann in den Einheiten PX, %, EM, REM, VW und VH eingestellt werden.

Du kannst dem Textfeld Werte hinzufügen oder die Werte für die Polsterung mit dem Schieberegler anpassen.

Wenn du auf das schwarze Schiebereglersymbol in der rechten Ecke (neben dem Linksymbol) klickst, wird der Schieberegler für die Vorgabe des Innenabstands angezeigt.

Um die Werte für „Padding“ zurückzusetzen, klicke auf das Symbol mit den drei vertikalen Punkten und wähle „Padding“ aus. Die von dir vorgenommenen Änderungen werden dann rückgängig gemacht.

Im Layout-Bedienfeld kannst du auch den Blockabstand festlegen, also den vertikalen Abstand zwischen den Blöcken.

Der Blockabstand kann in den Einheiten PX, %, EM, REM, VW und VH eingestellt werden.

Du kannst dem Textfeld Werte hinzufügen oder den Schieberegler verwenden, um die Werte für den Blockabstand anzupassen.

Wenn du auf das schwarze Schiebereglersymbol in der rechten Ecke (neben dem Linksymbol) klickst, wird der Schieberegler für die Blockabstandsvorgabe angezeigt.

Um die Werte für den Blockabstand zurückzusetzen, klicke auf das Symbol mit den drei vertikalen Punkten und wähle „Blockabstand“ aus. Die von dir vorgenommenen Änderungen werden dann rückgängig gemacht.

Blöcke

Im Blockfenster siehst du eine Liste aller Blöcke, die für die gesamte Site angepasst werden können. Du kannst auch über das Suchfeld nach einem Block anhand seines Namens suchen. Klicke in der Liste auf einen Block, um die verfügbaren Optionen für diesen Block anzuzeigen.

Jeder Block verfügt über einen eigenen Satz an Optionen zum Anpassen. Du kannst beispielsweise den Rahmen, den Radius oder den Duoton für den Bildblock anpassen oder die Auffüllungen, Ränder, Farben und Schriftarten für den Überschriftenblock ändern.

Randeinstellungen für Blöcke

Als Polsterung bezeichnet man den Abstand zwischen dem Inhalt eines Blocks und seinem Rand, während als Rand der Abstand außerhalb des Rands eines Blocks bezeichnet wird.

Die folgenden Blöcke verfügen über eine Randsteuerung für Oben, Rechts, Unten und Links im Abschnitt „Blöcke“ unter „Layouts“:

• Absatz
• Überschrift
• Galerie
• Liste
• Archiv
• Audio
• Kategorienliste
• Medien & Text
• Soziale Symbole
• Tisch
• Tag Cloud
• Vers
• Video
• Site-Logo
• Site-Titel
• Slogan der Site
• Avatar
• Beitragstitel
• Beitragsauszug
• Beitragsvorgestelltes Bild
• Veröffentlichungsdatum
• Autor des Beitrags
• Kommentarautor
• Kommentar Datum
• Kommentar-Bearbeitungslink
• Kommentarantwort-Link
• Kommentartitel
• Begriff Beschreibung
• Abfragetitel
• Biografie des Autors des Beitrags

Die folgenden Blöcke verfügen nur im Abschnitt „Blöcke“ unter „Layouts“ über eine Randsteuerung für „Oben“ und „Unten“:

• Schaltflächen
• Code
• Abdeckung
• Gruppe
• Spalten
• Separator
• Abstandhalter
• Mehr lesen

Standardmäßig ist der Rand gesperrt, d. h. wenn du den Randwert anpasst, gilt dieser für alle Seiten. Wenn du auf das Verknüpfungssymbol klickst, wird die Verknüpfung der Seiten aufgehoben und du kannst den Rand auf jeder Seite einzeln festlegen.

Der Autor deines Designs kann Grundwerte für den Abstand festlegen. Wenn du den Schieberegler für die Randvorgabe in den Stilen verwendest, kannst du zwischen den Elementen auf der Site einen einheitlichen Abstand schaffen.

Wenn du auf das Schiebereglersymbol in der rechten Ecke (neben dem Linksymbol) klickst, werden die Randsteuerungen vom voreingestellten Schieberegler zur Textfeldansicht umgeschaltet. Du kannst dem Textfeld Werte hinzufügen oder den Schieberegler verwenden, um die Werte für den Rand anzupassen. Der Rand kann in den Einheiten PX, %, EM, REM, VW und VH eingestellt werden.

Um die Werte für „Rand“ zurückzusetzen, klicke auf das Symbol mit den drei vertikalen Punkten und wähle „Rand“ aus. Die von dir vorgenommenen Änderungen werden dann rückgängig gemacht.

Rand- und Radiuseinstellungen für Blöcke

Die folgenden Blöcke verfügen über eine Rand- und Radiussteuerung im Abschnitt „Blöcke“ unter „Layouts“:

• Bild
• Code
• Spalten
• Gruppe
• Zitatauszug
• Suchen
• Avatar
• Ausgewähltes Bild veröffentlichen
• Mehr lesen
• Kommentartitel

Mithilfe der Rahmensteuerung kannst du den Rahmen um einen Block festlegen. Du kannst die Rahmenfarbe aus der Farbauswahl auswählen. Du kannst die Rahmenbreite in PX, %, EM, REM, VW oder VH festlegen, indem du die Breite in das Textfeld eingibst oder die Werte mit dem Schieberegler anpasst.

Standardmäßig ist die Rahmenbreite gesperrt, d. h. wenn du den Wert änderst, wird er für alle Seiten angewendet. Wenn du auf das Verknüpfungssymbol klickst, wird die Verknüpfung der Seiten aufgehoben und du kannst den Rahmen für jede Seite einzeln festlegen.

Mit den Radius-Steuerelementen kannst du die Ecken der äußeren Ränder eines Blocks abrunden. Du kannst den Randradius auch in PX, %, EM, REM, VW oder VH festlegen, indem du den Wert in das Textfeld eingibst oder den Schieberegler anpasst.

Standardmäßig ist der Rahmenradius gesperrt, d. h. wenn du den Wert änderst, wird er für alle vier Ecken angewendet. Wenn du auf das Verknüpfungssymbol klickst, wird die Verknüpfung der Ecken aufgehoben und du kannst den Radius für jede Ecke einzeln festlegen – Oben links, Oben rechts, Unten links und Unten rechts.

Horizontale Blockabstandseinstellungen für Blöcke

Die folgenden Blöcke verfügen über eine Steuerung des horizontalen Blockabstands im Abschnitt „Blöcke“ unter „Layouts“:

• Spalten
• Soziale Symbole

Standardmäßig ist die Blockabstandssteuerung gesperrt, was bedeutet, dass der Wert, den du anpasst, sowohl horizontal als auch vertikal gilt. Wenn du auf das Verknüpfungssymbol klickst, wird die Verknüpfung aufgehoben und du kannst den Blockabstand für vertikal und horizontal separat festlegen.

Blockvarianten bearbeiten

Einige Blöcke sind mit Variationen ausgestattet, also mit verschiedenen Optionen desselben Blocks. Wenn das der Fall ist, siehst du ab WordPress 6.2 die Option zur Anpassung.

Hinzufügen von Kastenschatten zum Schaltflächenblock

Mit WordPress 6.2 gibt es standardmäßig vier Schattenvoreinstellungen, aus denen du wählen kannst. Die folgenden sind standardmäßig verfügbar:

• Natürlich
• Knackig
• Scharf
• Weich

Gestaltung des Site-Slogans

Im Abschnitt „Globale Stile“ kannst du den Site-Slogan festlegen und aufheben. Du kannst in diesem Abschnitt auch die Schriftart und Farbe des Site-Slogans aktualisieren. Dies ist eine optionale Einstellung, die du je nach Bedarf verwenden kannst.

Vorschau deiner Änderungen mit dem Stylebook

Wenn du Änderungen an den Stilen deiner Site vornimmst, sei es beim Wechsel zu einer anderen Stilvariante oder beim Optimieren eines einzelnen Blocks, ist es wichtig, die kaskadierenden Auswirkungen zu sehen. Mit der Ergänzung des Stilbuchs in WordPress 6.2, einer Ansicht, die du nach Belieben ein- und ausschalten kannst, kannst du alle deine Blöcke auf deiner Site sehen, während du Änderungen vornimmst.

Anwenden von benutzerdefiniertem CSS

Der Site-Editor ermöglicht dir, Anpassungen auf jeder Ebene deiner Website vorzunehmen. In manchen Fällen gibt es jedoch Lücken in den Funktionen. Deshalb solltest du zuerst die verfügbaren Optionen in den Stilen nutzen, bevor du benutzerdefiniertes CSS hinzufügst. Falls du dennoch Anpassungen brauchst, kannst du benutzerdefiniertes CSS verwenden. Beachte, dass alle CSS-Änderungen nicht durch ein Design-Update überschrieben werden, aber beim Wechseln des Designs verloren gehen.

Siteweites benutzerdefiniertes CSS

Ab WordPress 6.2 gibt es einen globalen CSS-Editor in der Styles-Oberfläche. Klicke auf das Drei-Punkte-Menü und wähle „Zusätzliches CSS“. Alle hier hinzugefügten CSS-Regeln gelten für die gesamte Website.

Sobald du globales benutzerdefiniertes CSS speicherst, erscheint in der Hauptstil-Oberfläche ein zusätzliches CSS-Feld.

CSS pro Block

Wenn du unter „Stile > Blöcke“ zu einem bestimmten Block navigierst, findest du dort den Abschnitt „Zusätzliches Block-CSS“. Das CSS, das du hier hinzufügst, gilt nur für diesen Blocktyp auf der gesamten Website.

Da das CSS nur für diesen Blocktyp gilt, musst du keinen Selektor oder geschweifte Klammern hinzufügen. Verwende einfach das property: value-Format.

Möchtest du beispielsweise den Zitattext eines Zitatblocks kursiv darstellen, kannst du im CSS-Editor des Zitatblocks Folgendes hinzufügen:

Möchtest du beispielsweise den Zitattext eines Zitatblocks kursiv darstellen, kannst du im CSS-Editor des Zitatblocks Folgendes hinzufügen:

font-style: italic;

So sieht das im Editor aus:
(Screenshot eines Zitatblocks mit kursivem Text)

Und so wird das CSS im Frontend ausgegeben:

.wp-block-quote {
font-style: italic;
}

WordPress fügt das property: value-Paar automatisch dem Block-Selektor hinzu.

Mithilfe von CSS-Kombinatoren (z. B. Leerzeichen) oder Pseudoklassen kannst du noch komplexere Effekte erstellen – etwa Hover-Zustände. Du kannst auch das &-Symbol wie in SASS/LESS verwenden, um verschachtelte Elemente anzusprechen.

Hier ein Beispiel für benutzerdefiniertes CSS im Button-Block, um eine Hover-Farbe festzulegen:

:hover {
background: #bb00bb;
}

Beachte, dass du in diesem Fall geschweifte Klammern einfügen musst. Das resultierende CSS im Frontend sieht dann so aus:

.wp-block-button .wp-block-button__link:hover {
background: #bb00bb;
}

Setze deine Änderungen zurück

Falls du zu den ursprünglichen Designstilen zurückkehren möchtest, klicke im „Stile“-Bedienfeld auf das Drei-Punkte-Menü in der oberen rechten Ecke und wähle „Auf Standard zurücksetzen“.

Link:
https://wordpress.org/documentation/article/styles-overview/