Im Gutenberg-Editor mit CSS-Klassen arbeiten

Eine relativ einfache Methode, das Aussehen eines Gutenberg-Blocks anzupassen, ist das Arbeiten mit CSS-Klassen.

Bei jedem Gutenberg-Block gibt es die Möglichkeit, eine CSS-Klasse einzutragen. Ich arbeite viel mit solchen Helfer-Klassen. Sie lassen sich gut in die CSS-Systematik eines Projekts integrieren.

Das Feld dafür findest du unter Erweitert/Zusätzliche CSS-Klassen(n).
Hier die CSS-Einstellung für den Absatz-Block:

Eine CSS-Klasse schreiben

Angenommen, ich möchte die Hintergrundfarbe vom Absatz ändern. Dann denke ich mir eine passende Helfer-Klasse aus.

Ich gebe die Farbe für den Hintergrund an background-color: crimson sowie die Farbe für die Schrift color: white. Würde ich die Schriftfarbe nicht ändern, bliebe die Schrift schwarz. Das wäre ein bisschen zu dunkel und ergäbe keinen gut lesbaren Kontrast. Damit das Ganze etwas luftiger aussieht, gebe ich dem Absatz-Block noch etwas äußeren Abstand padding: 1em.

.bg-crimson{
background-color:crimson;
color:white;
padding:1em;
}

In meiner CSS-Systematik sind die Helfer-Klassen eher allgemein gehalten. So kann ich sie auch auf andere Text-Elemente (z.B. Listen, Überschriften, Zitate) anwenden.

Diesem Absatzblock habe ich die zusätzliche CSS-Klasse bg-crimson zugewiesen.

Die CSS-Klasse einbauen

Damit die CSS-Klasse greift, muss ich das CSS an zwei Stellen einbinden:

  1. Im dazugehörigen Feld in den Einstellungen des Blocks trage ich den Namen der CSS-Klasse ein
    [Wichtig: Den Punkt vor der CSS-Klasse in den Block-Einstellungen weglassen, hier nur den Namen eintragen]
  2. Im Customizer unter „Zusätzliches CSS“ trage ich die ganze CSS-Anweisung ein

Ja nachdem, wie dein Theme aufgebaut ist, kann es sein, dass die CSS-Anweisung nicht sofort greift. Dann kannst du versuchen, die Angaben im Customizer mit !important zu verstärken.

.bg-crimson{
background-color:crimson !important;
color:white;
padding:1em;
}

Kommentare, die nichts mit dem jeweiligen Artikel zu tun haben, oder die (weitgehend) inhaltslos sind und keinen Mehrwert für andere Leserinnen und Leser bieten, veröffentlichen wir nicht.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Hinweise zum Datenschutz
Wenn du einen Kommentar schreibst, wird dieser inklusive Metadaten zeitlich unbegrenzt gespeichert. Auf diese Art können wir Folgekommentare automatisch erkennen und freigeben, anstelle sie in einer Moderations-Warteschlange festzuhalten.
Wenn Besucher Kommentare auf der Website schreiben, sammeln wir die Daten, die im Kommentar-Formular angezeigt werden, außerdem die IP-Adresse des Besuchers und den User-Agent-String (damit wird der Browser identifiziert), um die Erkennung von Spam zu unterstützen. Aus deiner E-Mail-Adresse kann eine anonymisierte Zeichenfolge erstellt (auch Hash genannt) und dem Gravatar-Dienst übergeben werden, um zu prüfen, ob du diesen benutzt.
Die Datenschutzerklärung des Gravatar-Dienstes findest du hier.
Nachdem dein Kommentar freigegeben wurde, ist dein Profilbild öffentlich im Kontext deines Kommentars sichtbar.