Ihre WordPress-Website läuft, aber sie sieht aus wie Hunderte andere? Dasselbe Standard-Theme, dieselben Schriftarten, kein Hauch von Individualität. Die Plattform bietet eine Fülle an Anpassungsmöglichkeiten; die Frage ist, wo Sie anfangen, ohne die Seite dabei zu beschädigen.

Das Design einer WordPress-Seite zu ändern, bedeutet nicht zwingend einen kompletten Neuaufbau. Manchmal genügen drei oder vier gezielte Eingriffe, damit Ihre Seite nicht länger beliebig wirkt, sondern in Erinnerung bleibt. Nachfolgend eine Schritt-für-Schritt-Anleitung: vom Farbschema bis zum Favicon, mit konkreten Werkzeugen und ohne Code, wo es ohne geht.

💡 Kurzüberblick:

• Wählen Sie ein Farbschema aus 3 Farben mit Adobe Color, Coolors oder ColorHexa
• Richten Sie Schriften über Google Fonts ein, Use Any Font für eigene Schriftdateien
• Ändern Sie das Datums- und Zeitformat mit einer einzigen Codezeile oder über den Customizer

Das Farbschema wählen

Farben machen den halben Eindruck. Der Besucher hat die Überschrift noch nicht gelesen, spürt aber bereits, ob die Seite „hochwertig" oder „billig" wirkt, technisch oder kreativ, vertrauenswürdig oder fragwürdig. Das Farbschema ist der visuelle Anker Ihrer Marke.

Optimal sind drei Basisfarben: Primär (Hintergrund/Text), Akzent (Buttons, Links, wichtige Elemente) und unterstützend (Rahmen, Trennlinien, Hover-Zustände). Mehr als drei riskieren visuelles Rauschen; weniger ist langweilig. Die wichtigste Regel: Setzen Sie die Akzentfarbe sparsam ein, nur dort, wo Sie Aufmerksamkeit lenken wollen.

Wo Sie bei der Farbauswahl ansetzen:

Adobe Color (ehemals Kuler)

Ein Werkzeug von Adobe zum Erstellen von Farbschemata nach Harmonieregeln: monochromatisch, komplementär, triadisch, analog. Dahinter steckt ein Farbkreis, in dem Sie den Grundfarbton festlegen, und das System wählt den Rest automatisch aus. Sie können eine Palette aus einem hochgeladenen Bild extrahieren, was praktisch ist, wenn Sie eine Referenz haben. Kostenlos verfügbar unter color.adobe.com.

Coolors

Ein auf Geschwindigkeit ausgelegter Palettengenerator. Leertaste drücken, eine neue Kombination aus fünf Farben erhalten. Sie können jede Farbe sperren und den Rest durchwechseln. Das Ergebnis sind sofort verwendbare HEX-Codes. Es gibt ein Plugin für Chrome/Firefox und eine iOS-App. Funktioniert unter coolors.co.

ColorHexa

ColorHexa ist nicht nur eine Pipette, sondern eine Enzyklopädie der Farbe. Geben Sie einen HEX-, RGB-Wert oder einen Namen ein, und Sie erhalten eine Seite mit Komplementärtönen, Verläufen, Triaden, prozentualer Zusammensetzung und einer Vorschau für Farbfehlsichtigkeit (wie die Farbe für Menschen mit verschiedenen Arten von Farbenblindheit erscheint). Farbmischer: Geben Sie #ff0000+#0000ff+#ff00ff ein, erhalten Sie das resultierende #aa00aa mit einer vollständigen Aufschlüsselung. colorhexa.com.

Fertige HTML-Paletten

Wenn Sie nicht von Grund auf neu auswählen möchten, greifen Sie auf fertige Paletten zurück. htmlcolorcodes.com bietet 216 websichere Farben mit HEX-Codes, kompatibel mit CSS, Photoshop und jeder Grafiksoftware. Der Dienst Paletton (ehemals Color Scheme Designer) liefert Farbschemata mit einer Vorschau auf einem Website-Mockup.

