WordPress Webseiten-Design mit CSS anpassen 

Jeder der eine WordPress Webseite erstellt hat oder hat erstellen lassen, wurde vermutlich schon öfters mit dem Problem konfrontiert, dass das Webseiten-Design in Teilen manuell angepasst werden muss.

Uns ging es zum Beispiel so mit der Navigation auf einigen Unterseiten wie auf dieser Blogseite. Die grau-schwarze Farbe passte nicht zu unserer CI im Header:

 

Der Header von ZweiDigital

In der Regel wird eine Webseite nicht von Grund auf erstellt, sondern man verwendet vorgefertigte Themes und passt diese nach den eigenen Wünschen und Vorstellungen an.

Hierfür gibt es viele einfache Builder, wie zum Beispiel WPbakery, Elementor oder Divi. Wir nutzen aktuell Letzteres, da wir damit die besten Erfahrungen gemacht haben, aber grundsätzlich sind sich diese Systeme recht ähnlich.

Unter Umständen stößt man an einigen Stellen an die Grenzen der Konfiguriermöglichkeiten des Builders, in unserem Fall gab es nur eine Möglichkeit die Farbe der Menüelemente global auf allen Seiten anzupassen: mittels CSS.

Nachfolgend zeigen wir 3 einfache Schritte in WordPress auf, um dies umzusetzen.

 

1. WordPress Plug-in installieren (falls keine Custom CSS Option vorhanden)

Die meisten WordPress Themes haben von Haus aus die Option CSS für einzelne Seiten oder Module festzulegen und auch eine Möglichkeit globale CSS Einstellungen vorzunehmen. Dabei sollte man nie direkt am CSS des Themes arbeiten, denn mit einem Update würden die vorgenommenen Einstellungen wieder überschrieben werden und man fängt wieder von vorne an. Wenn es nicht bereits ein vorgesehenes Feld gibt, dann hilft das Plug-in Simple Custom CSS, mit dem sich der Code updatesicher einfügen lässt. 

Simple Custom CSS Plug-in für CSS

2. Identifizieren des Objektes, welches man verändern möchte

Dazu ruft man im Chrome Browser die Seite auf, die man verändern möchte und klickt mit der rechten Maustaste auf das Element, das geändert werden soll. Daraufhin klickt man „Untersuchen“ es öffnen sich die Google Developer Tools.

Hier sieht man die Namen der Elemente und welches CSS das Aussehen des jeweiligen Elements definiert. In unserem Fall sieht man, dass es sich um das Element #top-menu (<nav id=“top-menu-nav“>) handelt, welches wir ansprechen wollen.

Wie im Screenshot zu sehen, ist es sogar möglich die Farbe bzw. alle CSS Attribute anzupassen und es direkt live auf der Seite zu sehen. Dies ist erst mal noch keine Änderung am Code, da Chrome für Sie nur die temporäre Darstellung ändert.
Die Änderungen würden somit nicht übernommen werden.
Den HEX-Code, den man nun dort sieht, kann man aber 1:1 kopieren und im CSS der Seite einfügen. 

Farbe im CSS Attribut anzupassen

3. Den Code einfügen

Damit die Änderungen permanent sind, wird der Code, den man mit den Developer Tools geändert hat im Backend der WordPress Seite eingefügt. Entweder haben Sie wie eingangs erwähnt die Möglichkeit in Ihrem System CSS auf Seitenebene zu ändern, oder Sie nutzen das installierte Plug-in.

Bei Divi ist es beispielsweise möglich, über das Zahnrad-Symbol auf Seitenebene Custom CSS einzufügen. Damit die Links auch immer weiß sind, haben wir noch den entsprechenden HEX-Code eingefügt, sodass auch das aktuell ausgewählte Menüelement und die Menüpunkte mit Unterpunkten weiß sind.

Divi WordPress Custom CSS einbinden

