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 600.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]

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

Für einen wirklich Um den visuellen Aspekt Ihres WordPress-Themas zu berühren, müssen Sie über die Standardanpassung hinausgehen, die durch die Optionen oder Einstellungen eines WordPress-Themas angeboten wird. Die CSS-Anpassung Ihres WordPress-Blogs ermöglicht es Ihnen, das Erscheinungsbild Ihrer Website zu ä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 SheetsDas ist nicht klarer als das Akronym. Also, lasst es uns aufschlüsseln.

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

Das TeilCascadingDer Name ist Teil dessen, was es wirklich macht. Webseiten können mit mehreren Stylesheets (z. B. einem Wasserfall) gestaltet werden, wobei das unterste Sheet durch Hinzufügen oder Ersetzen von Stilen der obersten Ebene ersetzt wird. Dies ist wichtig, da die Art und Weise, wie Sie Ihre Stile hinzufügen, die ursprünglichen Änderungen überschreibt.

CSS-Selektor

So einfach es auch scheinen mag, mit CSS können fast alle Aspekte einer Webseite geändert werden (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 den verfügbaren CSS-Code in einer Datei mit dem Namen 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, bearbeite diese Datei nicht! Die Updates überschreiben Ihre Änderungen.

Es gibt verschiedene Möglichkeiten, a 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, werfen wir einen Blick auf die Optionen, die Sie zum Anpassen Ihres WordPress-Blogs verwenden können, und diskutieren die Vor- und Nachteile von 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 die Aktualisierungen der Themen, über die wir zuvor gesprochen haben, kein Problem mehr. Ein Update eines WordPress-Themas wirkt sich auf das Thema aus. "ElternteilLassen Sie die Änderungen am Thema Ihres Kindes intakt. Viele Entwickler von WordPress-Themes verstehen die Nützlichkeit eines untergeordneten Themes.

Entdecken Sie Wann und wie Wordpress in einem Unterverzeichnis installieren

Das Erstellen eines untergeordneten Themas ist ganz einfach. Es umfasst das 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 "Cascading" Stylesheets?).

Der Codex Wordpress verfügt über weitere Informationen zum Erstellen von untergeordneten Themen.

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

Sobald Sie Ihr untergeordnetes Design erstellt und korrekt aktiviert haben, können Sie mit dem Anpassen Ihres WordPress-Designs beginnen. Am schnellsten können Sie Ihre Datei bearbeiten style.css, auf die auf zwei Arten zugegriffen werden kann.

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]

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

Die erste besteht darin, den Editor zu verwenden, der im WordPress-Dashboard enthalten ist, indem Sie auf klicken Darstellung> Editor. dasHerausgeber zeigt eine Liste der rechts im Theme verfügbaren Dateien an (Es werden nur beliebte Dateien angezeigt). Deine Datei style.css wird ganz unten in der Liste sein und auf die Option klicken Stylesheet votre fichier style.css wird aufladen.

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

Wordpress Sheet

Die andere Möglichkeit, 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 Ordner " wp-content> Themen« . Sie können die Datei mit einem Texteditor bearbeiten style.css.

Option # 2: Passen Sie CSS über den 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 behalten, wenn Sie das WordPress-Design ändern. Dies hat seine Nachteile, da Stile nicht in allen WordPress-Themen gut angezeigt werden können.

Hier sind einige Plugins:

1. Benutzerdefiniertes CSS in Jetpack (kostenlos)

Die Wordpress-Plugin Jetpack ist auf mehr als 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

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Sobald das Modul im Jetpack-Dashboard aktiviert ist, steht ein benutzerdefinierter CSS-Editor zur Verfügung, mit dem Sie Ihr WordPress-Design anpassen können, ohne ein untergeordnetes Design zu erstellen. Sie greifen auf den Editor zu, indem Sie diesem Pfad folgen. « Aussehen> 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

Für dieses Plugin ist keine Konfiguration erforderlich. Installieren und aktivieren Sie einfach das Plugin. Um Ihren CSS-Code zu ändern, gehen Sie zu " Aussehen> Benutzerdefinierte CSS« im WordPress-Dashboard. Übernehmen Sie Ihre CSS-Änderungen in das Textfeld und speichern Sie anschließend Ihre Einstellungen.

3. CSS Hero (ab $ 14 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 beseitigt die Notwendigkeit, die Syntax von CSS zu verstehen, indem die Interaktion mit dem Code über eine Schnittstelle vereinfacht wird. Dies gilt auch für Animationen und Übergänge. Sie können auch eine Vorschau Ihrer Änderungen in Echtzeit 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 anderen abhebt, auch 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 dabei hilft, Ihre Kampagne zu verbessern und Ihre Gewinne zu maximieren. Dieses WordPress-Adsense-Plugin verfügt außerdem über eine einzigartige Funktion, die als Hintergrundanzeigen bezeichnet wird. Sie können Anzeigen als Hintergrund für Ihren Content anzeigen.

Plus, da es mit Plugins wie kompatibel ist WPBakery et Slider RevolutionSie können Ihre Anzeigen als Schieberegler anzeigen oder auf Ihrer Website platzieren.

Download | Demo | Web-Hosting

2. WP Mediendateimanager

WP Media File Manager ist ein WordPress-Plug-In, mit dem Sie die Medienbibliothek mithilfe der Drag & Drop-Funktion einfach in einer Hierarchie organisieren können. Dies ist eines der leistungsstärksten WordPress-Plugins des CodeCanyon-Dateimanagers. Sie müssen nicht einmal manuell Ordner 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, müssen Sie sich darüber im Klaren sein, dass Sie jetzt über eine echte Medienbibliothek verfügen, die diese Funktionalität bietet.

Abschieds-Download Probleme bestimmte Arten von Dateien, jetzt müssen Sie nur noch dieses Plugin WordPress installieren und lassen Sie sich bei der Verwaltung Ihrer Dateien begleiten.

Download | Demo |Web-Hosting

3. Menü-Held

Hero Menu ist ein WordPress-Plugin aus dem Megamenü. Und obwohl es nicht viel Heldentat leistet, bietet es alle Funktionen, die nur für 19 $ benötigt werden. Ähnlich wie das Mega-Hauptmenü ist es ein Plugin, das auch Produkte für CodeCanyon herstellt und derzeit fast 4500-Umsätze erzielt.Hero Menu Responsive WordPress Mega Menü Plugin

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Im Abschnitt "Funktionen" werden Sie schnell feststellen, dass das Erstellen einer Datei einfach genug ist megamenu. Der Vorgang dauert nur wenige Schritte. Darüber hinaus werden Sie jedoch feststellen, dass das Plugin mit kompatibel ist WooCommerce, schlägt ein ansprechendes Design und eine "Drag & Drop" -Schnittstelle vor, um die Menüs zu erstellen.

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 letztere verhält sich perfekt mit anderen Plugins.

Download | Demo | Web-Hosting

Empfohlene Ressourcen

Entdecken Sie weitere empfohlene Ressourcen, die Sie bei der Erstellung und Verwaltung Ihrer Website unterstützen.

Fazit

Es! Das war's für dieses Tutorial. Wir hoffen, dass Ihnen dieses Tutorial gezeigt hat, wie Sie das CSS Ihrer WordPress-Website anpassen können. Zögern Sie 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 Sie über das Anym Live Editor-Plugin informieren, das eine vollständige Ausgabe 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, die die Interaktion mit der Seite ermöglichen, die geändert werden soll, 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