CSS-Verlaufsgenerator

Verläufe erleben ein Comeback, und zwar nicht als die Bands aus 2012, sondern als subtile Übergänge auf Bereichshintergründen und Schaltflächen. Der ColorZilla Gradient Editor ist ein Photoshop-ähnlicher Editor: Setzen Sie Ankerpunkte mit Farben und Transparenz, verschieben Sie den Mittelpunkt und kopieren Sie das fertige CSS. Er unterstützt lineare, radiale und wiederholte Verläufe. Für Chrome und Firefox gibt es ein Plugin mit einer Pipette direkt im Browser.

Schriften auswählen und einrichten

Farben ziehen Aufmerksamkeit an; Text hält sie fest. Die Schrift beeinflusst Lesbarkeit und Tonwahrnehmung: Eine strenge Serife vermittelt redaktionelle Qualität, während eine klare Sans-Serif technische Anmutung transportiert.

Das Problem bei Webfonts ist, dass Besucher nur die Schriften sehen, die auf ihren Rechnern installiert sind, es sei denn, Sie verwenden eingebettete (Web-)Fonts. Für individuelle Gestaltung also ausschließlich externe Schriften.

Grundregel: nicht mehr als zwei Schriftarten pro Seite. Eine für Überschriften (groß, markant), eine zweite für den Fließtext (maximal lesbar). Eine dritte nur, wenn Sie eine Monospace-Schrift für Code benötigen.

Google Fonts, die Hauptbezugsquelle

Ein kostenloser Katalog mit über 1.500 Schriftfamilien unter fonts.google.com. Die Einbindung erfolgt mit zwei Zeilen. Der klassische Weg führt über die header.php des Themes:

1
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Oder in der style.css:

1
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

Nach dem Import steht die Schrift in jeder CSS-Regel zur Verfügung:

1
body { font-family: 'Roboto', sans-serif; }
2
h1, h2, h3 { font-family: 'Montserrat', sans-serif; }

DSGVO-Feinheit: Google Fonts, die direkt von Google-Servern geladen werden, übertragen die IP-Adressen der Besucher. Seit 2022 wird dies von EU-Gerichten als Verstoß anerkannt. Die Lösung ist das Plugin Local Google Fonts, das die Schriftarten auf Ihren Server herunterlädt und lokal ausliefert. Eine Alternative für diejenigen, die nicht mit Plugins arbeiten möchten, ist ein Artikel zum lokalen Einbinden von Google Fonts in unserem Blog.

Individuelle Schriftarten per Plugin

Wenn Sie eine Markenschrift benötigen, die nicht bei Google Fonts verfügbar ist, versuchen Sie es mit Use Any Font. Laden Sie eine ttf-, otf- oder woff-Datei hoch, und das Plugin konvertiert sie in woff2 und fügt sie dem Admin-Bereich hinzu. Die kostenlose Version erlaubt das Hochladen einer Schriftart; Pro hebt diese Begrenzung auf.

Manuelle Einbindung per @font-face

Wenn Sie Code gegenüber Plugins bevorzugen, legen Sie die Schriftdatei in /wp-content/themes/your-theme/fonts/ ab und fügen Sie in die style.css ein:

1
@font-face {
2
    font-family: 'Museo300';
3
    src: url('fonts/museo300-regular.ttf') format('truetype');
4
    font-weight: normal;
5
}

Verwendung:

1
#menu { font-family: 'Museo300', sans-serif; }

Formatierung von Datum und Uhrzeit

Das Standard-Datumsformat passt nicht immer zum Design. Glücklicherweise lässt es sich in WordPress ohne Plugins ändern.

Methode 1: über den Customizer (ohne Code)

Gehen Sie zu Design → Customizer → Allgemeine Einstellungen. Dort wird auch das Zeitformat geändert. Funktioniert bei den meisten klassischen Themes.

Methode 2: über single.php (präzise Steuerung)

