Webdesign-Quickie: Custom CSS WordPress

So zähmst du dein WordPress mit drei Zeilen CSS

Du hast dir eine WordPress-Seite erstellt, ein schönes Theme gewählt, aber irgendwie… passt die Farbe der Überschrift nicht zu deinem Logo? Oder der Abstand zwischen den Absätzen ist dir zu groß?

Viele Einsteiger denken, sie müssten jetzt ein Informatikstudium beginnen oder teure Plugins kaufen. Aber die Lösung ist viel einfacher: Custom CSS.

WordPress bietet in fast jedem Theme unter Design -> Customizer -> Zusätzliches CSS ein kleines Fenster an. Hier kannst du mit minimalem Aufwand maximale Wirkung erzielen. Ich zeige dir heute drei „Magic Tricks“, die jeder Anfänger beherrschen kann.

1. Die Farbe deiner Überschriften ändern

Standard-Themes nutzen oft ein langweiliges Schwarz oder Dunkelgrau. Mit diesem Schnipsel gibst du deiner Seite Charakter:

h1, h2, h3 {
color: #4CAF50; /* Ersetze dies durch deinen Hex-Farbcode */
}

Das war schon alles. Genial, oder? Und du wirst sehen, die anderen Schnipsel sind genauso einfach. Kleine Ursache, große Wirkung.

Tipp: Suche bei Google nach „Color Picker“, wähle deine Wunschfarbe und kopiere den Code mit dem #.

2. Bessere Lesbarkeit durch Zeilenabstände

Nichts ist anstrengender als Text, der zu eng gequetscht ist. Gute Lesbarkeit ist das A und O.

p {
line-height: 1.8;
margin-bottom: 20px;
}

Damit verleihst du deinem Text eine luftige, professionelle Optik, wie man sie aus hochwertigen Magazinen kennt.

3. Einen Button hervorheben

Hast du einen Link, der wie ein Button aussehen soll?

.mein-button {
background-color: #ff5722;
color: white;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
}

Du musst dem Link in WordPress dann nur unter „Erweitert“ die CSS-Klasse mein-button geben. Etwas HTML und CSS Wissen sind jetzt schon notwendig – was kein Problem ist, wenn du die Grundlagen von HTM und CSS kennst. Mein Tipp dazu (du ahnst es bestimmt) eines meiner Bücher, z.B. HTML und CSS für Kids (ist auch eine ganz einfache Einführung für Erwachsene). Achtung, der Link zum Buch leitet dich zu Amazon weiter, wenn du das nicht willst, klick nicht darauf.

So, das wars auch schon für heute mit einem Quick-Tipp. Ich hoffe er hat dir geholfen.

Und noch was zum Schmunzeln:

Der Vollständigkeit halber: Bild ist KI-erzeugt (Kennzeichnungspflicht)

Hand aufs Herz: Ich hätte jetzt stundenlang WordPress-Instanzen aufsetzen, Screenshots zuschneiden und im Grafikprogramm hübsch machen können. Aber ganz ehrlich? Die Zeit verbringe ich lieber mit Schreiben (oder einem Kaffee).

Ich habe stattdessen die KI gefragt, wie sie sich einen Vorher-Nachher-Vergleich vorstellt. Das Ergebnis siehst du oben. Wie man sieht, beherrscht die KI zwar fantastische Welten, aber beim Thema Text im Bild schreibt sie immer noch so, als hätte sie ein paar Gläser Wein zu viel gehabt. Aber hey, die Botschaft kommt an, oder? Struktur und Farbe gewinnen immer gegen die graue Textwüste – und wie genau du das mit den Codeschnipseln von oben machst, hast du ja jetzt auch ohne perfekte Screenshots im Kasten!