Zusätzliche CSS-Klassen zu Blöcken hinzufügen

In dieser Anleitung wird erläutert, wie die Funktion „Zusätzliche CSS-Klassen“ des WordPress-Editors verwendet wird.

In diesem Ratgeber

1. So funktioniert es
2. Eine zusätzliche CSS-Klasse hinzufügen
3. Tipps für die Verwendung von zusätzlichen CSS-Klassen
   1. Einen bestimmten Block auf einer bestimmten Seite anvisieren
   2. Aufzählungszeichen in einer Liste ändern
   3. Vorhandene individuelle CSS-Klassen verwenden

So funktioniert es

Für die Nutzung dieser Funktion sind Grundkenntnisse in der CSS-Programmierung empfehlenswert. So unterstützen wir dich mit CSS.

Unter der Blockeinstellung Erweitert kannst du eine CSS-Klasse zu deinem Block hinzufügen, sodass du individuelles CSS erstellen und den Block nach deinen Wünschen gestalten kannst.

Zusätzliche CSS-Klassen können in den Blockeinstellungen unter Erweitert hinzugefügt werden.

Wenn zum Beispiel nur der Text bestimmter Blöcke im Blocksatz sein soll, kannst du in den Einstellungen des Absatzblocks im Feld für zusätzliche CSS-Klassen eine Klasse wie meine-blocksatzklasse hinzufügen. Gehe nun zum CSS-Editor und schreibe einen Stil für die Klasse:

p.my-justify-class {     
  text-align: justify; 
}

Eine zusätzliche CSS-Klasse hinzufügen

Wenn du eine zusätzliche CSS-Klasse zu einem Block hinzuzufügen möchtest, klicke auf den Block, den du bearbeitest. Suche nun in den Blockeinstellungen rechts nach Erweitert.

Wenn du rechts keine Blockeinstellungen siehst, klicke oben rechts auf das Zahnradsymbol (⚙️), um die Einstellungen zu öffnen.

Jeder Block verfügt über erweiterte Einstellungen, in denen du zusätzliche CSS-Klassen hinzufügen kannst.

Du kannst deine Klasse folgendermaßen definieren:

• Mit einem einzigen Wort, z. B. speziell
• Mit einem Begriff aus mehreren Wörtern, die mit Bindestrichen verbunden sind, z. B. spezielle-klasse

Du kannst demselben Block auch mehrere Klassen hinzufügen, indem du die Klassen mit einem Leerzeichen trennst. Zum Beispiel: spezielle-klasse-1 spezielle-klasse-2

Achte beim Definieren deiner Klasse darauf, dass du keine Klasse verwendest, die bereits im Code der Website definiert ist. Du solltest eindeutige Begriffe wählen, die noch nicht im CSS der Website verwendet werden.

Du weißt vielleicht, dass beim Programmieren von CSS eine Klasse anvisiert wird, indem ein Punkt vor die Klasse gesetzt wird, z. B. .seite. Setze jedoch keinen Punkt vor die Klasse, wenn du sie in den Blockeinstellungen als zusätzliche CSS-Klasse definierst, sonst funktioniert es nicht.

Tipps für die Verwendung von zusätzlichen CSS-Klassen

Einen bestimmten Block auf einer bestimmten Seite anvisieren

Nehmen wir an, du möchtest das Design eines Medien- und Text-Blocks auf deiner Website ändern, aber alle anderen Medien- und Text-Blöcke sollen davon unberührt bleiben. In diesem Beispiel definieren wir die Klasse spezieller-medien-text-block in den Blockeinstellungen unter Erweitert:

Dann können wir unter Anpassen → Zusätzliches CSS dieses CSS zu unserer Website hinzufügen, um diesem Block einen schicken Hintergrundfarbverlauf zu verleihen:

.special-media-text-block {
  background-image: linear-gradient(to bottom right, red, blue);
}

Das sieht dann so aus:

Aufzählungszeichen in einer Liste ändern

Du kannst die Aufzählungszeichen einer Liste von Punkten als Quadrate, nicht ausgefüllte Punkte, römische Zahlen und vieles mehr darstellen!

Definiere eine Klasse wie eckige-aufzählungszeichen-listenblock folgendermaßen:

Dem Listenblock eine individuelle Klasse hinzufügen

Gib dann in deinen CSS-Editor dieses CSS ein:

.square-bullet-list-block {
     list-style-type: square;
}

Das Ergebnis sieht so aus:

Ein Listenblock mit Quadraten als Aufzählungszeichen!

Denke daran, dass du je nach Design deines Themes zum obigen CSS eine Klasse wie <li> hinzufügen musst, um die richtige Klasse anzuvisieren.

Vorhandene individuelle CSS-Klassen verwenden

Einige Klassen sind in WordPress vordefiniert. Du kannst sie zu deinen Blöcken hinzufügen, um tolle Effekte zu erzielen.

Mit is-style-circle-mask zum Beispiel wird das Bild in einem Bildblock in einem Kreis dargestellt:

Der Effekt der Klasse is-style-circle-mask

Wenn du die Klasse entfernst, wird auch der Kreiseffekt entfernt.

Im Folgenden haben wir noch ein paar vorhandene CSS-Klassen aufgelistet, die von einigen Blöcken unterstützt werden. Beachte jedoch, dass Theme-Stile diese vorhandenen Klassen überschreiben können. Verwende für ein optimales Ergebnis eines der empfohlenen Themes.

• aligncenter
• alignright
• alignleft
• alignwide
• alignfull
• has-small-font-size
• has-large-font-size
• has-huge-font-size
• has-drop-cap