So passen Sie Ihre WordPress-Website mit CSS an: 3 einfache Methoden

WordPress hat sich im Laufe der Jahre weiterentwickelt und ist heute eine ziemlich flexible und einfach anzupassende Plattform durch seinen Blockeditor Gutenberg. Dennoch wird es Zeiten geben, in denen Sie etwas mehr Reichweite benötigen, als der Gutenberg-Editor bietet.

Hier kommt benutzerdefiniertes CSS zum Einsatz. CSS-Styling ermöglicht es Ihnen, die Farben, Abstände, Schriftarten, Layouts und im Grunde jedes andere visuelle Element Ihrer WordPress-Website zu bearbeiten, sodass Sie sie genau so aussehen lassen können, wie Sie es möchten.

In diesem Artikel führen wir Sie durch die Grundlagen der Anpassung Ihrer WordPress-Website mit CSS.

Warum Ihre Website mit CSS anpassen?

Das Hinzufügen von benutzerdefiniertem CSS ist nur eine der Methoden, mit denen Sie das Erscheinungsbild Ihrer Website optimieren können. Andere Methoden umfassen die Verwendung von a gut ausgestattetes Premium-WordPress-Theme, oder installieren Sie einen Page Builder.

Während diese beiden Methoden für Anfänger etwas einfacher zu verwenden sind und keine Programmierkenntnisse erfordern, ist die Verwendung von benutzerdefiniertem CSS in zweierlei Hinsicht vorteilhafter:

Null Kosten

Premium-Themes und WordPress-Seitenersteller können praktisch sein, aber sie haben ihren Preis – in Dollar und Cent. Ausgestattet mit dem Wissen, wie man benutzerdefiniertes CSS schreibt, können Sie die gleichen Effekte erzielen, ohne dass zusätzliche Kosten entstehen.

Minimales Aufblähen

Page Builder und gut ausgestattete Themes wurden entwickelt, um Benutzern mehr Flexibilität und eine breite Palette von Optionen zum Anpassen ihrer Websites zu bieten. Aus diesem Grund neigen sie dazu, Websites aufzublähen, was sie möglicherweise verlangsamt.

Beim Schreiben von benutzerdefiniertem CSS fügen Sie hingegen nur die erforderlichen Funktionen hinzu, was im Allgemeinen zu leichteren Websites und schnelleren Ladegeschwindigkeiten führt.

3 einfache Methoden zum Anpassen Ihrer WordPress-Website mit CSS

Hoffentlich weißt du es schon wie man CSS schreibt. Sobald Sie mit den Grundlagen vertraut sind, können Sie eine der folgenden Methoden verwenden, um benutzerdefiniertes CSS zu Ihrer WordPress-Website hinzuzufügen:

Methode 1: Verwenden Sie den WordPress Customizer

Mit WordPress 4.7 oder einer späteren Version können Sie benutzerdefiniertes CSS direkt aus dem Admin-Bereich hinzufügen. Dies ist die einfachste Methode, und da eine Live-Vorschau verfügbar ist, können Sie alle vorgenommenen Änderungen in Echtzeit sehen.

Es ist auch das am meisten empfohlene, da alle Änderungen, die Sie vornehmen, in WordPress selbst gespeichert werden. Das bedeutet, dass Sie Ihr benutzerdefiniertes CSS auch dann nicht verlieren, wenn Sie Ihr Design ändern oder aktualisieren.

Hier sind die Schritte:

Schritt 1: Navigieren Sie zu Aussehen > Anpassen.

Dadurch wird der WordPress-Theme-Anpasser geöffnet, der Ihnen rechts eine Live-Vorschau Ihrer Site sowie links einige Anpassungsoptionen anzeigt. Scrollen Sie im linken Bereich nach unten, und Sie finden ein Zusätzliche CSS Tab.

Schritt 2: Klicken Sie auf die Zusätzliche CSS Tab.

Dadurch wird im linken Bereich ein kleines Feld geöffnet, in dem Sie Ihr benutzerdefiniertes CSS hinzufügen können. Sie können beliebig viele Zeilen CSS-Code eingeben. Das Tolle an diesem Editor ist, dass er Ihren Code validiert und Sie bei Fehlern benachrichtigt.

Schritt 3: Veröffentlichen Sie Ihre Änderungen.

Jede gültige CSS-Regel, die Sie hinzufügen, wird im Live-Vorschaubereich auf der rechten Seite angezeigt. Um die Änderungen auf Ihre Site anzuwenden, klicken Sie auf das Veröffentlichen Schaltfläche oben im linken Bereich, wenn Sie zufrieden sind. Wenn die Änderungen nicht sofort wirksam werden sollen, können Sie die Veröffentlichung auch zu einem späteren Zeitpunkt planen oder Ihre Arbeit als Entwurf speichern.

Es ist wichtig zu beachten, dass alle Änderungen, die Sie mit dem Customizer vornehmen, an Ihr aktuelles Design gebunden sind. Wenn Sie jemals zu einem anderen Thema wechseln, gehen die Änderungen verloren, es sei denn, Sie kopieren Ihr benutzerdefiniertes CSS und fügen es dem neuen Thema hinzu. Es empfiehlt sich, alle benutzerdefinierten CSS, die Sie zu einem Thema hinzufügen, auf einem Notizblock zu speichern. Auf diese Weise können Sie den Code einfach kopieren und in den Abschnitt „Zusätzliches CSS“ für ein anderes Thema einfügen.

Wenn das nach zu viel Arbeit klingt und Sie eine Lösung bevorzugen, mit der Sie Ihr benutzerdefiniertes CSS auf jedes von Ihnen verwendete WordPress-Theme anwenden können, ist die nächste Methode für Sie.

