In diesem kleinen Tutorial zeige ich Dir, wie Du im Gutenberg-Editor (Block-Editor) Deiner WordPress Webseite einen Rahmen/Frame mit oder ohne Schatten um Blöcke ziehen, setzen, „malen“ kannst.

Irgendwann bemerkte ich, dass meine Beiträge irgendwie chaotisch aussahen. Vor allem dann, wenn es ein recht langer Artikel mit vielen Unterthemen wurde.

Ich könnte größere Abstände zusätzlich mit Trennlinien und farbig hervorgehobenen H1-Überschriften einfügen. Doch das Chaos, bestehend aus mehreren Farben und verschiedenen Schriftgrößen, gab kein gutes Erscheinungsbild ab.

Rahmen mit CSS festlegen

Wie setzte ich mit dem Gutenberg-Editor einen Rahmen um einen Block?

1.) Eine zusätzliche CSS-Klasse anlegen

In der Block-Navigation (rechte Seite im Editor) kannst Du einem Block CSS-Styles zuweisen und dadurch sein Aussehen ändern.

Trage in das Feld „Zusätzliche CSS-Klassen(n)“ einen einprägsamen Namen/Bezeichner ein, denn Du möchtest bestimmt diesen Rahmen noch in vielen weiteren Beiträgen nutzen. Mein erster Rahmen nennt sich einfach „rahmen„, diesen Namen für mein CSS-Klasse kann ich mir gut merken.

Für den neuen CSS Klassennamen benötigst Du jetzt noch eine CSS-Klasse, die WordPress das Aussehen des zukünftigen Rahmen beschreibt. In deiner CSS-Klasse darfst Du Dich jetzt so richtig austoben und alle Formatierungsmöglichkeiten von CSS3 nutzen.

.rahmen {
   border-style: solid;
   border-width: thin;
   border-color: #000000;
   padding: 15px 15px 15px 15px;
}

.rahmen-schatten {
	width:92%;
	border: 1px solid silver;
	box-shadow: 10px 20px 15px silver;
	border-radius: 15px;
	padding: 15px 15px 15px 15px;
}

Erklärung der Zeilen

1. Name der CSS-Klasse
2. Breite reduzieren, sonst verschwindet der rechte Schatten
3. Der graue Rahmen um den Block
4. Die Schatten unten und rechts am Block
5. Die abgerundeten Ecken
6. Der Innenabstand des Text zum Rahmen ist wichtig, weil sonst die Rundung Buchstaben überdeckt

Dieser Rahmen ähnelt dem Vorherigen, doch fällt er etwas dezenter aus. Mit CSS-Styles können auch anderen Blöcken oder Bildern Rahmen zugewiesen werden. Bei einem Bild muss/kann die Breite (width) angepasst werden – wenn der Rahmen nur das Bild umschließen soll.

.rahmen1 {
	border: 1px solid silver;
	box-shadow: 5px 8px 5px silver;
	border-radius: 2px;
	padding: 10px 10px 10px 10px;
}

2.) CSS-Code eintragen in WordPress

Wir haben uns einen Namen für die neue CSS-Klasse zurechtgelegt und auch schon den CSS-Code geschrieben. Doch wo tragen wir diesen Code ein?

Viele Anleitungen benennen die style.css des Templates als Speicherort für den neuen CSS-Code. Aber irgendwie funktionierte bei mir das alles nicht. Mein erster Gedanke war, das Problem ist Template-abhängig. Warum sollte sonst der CSS-Code für meinen Rahmen nicht funktionieren, wenn er doch bei allen anderen offenbar funktioniert? Also das Theme gewechselt, von „MH Magazine“ zu „Admiral“ und letztendlich „Twenty Twenty one„, dem WordPress Standard Template. Rein in den Theme-Datei-Editor, die style.css aufgerufen und den CSS Code reinkopiert.

Nichts!

Offenbar haben die vielen Experten jahrelang eine uralte Anleitung in ihren Beiträgen ungeprüft gepostet, die aus den „prä-Customizer-Zeiten“ stammte.

Richtig funktioniert es so …

Begeben dich im Dashboard deiner WordPress-Installation in das Menü

Design – Customizer – zusätzliches CSS

Hier kannst Du Deinen „Zusätzlichen CSS-Klassen“ zusätzliche CSS-Styles zuordnen.

Wer sich ein klein wenig mit HTML und CSS auskennt, kann an dieser Stelle einfach und übersichtlich eigene CSS-Styles eintragen, ohne sich an der großen style.css vergreifen zu müssen, etwas zu beschädigen.

Natürlich ist dieses Vorgehensweise, Rahmen per CSS-Styles um einen Block zu legen, etwas aufwendig, technisch. Der eine oder andere würde gern überhaupt nichts mit „Code“ zu tun haben, sondern einfach nur seinen WordPress-Blog füllen, Texte schreiben und Bilder einfügen – alles easy und bequem mit einem Plugin.

Gibt es überhaupt schlanke Plugins, die sich vornehmlich um die Formatierung von Texten/Blöcken mit Rahmen kümmern?

Rahmen mit Plugin setzen?

Das Fragezeichen in der Überschrift kam erst nach meiner Recherche zu dem Thema „Rahmen/Umrandung per Plugin setzen“ hinzu. Ich fand kein Plugin, das sich in den Gutenberg Blockeditor einklingt und bei „Erweitert“ ein Häkchen für „Block umrahmen“ einbaut. Das wäre zumindest die perfekt Art, um schnell und unkompliziert einen Block mit einem Rahmen zu versehen – ohne ein Speicher und Geld fressendes Premium-Plugin installieren zu müssen.

Rubrik (deutsch): Tutorial, Anleitung, Fehler, Probleme, Hilfe