Öffnen Sie Design → Theme-Editor → single.php. Suchen Sie die Funktion the_time() oder the_date():

1
<?php the_time('F Y'); ?>

Formatierungssymbole:

• l, vollständiger Tagesname (kleines L)
• F, Monat als Wort
• j, Tag des Monats als Zahl
• Y, Jahr als vierstellige Zahl
• y, Jahr als zweistellige Zahl

Kombinationsbeispiele:

('l, j F Y') → Sonntag, 14. Juni 2026. ('j F, Y') → 14. Juni, 2026.

Lassen Sie die einfachen Anführungszeichen innerhalb der Klammern unverändert, bearbeiten Sie nur die Zeichen dazwischen. Verwendet das Theme the_date() anstelle von the_time(), lässt sich das Format einfacher ändern: Einstellungen → Allgemein → Datumsformat.

Bilder einsetzen

Bilder fügen Sie in WordPress über die Schaltfläche „Medien hinzufügen" im Beitragseditor ein. Setzen Sie den Cursor an die gewünschte Stelle → Medien hinzufügen → wählen Sie ein Bild aus der Mediathek oder laden Sie ein neues hoch.

Rechts befindet sich der Bereich für die Anhangseinstellungen: Titel, Alternativtext (wichtig für SEO und Barrierefreiheit), Größe, Ausrichtung, Verlinkung. Laden Sie Bilder aus Gründen der Ladegeschwindigkeit bereits komprimiert hoch (TinyPNG oder ShortPixel vor dem Hochladen). Weitere Details finden Sie in unserem Leitfaden zur WordPress-Mediathek.

Favicon hinzufügen

Ein Favicon ist das kleine Quadrat im Browser-Tab und in den Lesezeichen. Ein kleines Detail, das Wiedererkennung schafft: Wenn ein Nutzer 20 Tabs geöffnet hat, ist das Favicon das Einzige, was Ihre Seite optisch von den anderen unterscheidet.

So erstellen Sie ein Favicon

Der zuverlässigste Dienst ist RealFaviconGenerator. Laden Sie ein quadratisches Bild hoch (mindestens 260×260), und Sie erhalten ein Icon-Paket für alle Plattformen: iOS, Android, Windows-Kacheln, angehefteter Safari-Tab. Dazu fertigen HTML-Code zum Einfügen.

Wenn Sie eine einfache.ico-Datei mit 16×16 benötigen, funktioniert jeder Grafikeditor, der als.ico speichern kann (GIMP ist kostenlos). Oder nutzen Sie den Online-Dienst Favicon.io.

So installieren Sie es in WordPress

Die einfachste Methode ist das integrierte Site-Icon. Seit WordPress 4.3 ist es im Customizer verfügbar:

Design → Customizer → Website-Informationen → Website-Icon. Laden Sie ein quadratisches Bild hoch, und WordPress schneidet es automatisch auf die benötigten Größen für alle Plattformen zu. Keine Plugins, kein FTP, keine header.php.

Die Plugin-Methode ist All In One Favicon, das mehr Kontrolle bietet: separate Icons für Admin, Frontend und unterschiedliche für verschiedene Geräte. Aber für 95% der Websites reicht das integrierte Site-Icon aus.

Manuelle Methode (in die header.php einfügen):

1
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico">

Platzieren Sie die favicon.ico-Datei im Stammverzeichnis des Theme-Ordners. Vergessen Sie nicht, sie im public_html zu duplizieren, damit das Favicon unter yoursite.com/favicon.ico erreichbar ist.

⁉️🤔 Häufig gestellte Fragen

Kann ich das Website-Design ändern, ohne Inhalte zu verlieren?

