Globale Blöcke wie Buttons bei Block Themes gestalten

Globale Blöcke wie Buttons bei Block Themes gestalten und Eigenschaften ändern

Globale Einstellungen von Blöcken bei Block Themes habe ich leider häufig übersehen. Man kann z. B. die Schriftgröße, Farben, Innen- und Außenabstände, zusätzliches CSS bei bestimmten Blöcken wie z. B. dem Button-Block direkt über den Website-Editor ändern. Diese Einstellungen gelten dann für die komplette Website. Wie das funktioniert, erläutere ich in dem folgenden Beitrag.

Globale Einstellungen für Blöcke im WordPress-Website-Editor sind zentrale Design- und Funktionseinstellungen, die automatisch für die ganze Website oder gezielt für einzelne Blöcke gelten. Sie werden meist über den Site Editor („Website-Editor“) oder die Datei theme.json im verwendeten Block-Theme verwaltet. In diesem Beitrag geht es um die Änderung der globalen Einstellungen über den Website-Editor. Wie man die Gestaltung über die theme.json vornimmt, werde ich in einem nächsten Beitrag erläutern.

Bei Änderungen, die Blöcke oder die Stile bei Block Themes betreffen, erstelle ich in der Regel zunächst ein Child Theme. Ein Child Theme kann man sehr schön und bequem mit dem Plugin Create Block Theme erstellen.

Erstellung des Child Themes mit dem Plugin Create Block Theme

Zunächst wird das Plugin wie gewohnt über das WordPress Repository auf der Website installiert und aktiviert. Anschließend findet man unter Design einen weiteren Menüpunkt „Block Theme erstellen“. In meinen Beispiel verwende ich als Theme das aktuelle Standardtheme Twenty Twenty-Five. Um ein Child Theme zu erstellen, kann man die letzte Option „Create a Child of Twenty Twenty-Five“ wählen. Anschließend können noch ein paar Dinge eingegeben werden, wie z. B. Name des Child Themes, Beschreibung des Themes und Autor.

Nach Klick auf Option „Create a child of Twenty Twenty-Five“ erfolgt die Meldung: „Theme created successfully. The editor will now load.“ Danach findet man unter Design das Child Theme von Twenty Twenty-Five.

Jetzt kann man gefahrlos z. B. Änderungen in dem Child Theme vornehmen. Wie immer empfehle ich aber zunächst eine Sicherung zu erstellen.

Eigenschaften bei Buttons bzw. Button ändern

Zunächst schauen wir uns den Unterschied zwischen den Blöcken „Buttons“ und „Button“ im Website-Editor an:

Button (Einzelner Button)

• Ein einzelner klickbarer Button, z. B. „Jetzt kaufen“, „Mehr erfahren“ o. ä.
• Kann direkt in Beiträge, Seiten oder innerhalb eines „Buttons“-Blocks eingefügt werden.
• Änderung der Stiloptionen: z. B. Farbe, Rundung, Textgröße, Ausrichtung…

Buttons (Eltern-Block für mehrere Buttons)

• Ein Container-Block, der dazu dient, mehrere Buttons nebeneinander oder untereinander anzuordnen.
• Stiloptionen: z. B. Hintergrundfarbe des Containers für die gesamt Button-Leiste…

In unserem Fall soll für einen Button global die Hintergrundfarbe und die Schriftgröße geändert werden. Dazu müssen wir unter Design > Website-Editor unter Stile auf Blöcke und dann auf „Button“ (bei einem einzelnen Button) klicken:

Wenn man ein Template bearbeitet, dann findet man die Stile bei dem „Halbmond“ (siehe Markierung).

Wenn man auf „Button“ geklickt hat, sieht man die Stile, die eingestellt werden können.

In unserem Fall ändern wir die Textfarbe (1), Hintergrundfarbe (2), Größe (3) und das Design (4). Schließlich klicken wir auf den Button links unten: „Änderung überprüfen“ (5). Hier erfolgt die Meldung: „Es gibt 1 Website-Änderung, die noch gespeichert werden muss.“ und darunter wird gemeldet „Globale Stile – Custom Styles, Button Block“. Durch Klick auf den „Speichern“-Button werden die Änderungen übernommen.

