Gutenberg Editor: Code Block CSS Design

Schönes CSS Design für deine Code Blocks. So wirken deine Blog Artikel professioneller. Ich zeige dir wie du das in 5 Minuten selbst machst.

Das Standarddesign von Code Blöcken, erstellt mit dem Gutenberg Editor, sieht zwar ordentlich aus aber es geht besser.

Wie immer kommt es beim Design auf Details an. Dazu gehört auch die Design Anpassung von Code Blöcken.

Hier ein einfaches CSS Design im vorher/nachher Vergleich, mit dem sich deine Code Blöcke professioneller präsentieren.

wordpress gutenberg code blocks css design

Je nachdem welches Theme du verwendest kann die Darstellung deines Code Blocks abweichen. Ich verwende das WordPress Theme GeneratePress.

Für das oben gezeigte Design füge einfach folgenden Code in dein Custom CSS oder style.css im Child-Theme ein:

/* Code Block Hintergrund und Schriftfarbe */
.wp-block-code {
	background: #322931;
	border-radius: 2px;
	color: #F3F3F3;
}

/* Code Block Dateiname Design */
.wp-block-code:before {
   display: table;
   margin: 0px 0px 10px auto;
   padding: 5px 10px;
   font-size: 16px;
   background-color: #F3F3F3;
   color: #E80009;
   border-radius: 2px;
}

/* Code Block Dateiname mit Pseudo Element einfuegen */
.rp-functionsphp:before {
   content: 'functions.php';
}

Im nächsten Schritt weise dem gewünschten Code Block die Klasse rp-functionsphp im WordPress Admin zu. Damit wird der Text functions.php im Code Block rechts oben angezeigt.

wordpress code block klasse zuweisen

Für einen weiteren Dateinamen ergänze dein CSS:

/* Code Block Dateiname mit Pseudo Element einfuegen */
.rp-stylecss:before {
   content: 'style.css';
}

Für eine linksbündige oder zentrierte Ausrichtung des Dateinamens ändere einfach folgende Zeile im CSS:

/* Linksbündig */
margin: 0px auto 10px 0px;

/* Zentriert */
margin: 0px auto 10px auto;

CSS bietet eine einfache und effiziente Methode zur professionellen Gestaltung deiner Code Blöcke.

Alternativ gibt es eine Reihe von Plugins wie das Code Block Plugin von Advanced Gutenberg Blocks.

Ein Plugin erledigt zwar die Arbeit eleganter, jedoch kostet ein Plugin immer Performance – im Gegensatz zur CSS Variante.

Alexander  Liendl  Autor und Gründer RichProjects

Alex hat das schon oft erlebt. Jemand hat eine Geschäftsidee, träumt vom großen Erfolg und landet nach einigen Überlegungen immer bei der gleichen Frage: Und wie startet man mit einer Geschäftsidee?

Wenn das auch auf dich zutrifft bist du hier richtig.

Alex hat RichProjects gegründet um dir mit seiner mehr als 10-jährigen Erfahrung im Online-Marketing zu helfen. Seine Beiträge sollen Anleitung und Inspiration für Start und Entwicklung deiner Geschäftsidee sein. Unterstützt von italienischem Kaffee ;-)

Schreibe einen Kommentar

Deine E-Mail Adresse wird nicht veröffentlicht. Pflichtfelder sind mit * gekennzeichnet.
Für die Anzeige deines Profilbildes verwende Gravatar. Das funktioniert bei RichProjects und vielen anderen Blogs.