In dieser Anleitung wird erläutert, wie die Funktion „Zusätzliche CSS-Klassen“ des WordPress-Editors verwendet wird.
In diesem Ratgeber
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.
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;
}
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.
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.
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:
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:
Gib dann in deinen CSS-Editor dieses CSS ein:
.square-bullet-list-block {
list-style-type: square;
}
Das Ergebnis sieht so aus:
Denke daran, dass du je nach Design deines Themes zum obigen CSS eine Klasse wie <li> hinzufügen musst, um die richtige Klasse anzuvisieren.
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:
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