Wenn man den Button dann z. B. in einem Beitrag verwendet, dann sieht das wie folgt aus:

Auf die Art und Weise kann man schon im Vorfeld Blöcke so gestalten wie das gewünscht ist ohne jedes Mal Stil-Einstellungen in den einzelnen Beiträgen oder auf Seiten durchzuführen.

Analog können Änderungen auch bei anderen Blöcken erstellt werden.

Zusätzliches CSS für den Button-Block

Interessant ist noch eine Option, die man unter Stile für den Button-Block bei „Erweitert“ seit WordPress 6.2 findet: Man kann hier speziell für die jeweiligen Blöcke zusätzliches CSS erfassen.
Das ist besonders in dem Fall interessant, wenn man über die Einstellungen bestimmte Dinge nicht einrichten kann. Aktuell ist das für „Hover“ beim Button der Fall. „Hover“ bei einem Button bedeutet, dass sich das Aussehen des Buttons verändert, sobald mit der Maus darübergefahren wird – zum Beispiel durch eine Farbänderung, einen Schatten oder eine Animation.

Hier ein Beispiel, bei dem die Pseudoklasse „Hover“ über zusätzliches CSS beim Button Block eingerichtet wird:

Normalerweise müsste man die CSS-Regel mit dem CSS-Selektor wie folgt definieren:

.wp-block-button__link:hover {
  background-color: black;
  color: yellow;
  outline-style: dotted;       /* gepunktet statt durchgehend */
  outline-width: 10px;         /* dicke Outline (große Punkte je nach Browserdarstellung) */
  outline-color: black;        /* Farbe der Outline */
  outline-offset: 2px;         /* Abstand der Outline vom Element */
  border-color: black;         /* optional – sorgt für nahtlose Optik bei transparentem Rand */
}

Wenn man die Klasse aber über „Zusätzliches CSS“ direkt beim Block definiert, dann werden nur die Eigenschaften und Werte eingefügt:

:hover {
  background-color: black;
  color: yellow;
  outline-style: dotted;       /* gepunktet statt durchgehend */
  outline-width: 10px;         /* dicke Outline (große Punkte je nach Browserdarstellung) */
  outline-color: black;        /* Farbe der Outline */
  outline-offset: 2px;         /* Abstand der Outline vom Element */
  border-color: black;         /* optional – sorgt für nahtlose Optik bei transparentem Rand */
}

Wie das aussieht, zeige ich in dem folgenden kurzen Video:

Fazit

Ich muss gestehen, dass ich diese Option lange Zeit gar nicht so richtig wahrgenommen habe. Sie bietet aber eine sehr schöne Möglichkeit, global Blöcke zu gestalten und damit ein einheitliches Design zu gewährleisten. Besonders interessant finde ich die Option des zusätzlichen CSS. Wenn ich bis dato CSS verwendet habe, dann direkt unter Stile, aber eben nicht blockbezogen. Die hier geschilderte Möglichkeit kann aber dafür sorgen, dass zusätzliches CSS besser verortet werden kann.

Links, Quellen und aktuelle Infos

• Plugin Dynamic Header & Navigation for Block Themes zur Gestaltung der Navigation mit Sticky und shrinked Header, Breakpoint und Off Canvas
• Global Styles und Variationen in Block-Themes
• Einführung: Block-Themes und globale Block-Einstellungen
• Erstellen eines Blockthemes mit dem Plugin Create Block Theme
• Einführung in globale Stile

Weitere Beiträge zum Thema

• Globale Blöcke wie Buttons bei Block Themes gestalten
• Navigation: Animierter Unterstrich bei Block Themes
• Gruppe-Block: Ausrichtung individuell ändern
• Warum ich über WordPress blogge
• KI frisst Blogs

Wir freuen uns über eine Kontaktaufnahme

02722-6577725

info@haurand.com

Was hältst du davon?

Wir hoffen, dieser Beitrag hat dir gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.

Newsletter: Wenn du über unsere neuesten Beiträge und Neuigkeiten rund um WordPress informiert werden möchtest, kannst du dich gerne bei unserem kostenlosen Newsletter anmelden.

Blog: Auf der folgenden Seite findest du weitere interessante Beiträge sortiert nach Kategorien und Schlagwörtern.