Methode 2. Verwenden Sie ein Plugin

Benutzerdefinierte CSS-Plugins speichern Ihr benutzerdefiniertes CSS getrennt von Ihrem Design, sodass Ihre Änderungen unabhängig vom verwendeten Design angewendet werden können. Diese Plugins verfügen auch über zusätzliche Funktionen wie die automatische Vervollständigung, die das Hinzufügen von CSS erleichtern können.

Der einzige Nachteil ist, dass es sich um Software von Drittanbietern handelt, was bedeutet, dass sie Ihre Website möglicherweise verlangsamen können. Die meisten dieser Plugins sind jedoch leichtgewichtig, sodass sie im Allgemeinen wenig Einfluss auf die Leistung Ihrer Website haben. Hier sind einige der besten benutzerdefinierten CSS-Plugins, die Sie verwenden können:

• Einfaches benutzerdefiniertes CSS

Einfaches benutzerdefiniertes CSS ist eines der beliebtesten benutzerdefinierten CSS-Plugins. Es ist leicht, einfach zu bedienen und bietet großartige Funktionen. Das Einrichten ist einfach. Alles was Sie tun müssen, ist das Plugin zu installieren und zu aktivieren. Navigieren Sie dann zum Aussehen Abschnitt im linken Bereich Ihres Dashboards.

Sie sehen eine neue Option namens Benutzerdefinierte CSS. Wenn Sie darauf klicken, wird ein Editor geöffnet, in dem Sie Ihr benutzerdefiniertes CSS hinzufügen können. Drücke den Benutzerdefiniertes CSS aktualisieren Schaltfläche, um Ihre Änderungen zu speichern. Um die Änderungen anzuzeigen, aktualisieren Sie einfach Ihre Website.

• Einfaches benutzerdefiniertes CSS und JS

Wenn Sie noch mehr Funktionen wünschen, können Sie die Einfaches benutzerdefiniertes CSS- und JS-Plugin ist eine tolle Möglichkeit. Zusätzlich zum Hinzufügen von CSS können Sie JavaScript-Einträge hinzufügen.

• CSS-Held

Wenn Sie keine einzige Codezeile schreiben möchten, CSS Hero-Plugin ist perfekt für dich. Dieses Plugin bietet einen visuellen CSS-Editor mit Dropdown-Menüs und Eingabefeldern, mit denen Sie fast jeden CSS-Stil auf Ihrer Site bearbeiten können, ohne dass Sie Code schreiben müssen.

Methode 3. Bearbeiten Sie den Rohcode

Mit den beiden oben beschriebenen Methoden können Sie Ihrer Website benutzerdefiniertes CSS hinzufügen, ohne dass Sie Ihre Designdateien berühren müssen. In einigen Fällen möchten Sie jedoch möglicherweise das CSS Ihres Themes bearbeiten oder direkt benutzerdefiniertes CSS zum Code Ihres Themes hinzufügen.

Dazu müssen Sie auf das Stylesheet Ihrer Website zugreifen. Eine einfache Möglichkeit, auf dieses Stylesheet zuzugreifen, ist über das Themeneditor auf Ihrem WordPress-Dashboard.

Bevor wir jedoch weitermachen, müssen Sie einige Sicherheitsvorkehrungen treffen. Zuerst, Sichern Sie Ihre Website. Beim Bearbeiten Ihrer Designdateien können leicht Fehler gemacht werden, die Ihre Site möglicherweise zum Absturz bringen können.

Ein Backup stellt sicher, dass Sie eine funktionsfähige Website haben, zu der Sie zurückkehren können. Nächste, ein Child-Theme erstellen. Wenn Sie Ihr übergeordnetes Thema direkt bearbeiten, gehen die Änderungen bei jeder Aktualisierung des Themas verloren.

Sobald diese Sicherheitsvorkehrungen getroffen sind, melden Sie sich bei Ihrem WordPress-Backend an. Gehe zu Aussehen > Theme-Editor. Wenn Sie auf die Theme-Editor-Option klicken, sehen Sie ein Popup-Fenster, das Sie davor warnt, direkte Änderungen an Ihren Theme-Dateien vorzunehmen. Wenn Sie die obigen Schritte befolgen, können Sie loslegen.

Klicken ich verstehe fortfahren.

Nachdem Sie geklickt haben, sollten Sie standardmäßig das Stylesheet Ihrer Site sehen. Wenn nicht, schauen Sie einfach im rechten Bereich nach und klicken Sie auf style.css unter dem Stylesheet Möglichkeit.

Von hier aus können Sie direkt Änderungen an Ihren Designdateien vornehmen. Vergiss nur nicht zu klicken Speichern und aktualisieren sobald du fertig bist.

Übernehmen Sie die Kontrolle über das Erscheinungsbild Ihrer Website mit benutzerdefiniertem CSS

Das Erlernen des Schreibens von benutzerdefiniertem CSS in WordPress kann für Anfänger einige Zeit in Anspruch nehmen, aber es gibt Ihnen echte Kontrolle über das Erscheinungsbild Ihrer Website. Und das kostenlos und mit minimalen Auswirkungen auf die Leistung Ihrer Website.

Wenn Sie jedoch lieber kein manuelles Designen durchführen möchten, gibt es andere Möglichkeiten, die Arbeit zu erledigen, z. B. mit einem der Top-Page-Builder für WordPress.

5 WordPress Page Builder, mit denen Sie erstaunliche Websites erstellen können

Sie möchten Ihre WordPress-Site fantastisch aussehen lassen, können sich aber keinen Entwickler leisten? Probieren Sie stattdessen diese WordPress-Seitenersteller aus.

Weiter lesen

Über den Autor