Ja, ein Wechsel des WordPress-Themes wirkt sich nicht auf Beiträge, Seiten und Mediendateien aus. Diese werden getrennt vom Theme in der Datenbank gespeichert. Das Einzige, was „kaputtgehen" kann, ist das Layout und die Positionierung von Elementen, besonders wenn das alte Theme benutzerdefinierte Beitragstypen oder Shortcodes verwendet hat. Erstellen Sie vor dem Wechsel ein vollständiges Backup (Hosting + Datenbank). Nutzen Sie zum sicheren Testen eine Staging-Site; viele Hoster (SiteGround, Kinsta, WP Engine) bieten das mit einem Klick an.

Wie viele Schriftarten sind für eine Website optimal?

Zwei: eine für Überschriften, eine für Fließtext. Eine dritte (Monospace) für Code, falls auf der Website vorhanden. Jede zusätzliche Schriftart erhöht die Ladezeit um 200-400 ms und erzeugt visuelles Rauschen. Google Fonts erlaubt es, nur die benötigten Schriftschnitte auszuwählen (Regular + Bold = 2 Dateien statt 9), und das Plugin Local Google Fonts speichert sie zusätzlich auf Ihrem Server zwischen.

Muss ich mich für Anpassungen mit Code befassen?

Nein. Der WordPress-Customizer (Design → Customizer) deckt die meisten Aufgaben ab: Farben, Schriftarten, Logo, Favicon, Hintergrundbilder, CSS. Block-Themes (ab WP 5.9) bieten den Website-Editor, eine noch visuellere Methode ohne Code. Code ist nötig, wenn Sie Feineinstellungen benötigen: Datumsformat in der single.php, benutzerdefiniertes @font-face, spezifisches CSS für ein bestimmtes Plugin.

Was tun, wenn die Website nach einem Theme-Wechsel kaputt ist?

Erstens: Keine Panik, Ihre Inhalte sind nicht verschwunden. Zweitens: Wenn das Admin-Panel erreichbar ist, wechseln Sie zum alten Theme zurück (Design → Themes → Aktivieren). Wenn das Admin-Panel nicht erreichbar ist, greifen Sie per FTP auf /wp-content/themes/ zu, benennen Sie den Ordner des neuen Themes um (fügen Sie _disabled hinzu), und WordPress schaltet automatisch auf das Standard-Theme um. Aktivieren Sie nach der Wiederherstellung WP_DEBUG in der wp-config.php, um Fehler zu sehen.

Wie prüfe ich, ob das Favicon funktioniert?

Öffnen Sie yoursite.com/favicon.ico; wenn das Icon angezeigt wird, ist die Datei am richtigen Ort. Im Browser erscheint das Favicon nicht sofort: Es wird aggressiv zwischengespeichert. Öffnen Sie die Website zum Testen im Inkognito-Modus oder erzwingen Sie eine Cache-Aktualisierung (Strg+Umschalt+R). RealFaviconGenerator bietet ein Favicon-Prüftool per URL.

WordPress-Redesign: Was Sie zuerst tun sollten

Die Reihenfolge der Maßnahmen für eine Anpassung von Grund auf: Farbschema → Schriftarten → Logo und Favicon → Datumsformat → Widget- und Menü-Layout. Genau in dieser Reihenfolge: Farben und Typografie sind das Fundament, auf dem alles andere aufbaut.

Wenn die Website bereits läuft und Traffic bringt, führen Sie das Redesign nicht auf der Live-Domain durch. Staging-Kopie + Test → Migration. Änderungen, die für Suchmaschinen sichtbar sind (HTML-Strukturänderungen, Überschriften, URLs), sollten mit Bedacht vorgenommen werden: Ein plötzliches Redesign ohne Weiterleitungen kann Rankings verschlechtern.

Für diejenigen, die tiefer in das Thema einsteigen möchten: Leitfaden zu benutzerdefinierten Schriftarten in unserem Blog, Artikel zur WordPress-Mediathek für die Arbeit mit Bildern und eine detaillierte Aufschlüsselung zum lokalen Laden von Google Fonts mit einem GTmetrix-Vorher-Nachher-Test.

Beginnen Sie mit drei Farben und zwei Schriftarten; der Rest ergibt sich.