WordPress-Tipps

wie sie das design ihres wordpress themes anpassen

Wie Sie das Design Ihres WordPress Themes anpassen

Funktion

Für WordPress gibt es eine riesengroße Auswahl an Webdesigns. Entsprechend gibt es kaum noch einen Grund, unnötig Zeit und viel Geld in die Entwicklung eines eigenen Layouts zu investieren. Stattdessen sucht man sich eine der vielen Designvorlagen aus und passt sie nach seinen Wünschen an. Wie das geht, lesen Sie in diesem Beitrag.

WordPress und das Webdesign

In WordPress ist das Webdesign von dem Inhalt und den Funktionen der Website getrennt. Wie ein Anzug können Sie das Design ganz einfach austauschen, indem Sie ein neues Design installieren. Von den Themes genannten Designvorlagen gibt es Tausende und täglich werden es mehr.

Statt also ein neues Design entwerfen zu lassen, was anschließend mühselig für verschiedene Bildschirmgrößen programmiert werden muss, ist es viel zeit- und kostenschonender sich ein fertiges Theme auszusuchen und an seine Bedürfnisse anzupassen. Dabei stehen Ihnen alle Möglichkeiten offen. Von der einfachen Anpassung der Farben sowie dem Austausch des Logos und der Bilder, bis hin zur völligen Veränderung einer Designvorlage an die eigene Corporate Identity (CI).

Die Anpassungsmöglichkeiten der Themes

WordPress-Themes bieten von Haus aus mehr oder weniger ausgeprägte Anpassungsmöglichkeiten, die Sie ohne Programmierkenntnisse vornehmen können. Prinzipiell kann man hier zwei Arten von Theme-Typen unterscheiden:

  1. Themes mit vielen Anpassungsmöglichkeiten. Vorteil: Je nach Ausprägung können Sie fast jedes Element der Website nach Farbe, Größe und Anmutung individualisieren. Nachteil: Die Vielfalt der Möglichkeiten überfordert häufig ungeübte Betreiber von Websites. Das Ergebnis: halbfertige Websites, die entweder unprofessionell aussehen, oder nie das Licht der Öffentlichkeit erblicken.
  2. Themes, die kaum Anpassungsmöglichkeiten bieten. Vorteil: Aufgrund der wenigen Optionen bleiben die Theme-Einstellungen übersichtlich. Auch Ungeübte kommen schnell zu einem professionellen Ergebnis. Nachteil: Das Theme muss von sich aus schon sehr nah am gewünschten Ergebnis sein. Anpassungen sind nur mit speziellen Kenntnissen möglich, zu denen wir gleich kommen :-).

Seit einigen Versionen bietet WordPress eine einheitliche Möglichkeit, das Webdesign zu konfigurieren. Sie finden Sie im Dashboard Menü oder der Toolbar unter ANPASSUNGEN. Leider hat sich dieses Verfahren noch nicht flächendeckend durchgesetzt. In der Realität entwickeln die Webdesigner für Ihre Themes eigene Konfigurationen, die mehr oder weniger verständlich und übersichtlich sind und in die man sich zunächst einarbeiten muss.

WordPress Anpassungen

WordPress Anpassungen

WordPress-Themes mithilfe von CSS anpassen

Im modernen Webdesign wird die Information, die für das Layout einer Website verantwortlich ist, vom Inhalt getrennt und in sogenannten Cascading Stylesheet Dateien (CSS) gesammelt.

Die Themes bei WordPress haben entsprechend eine Datei namens style.css, die zum Beispiel Informationen darüber enthält, aus welcher Schrifttype die Überschriften bestehen, wie groß sie sind und in welcher Farbe sie erstrahlen. Dank dieser Methode wirken sich Anpassungen automatisch auf die ganze Website aus, ändert man beispielsweise die Schriftgröße der Überschriften.

Die schnelle CSS Anpassung

Der direkte Weg zu Anpassungen an der CSS-Datei führt über das Dashboard Menü DESIGN > EDITIEREN. Hier können Sie die style.css auswählen und die gewünschten Änderungen direkt vornehmen.

WordPress Editor

WordPress Editor aktivieren

Der Nachteil dieser Methode ist, dass die Anpassung direkt im Theme vorgenommen werden. Dadurch gehen sie auch bei einem Update der Vorlage wieder verloren, wenn Sie nicht aufpassen und die Änderungen vorher sichern und nach dem Update wieder einfügen. Bei ein paar Modifikationen ist der Aufwand noch überschaubar, bei komplexen Veränderungen wird es nervig. Außerdem verliert man schnell die Übersicht, welche Änderungen man überhaupt vorgenommen hat. Diese Methode ist nicht empfehlenswert.

Anpassungen im Child Theme

Haben Sie vor, das Webdesign in vielen Bereichen abzuändern, empfiehlt sich, alle Anpassungen in einem sogenannten „Child Theme“ auszulagern. Der geringe Mehraufwand macht die Anpassungen unabhängig vom Theme und sichert alle Modifikationen auch bei einem Update. In einem weiteren Beitrag haben wir beschrieben, wie Sie ein Child Theme anlegen.

Die Plug-in-Empfehlung

Natürlich gibt es auch eine Lösung, Änderungen direkt im Dashboard vorzunehmen, die auch ein Update des Themes überstehen. Das Plug-in Simple Custom CSS bietet nach der Installation im Dashboard Menü DESIGN > CUSTUM CSS die Möglichkeit, die gewünschten Modifikationen durchzuführen. Die Anweisungen überschreiben in der Regel direkt die Vorgaben, die aus der Datei style.css stammen. Ist das mal nicht der Fall, reicht eine !Important, Anweisung, um die ursprünglichen Designvorgaben zu überschreiben.

Simple Custom CSS

Simple Custom CSS Plug-in

Wie funktioniert CSS?

OK, die Beantwortung dieser Frag sprengt den Rahmen dieses Artikels. Aber wir haben für Sie ein paar Beiträge gefunden, die Ihnen weiterhelfen können, wenn Sie sich mit den Möglichkeiten von CSS noch nicht auskennen:

So, nun wissen Sie, wie Sie das Design Ihrer Website anpassen können. Vielleicht finden Sie Spaß daran, Ihre Website eigenhändig an Ihre Wünsche anzupassen. Da wären Sie nicht die Ersten. Vielleicht haben Sie bei der Lektüre dieses Beitrags aber auch festgestellt, dass Sie die Anpassungen nicht selbst durchführen möchten. Dann sind wir Ihnen gern behilflich.

Quelle Bilder: Eigene Screenshots

Anmerkung: Einige der Links in diesem Beitrag sind „Affiliate-Links“. Wenn Sie auf den Link klicken und einen Artikel kaufen, erhalten wir eine Provision. Auf Ihren Kaufpreis hat es keine Auswirkung. Vielen Dank für Ihre Unterstützung!

Plugins, Tutorials

Wir freuen uns über Ihren Kommentar!

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Bitte füllen Sie dieses Feld aus.
Bitte füllen Sie dieses Feld aus.
Bitte geben Sie eine gültige E-Mail-Adresse ein.
Sie müssen den Bedingungen zustimmen, um fortzufahren.

Elbnetz GmbH hat 4,96 von 5 Sternen 54 Bewertungen auf ProvenExpert.com