Springe zum Hauptinhalt

So passen Sie das CSS Ihrer WordPress-Website an

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Wie kann ich das CSS Ihrer WordPress-Website anpassen? Finden Sie es in diesem Artikel heraus.

Unabhängig davon, welches WordPress-Thema Sie für Ihre Website auswählen, wird es andere Websites geben, die es verwenden. Und trotz der vielen Anpassungsoptionen, die viele WordPress-Themes heutzutage bieten, können Sie Ihre Website noch einzigartiger machen.

Für einen wirklich Um den visuellen Aspekt Ihres WordPress-Themas zu berühren, müssen Sie über die Standardanpassung hinausgehen, die die Optionen oder Einstellungen eines WordPress-Themas bieten. Durch die CSS-Anpassung Ihres WordPress-Blogs können Sie das Erscheinungsbild Ihrer Website ändern, um sie wirklich einzigartig zu machen.

In diesem Tutorial werden die verschiedenen Methoden zum Anpassen Ihrer Website mit CSS, zum Erstellen und Anpassen von untergeordneten Designs mithilfe von WordPress-Anpassungs-Plugins und CSS-WordPress-Plugins vorgestellt.

Aber vorher, wenn Sie WordPress Discover noch nie installiert haben Wie man ein Wordpress-Blog 7 Schritte für die Installation et Wie finden, zu installieren und ein Wordpress-Theme auf Ihrem Blog aktivieren 

Dann lassen Sie uns zurückgehen, warum wir hier sind

CSS: Die Grundlagen und wie WordPress sie benutzt

Zunächst einmal: CSS steht für Cascading Style Sheets, was nicht klarer ist als das Akronym. Also, lasst es uns zusammenfassen.

Ein Stylesheet ist ein Dokument, das Stile beschreibt (wie Schriftart, Farben usw..) zur Präsentation eines anderen Dokuments verwendet werden. In unserem Fall haben wir es mit einem Stil der Webseiten zu tun.

Das TeilCascadingDer Name ist Teil dessen, was ihn wirklich mächtig macht. Webseiten können mit mehreren Stylesheets wie einem Wasserfall gestaltet werden, wobei das untere Sheet Styles von einer höheren Ebene hinzufügt oder ersetzt. Dies ist wichtig, da die Art und Weise, wie Sie Ihre Stile hinzufügen, die ursprünglichen Änderungen überschreibt.

So passen Sie das CSS Ihrer WordPress-Website an

So einfach es auch klingt, CSS kann verwendet werden, um fast alles auf einer Webseite zu ändern (einschließlich Layout, Farben, Schriftarten und sogar Animationen).

Erfahren Sie, wie Sie Ihre Benachrichtigungen verwalten, indem Sie entdecken Wie man E-Mail-Benachrichtigungen auf Wordpress verwalten

Die meisten WordPress-Themes verwenden CSS-Code, der in einer aufgerufenen Datei verfügbar ist style.css. Wenn Sie diese Datei öffnen, wird eine vollständige Liste der Stilregeln für Ihr WordPress-Thema angezeigt. Was auch immer du tust, Ändern Sie diese Datei nicht! Die Updates überschreiben Ihre Änderungen.

Es gibt verschiedene Möglichkeiten, a hinzuzufügen benutzerdefinierten CSS-Code zu Ihrem WordPress-Theme, damit Ihre Änderungen ein Update des WordPress-Themas überstehen.

So passen Sie Ihre WordPress-Website mit CSS an

Nachdem Sie nun besser verstanden haben, was CSS ist und wie WordPress-Themes sie verwenden, werden wir uns die Optionen ansehen, mit denen Sie Ihr WordPress-Blog anpassen können, und die Vor- und Nachteile von diskutieren jede Methode.

So passen Sie die CSS-Website WordPress 1

Am Ende unserer Arbeit können Sie feststellen, welche Methode Ihrem WordPress-Theme entspricht.

Option # 1: Passen Sie CSS mithilfe eines untergeordneten Themas an

Wenn Sie un Kind Thema Um Ihren CSS-Code anzupassen, sind Aktualisierungen der zuvor besprochenen Themen kein Problem mehr. Ein Update eines WordPress-Themas wirkt sich auf das Thema aus. "Elternteil», Lassen Sie die Änderungen an Ihrem untergeordneten Thema intakt. Viele Entwickler von WordPress-Themes verstehen die Nützlichkeit eines untergeordneten Themas.