Wir arbeiten sowohl bei unserer Seite als auch Kundenwebseiten oft mit angepasstem CSS. Auf diese Art und Weise kann man praktisch alles am Aussehen verändern: z.B. Abstände, Animationen und Farben. Außerdem können so ganze Elemente ausgeblendet werden, wie zum Beispiel der zusätzliche Footer, der von Divi standardmäßig angezeigt wird.

Wenn man mehrere Änderungen vornimmt ist es sinnvoll, Kommentare davor zu setzen (wie unten aufgezeigt), die Aufschluss geben, was der Code ändert. So erleichtert man sich die Fehlersuche erheblich. Wird die Anmerkung wie gezeigt geschrieben, wird Sie nicht als CSS Code identifiziert und daher ignoriert. Deswegen kann man dort schreiben was man möchte, um den Abschnitt zu bezeichnen.

CSS Code und Kommentar

Fazit

Jede Seite hat individuelle Anforderungen, daher reichen die Einstellmöglichkeiten bei vielen Themes oft nicht aus. Mithilfe von CSS ist es möglich die Erscheinung der Webseite anzupassen.

Nutzt man vorhandene Felder oder das Plug-in Simple Custom CSS, kann man direkt in den Code eingreifen und selbst Anpassungen vornehmen. Sollte die Seite danach doch nicht wie gewünscht aussehen, lässt sich der Code schnell wieder löschen bzw. das Plug-in deaktivieren.

Über den Autor

Tobias ist unser Digital Stratege und weiß genau, worauf es bei einem Online-Auftritt ankommt. Mit einem Gespür für Webdesign, sowie einem Faible für Zahlen und Online-Strategieberatung, begleitet er Sie auf Ihrem Weg in die Digitalisierung.

ZweiDigital auf LinkedIn:

Aktuelle Beiträge

Cookie Opt In rate erhöhen

Cookie Opt-in Rate steigern - So haben wir unsere Consent Rate optimiert Mit der DSGVO und den Anforderungen, die dadurch mittlerweile an Cookies gelten, werden wir oft konfrontiert. Als Performance Marketing Agentur arbeiten wir sehr stark datengetrieben und sind auf...

Automatische Lead Zuordung: Leadquelle im Formular einbinden

Woher kommt eine Kontaktanfrage: Leadquellen richtig zuordnen Ein Problem mit dem wir selbst immer wieder konfrontiert waren ist die richtige Zuordnung von Leads, die wir generieren. Zwar ist es einfach einen Lead an sich zu erfassen und über die Werbeplattformen...

Google Tag Manager Grundlagen

Google Tag Manager Grundlagen Der Google Tag Manager ist ein Service von Google und ermöglicht es, verschiedene Tracking Codes (z.B den Facebook Pixel) und Skripte auf die eigene Website zu integrieren.  Ohne den Tag Manager müssen diverse Code-Schnipsel zum Tracking...

App Store Optimierung

App Store Optimierung: So verbessern Sie Ihr Ranking App Store Optimization (oder kurz ASO) ist die Suchmaschinenoptimierung (kurz SEO) für den App Store. ASO lässt Apps hervorstechen, erhöht die Download-Rate und somit den Ausbau unseres App-Geschäfts. Was ist ASO?...

Checkout Conversion optimieren

Checkout Optimierung: Tipps für eine hohe Conversion-Rate. Wussten Sie, dass durchschnittlich ca. 70% aller Nutzer den Bestellprozess beim Warenkorb abbrechen? Für E-Commerce-Verkäufer ist die Conversion-Rate bei der Checkout Funktion die ultimative Metrik. Das ist...

Technical SEO

Technical SEO: 6 Punkte auf die Sie achten müssen Denkt man an Suchmaschinenoptimierung sind das meistens als Erstes Dinge wie H1 Überschriften, Metabeschreibungen und Bild Alt-Texte. Genauso wichtig ist aber auch technical SEO, also die technische Optimierung, die es...