Entdecken Sie Wann und wie Wordpress in einem Unterverzeichnis installieren

Das Erstellen eines untergeordneten Themas ist ziemlich einfach. Es besteht aus dem Erstellen eines Ordners auf Ihrem Webhosting, der eine Datei enthält style.css Hiermit wird das übergeordnete Thema als Vorlage aufgelistet und die Datei importiert style.css des übergeordneten Themas (Erinnern Sie sich an die Bedeutung von "kaskadierenden" Stylesheets?).

Der Codex Wordpress Weitere Informationen zum Erstellen untergeordneter Themen.

So passen Sie die CSS-WordPress-Website an 1 1

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Sobald Sie Ihr untergeordnetes Thema erstellt und ordnungsgemäß aktiviert haben, können Sie mit dem Anpassen Ihres WordPress-Themas beginnen. Der schnellste Weg ist, Ihre Datei zu bearbeiten style.css, auf die auf zwei Arten zugegriffen werden kann.

Schauen Sie sich diesen Artikel an, um es herauszufinden So komprimieren Sie Ihre CSS-, HTML- und Javascript-Dateien

Der erste besteht darin, den im WordPress-Dashboard enthaltenen Editor zu verwenden, indem Sie auf klicken Aussehen> Editor. L 'Herausgeber zeigt eine Liste der rechts im Theme verfügbaren Dateien an (Es werden nur beliebte Dateien angezeigt). Deine Datei style.css befindet sich ganz unten in der Liste und klickt auf die Option Stylesheet votre fichier style.css wird aufladen.

Sie können Ihre Änderungen an diesem Speicherort hinzufügen und die Änderung speichern.

Wordpress Sheet

Der andere Weg, um auf Ihre Datei zuzugreifen style.css (den wir empfehlen) ist das Durchsuchen der Dateien in Ihrem Webhosting über a FTP-Client oder ein Dateimanager. Der von Ihnen erstellte untergeordnete Themenordner befindet sich im " wp-content> themen« . Sie können die Datei mit einem Texteditor bearbeiten style.css.

Option Nr. 2: Passen Sie das CSS im Customizer an

Ab WordPress 4.7 können Benutzer benutzerdefiniertes CSS direkt aus dem WordPress-Administrationsbereich hinzufügen. Es ist super einfach und Sie können Ihre Änderungen mit einer Echtzeitvorschau anzeigen.

So passen Sie die CSS-Website WordPress 2

Zuerst müssen Sie zur Seite gehen Themen »Anpassen.

Zugriff auf den WordPress-Customizer, um das Thema anzupassen

Dadurch wird die Anpassungsoberfläche für das WordPress-Design gestartet.

Auf der rechten Seite sehen Sie die Echtzeitvorschau Ihrer Website mit einer Reihe von Optionen im linken Bereich. Klicken Sie auf die Registerkarte zusätzlicher CSS im linken Bereich.

Die Registerkarte wird verschoben, um Ihnen einen einfachen Bereich anzuzeigen, in dem Sie Ihr benutzerdefiniertes CSS hinzufügen können. Sobald Sie eine gültige CSS-Regel hinzufügen, wird diese im Echtzeit-Vorschaufenster Ihrer Website angezeigt.

Geben Sie zusätzlichen CSS-Code ein und veröffentlichen Sie

Sie können weiterhin benutzerdefinierten CSS-Code hinzufügen, bis Sie mit dem Erscheinungsbild Ihrer Website zufrieden sind. Vergessen Sie nicht, auf " Speichern und Veröffentlichen Oben, wenn Sie fertig sind.

Hinweis: Jedes benutzerdefinierte CSS, das Sie mit dem Customizer hinzufügen, ist nur mit diesem bestimmten WordPress-Thema verfügbar. Wenn Sie es mit anderen Themen verwenden möchten, müssen Sie es mit derselben Methode kopieren und in Ihr neues Thema einfügen.

Option # 3: Passen Sie CSS mit einem Plugin an

Der Vorteil der Verwendung eines Plugins für die CSS-Anpassung besteht darin, dass Sie das Plugin auch dann beibehalten, wenn Sie ein WordPress-Design ändern. Dies hat seine Nachteile, da Stile nicht auf allen WordPress-Themen gut angezeigt werden können.

Hier sind einige Plugins:

1. Benutzerdefiniertes CSS in Jetpack (kostenlos)

Die Wordpress-Plugin Jetpack  ist auf über einer Million WordPress-Websites installiert, wahrscheinlich auch auf Ihren. Es bringt Funktionen zur Verfügung WordPress.com für selbst gehostete Websites und bietet auch eine Modul für CSS-Anpassung. Jetpack-Formen-Plugin

Sobald das Modul im Jetpack-Dashboard aktiviert ist, steht ein benutzerdefinierter CSS-Editor zur Verfügung, mit dem Sie Ihr WordPress-Thema anpassen können, ohne ein untergeordnetes Thema zu erstellen. Sie greifen auf den Editor zu, indem Sie diesem Pfad folgen. " Darstellung> CSS bearbeiten« .

2. Einfaches benutzerdefiniertes CSS (kostenlos)

Wenn stattdessen wollen Sie eine Stand-alone-Option, Einfacher Benutzerdefinierte CSS ist eine gute Wahl. Dieses kostenlose Plugin, das auf mehr als 200.000-Websites mit einer Bewertung von 4,9-Sternen verwendet wird, hilft Ihnen definitiv dabei, Ihr CSS WordPress-Blog zu personalisieren.Single-custom-css

Dieses Plugin erfordert keine Konfiguration, Sie müssen nur das Plugin installieren und aktivieren. Um Ihren CSS-Code zu ändern, gehen Sie zu " Darstellung> Benutzerdefiniertes CSS«  im WordPress-Dashboard. Übernehmen Sie Ihre CSS-Änderungen in das Textfeld und speichern Sie anschließend Ihre Einstellungen.

3. CSS Hero (ab 14 USD pro Jahr)

Die letzte Option des WordPress-Plugins, die wir uns heute ansehen, ist ein Premium-WordPress-Plugin namens CSS-Held. Von 14 $ pro Jahr Mit diesem Plugin können Sie für eine Website Ihr WordPress-Design über eine intuitive Benutzeroberfläche anpassen.CSS Held Wordpress Plugin

Entwarf, gut mit zu arbeiten Dutzende kompatibler WordPress-Themes Mit CSS Hero haben Sie die vollständige Kontrolle über alle Elemente Ihres WordPress-Themas. Für Themen, die nicht in der Liste enthalten sind, können Sie die rocket-Mode um die Anpassung von CSS Hero zu aktivieren.

CSS Hero macht das Verständnis der CSS-Syntax überflüssig, indem die Interaktion mit Code über eine Benutzeroberfläche vereinfacht wird. Dies gilt für Animationen und Übergänge. Sie können Ihre Änderungen auch in Echtzeit in der Vorschau anzeigen und zu einer früheren Version zurückkehren.

Entdecken So verschieben Sie Kommentare in WordPress von einem Artikel in einen anderen

Wenn Sie das CSS Ihres WordPress-Blogs vollständig ändern möchten, aber kein CSS lernen möchten, ist CSS Hero eine großartige Allround-Option zum Anpassen Ihrer Website, insbesondere, wenn Sie eines der WordPress-Themen verwenden.

Obwohl Sie wissen, dass Inhalte wichtig sind, möchten Sie, dass sich Ihre Website von der Masse abhebt, selbst wenn Sie ein beliebtes WordPress-Thema verwenden. Mit CSS können Sie das Design Ihrer Website so anpassen, dass es völlig einzigartig ist.

Gehen Sie weiter und entdecken Sie Wie zuzulassen, dass bestimmte Seiten bearbeiten

Es gibt also mehrere Möglichkeiten, das CSS Ihres WordPress-Themas anzupassen:

  1. ein Kinderthema.
  2. die Customizer.
  3. CSS-Plugin.

Entdecken Sie auch einige Premium-WordPress-Plugins  

Sie können andere WordPress-Plugins verwenden, um ein modernes Erscheinungsbild zu erhalten und den Grip Ihres Blogs oder Ihrer Website zu optimieren.

Wir bieten Ihnen hier einige Premium-WordPress-Plugins an, die Ihnen dabei helfen werden.

1. Adning Werbung

WP PRO Advertising System ist ein WordPress-Werbemanagement-Plugin, das strategische 18-Standorte bietet, mit denen Sie Werbung auf Ihrer Website anzeigen können. Es gibt auch einen detaillierten Statistikabschnitt, in dem Sie die Leistung jeder Anzeige sehen können.Hinzufügen von Werbung WordPress Plugin

Diese Funktion ist von entscheidender Bedeutung, da sie Ihnen hilft, Ihre Kampagne zu verbessern und Ihre Gewinne zu maximieren. Dieses WordPress Adsense-Plugin verfügt außerdem über eine einzigartige Funktion namens Hintergrundanzeigen. Sie können Anzeigen als Hintergrund für Ihre Inhalte anzeigen.

Plus, da es mit Plugins wie kompatibel ist WPBakery et Slider Revolutionkönnen Sie Ihre Anzeigen in Form von Schiebereglern anzeigen oder an einer beliebigen Stelle auf Ihrer Website platzieren.

Download | Demo | Web-Hosting

2. WP Mediendateimanager

WP Media File Manager ist ein WordPress-Plugin, mit dem Sie die Medienbibliothek mithilfe der Drag & Drop-Funktion einfach in einer Form von Hierarchie organisieren können. Es ist eines der leistungsstärksten WordPress-Dateimanager-Plugins auf CodeCanyon. Sie müssen Ordner nicht einmal manuell erstellen.

WP Media File Manager WordPress Medienbibliothek Ordner Kategorien Upload Plugin

Mit diesem WordPress-Plugin können Sie Tausende von Dateien vom Dateimanager Ihres PCs auf die Website hochladen, indem Sie die Hierarchie des Quellordners automatisch kopieren. Wenn Sie dieselbe Datei in verschiedenen Ordnern haben möchten, wissen Sie, dass Sie jetzt über eine echte Medienbibliothek verfügen, die diese Funktionalität bietet.

Verabschieden Sie sich von Problemen beim Herunterladen bestimmter Dateitypen. Jetzt müssen Sie nur noch dieses WordPress-Plugin installieren und damit Ihre Dateien verwalten.

Download | Demo | Web-Hosting

3. Menü-Held

Hero Menu ist ein Mega-Menü WordPress-Plugin. Und obwohl es nicht viel Heldentum leistet, bietet es alle notwendigen Funktionen für nur 19 US-Dollar. Ein bisschen wie Mega Main Menu ist es ein Plugin, das auch Produkte von CodeCanyon enthält und derzeit fast 4500 Verkäufe auf seinem Konto hat.Hero Menu Responsive WordPress Mega Menü Plugin

Im Abschnitt Funktionen werden Sie schnell feststellen, dass es recht einfach ist, eine zu erstellen megamenu. Der Vorgang dauert nur wenige Schritte. Darüber hinaus werden Sie jedoch feststellen, dass das Plugin mit kompatibel ist WooCommerce, bietet ein ansprechendes Design und eine Drag & Drop-Oberfläche zum Erstellen der Menüs.

Der Menü-Builder verbessert die Verwendung des Plugins und vereinfacht die Arbeit des Käufers erheblich. Die Integration der Benutzeroberfläche ist ebenfalls ein großartiger Job und die Benutzeroberfläche verhält sich perfekt mit anderen Plugins.

Download | Demo | Web-Hosting

Empfohlene Ressourcen

Informieren Sie sich über andere empfohlene Ressourcen, die Sie beim Erstellen und Verwalten Ihrer Website unterstützen.

Fazit

Es! Das war's für dieses Tutorial. Wir hoffen, dieses Tutorial hat Ihnen gezeigt, wie Sie das CSS Ihrer WordPress-Website anpassen können. Zögere nicht zu Teile es mit deinen Freunden in deinen bevorzugten sozialen Netzwerken

Sie können jedoch auch unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung.

Wenn Sie Vorschläge oder Anmerkungen haben, hinterlassen Sie diese in unserer Rubrik commentaires.

... 

Dieser Artikel enthält 1 Kommentar

  1. Guten Tag,

    Ich möchte Ihnen das Anym Live Editor-Plugin vorstellen, das die vollständige Bearbeitung von CSS oder SCSS und Javascript von jeder WordPress-Seite aus ermöglicht und eine Live-Wiedergabe der vorgenommenen Änderungen bietet! Darüber hinaus ist das Plugin mit einer Vielzahl von Tools ausgestattet, mit denen Sie mit der Seite interagieren können, die Sie ändern möchten, und funktioniert wie jede normale IDE (Sublime Text Style), diesmal jedoch für Ihre Site WordPress.

Hinterlassen Sie einen Kommentar

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

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
4 Aktien
Aktie2
tweet
Registrieren2