Beste CSS Live Editor WordPress Plugins 2020

Das Anpassen des Designs Ihrer Website war noch nie so einfach. Mithilfe eines WordPress CSS Live Editor-Plugins können Sie jetzt eine einzigartige Website erstellen, die Ihren speziellen Designspezifikationen entspricht und das Image Ihrer Marke widerspiegelt.


Bis vor kurzem war die Verwendung von CSS zur Änderung des Erscheinungsbilds Ihrer Website hauptsächlich Webdesignern überlassen. Es gibt jedoch jetzt eine Reihe von WordPress CSS Live Editor-Plugins, mit denen Sie Ihre Site anpassen können. Einige erfordern ein wenig Programmierkenntnisse, während andere keinerlei Programmiererfahrung benötigen. Mit allen können Sie in Echtzeit am Frontend Ihrer realen Site arbeiten.

In diesem Artikel werden wir uns ansehen, was genau ein CSS-Live-Editor-Plugin ist, welche WordPress-CSS-Live-Editor-Plugins verfügbar sind und worauf Sie bei der Auswahl achten müssen.

Was ist ein WordPress CSS Live Editor Plugin??

Mit einem WordPress CSS Live Editor-Plugin können Sie das Design Ihres Themas anpassen. Anders als beim direkten Bearbeiten der CSS-Dateien oder bei Verwendung eines Standard-CSS-Plugins können Sie mit einem WordPress CSS Live Editor-Plugin am Frontend Ihrer Site arbeiten. Dies bedeutet, dass Sie Ihre Änderungen live in Echtzeit verfolgen können, während Sie sie vornehmen.

WordPress CSS Live Editor Plugin

Wenn Sie ein WordPress CSS Live Editor-Plugin verwenden, müssen Sie Code eingeben oder die Steuerelemente am Frontend anpassen. Dies bedeutet, dass Sie beobachten können, wie Ihre Änderungen während der Eingabe vorgenommen werden. Darüber hinaus sparen Sie Zeit, wenn Sie auf der Besucherseite einer Website arbeiten, um zwischen den Registerkarten zu wechseln und ständig auf Aktualisieren zu klicken.

WordPress CSS Live Editor Plugins Systemsteuerung

Die WordPress CSS Live Editor-Plugins, bei denen Sie das CSS nicht bearbeiten müssen, zeigen direkt ein Bedienfeld am vorderen Ende Ihrer Website an, mit dem Sie über eine visuelle Oberfläche Änderungen am Design Ihrer Website vornehmen können. Dies funktioniert ganz einfach, indem Sie einfach auf ein Element auf der Seite zeigen und darauf klicken und dann eine neue Einstellung aus den verfügbaren Optionen auswählen. Die Auswahl eines der WordPress CSS Live Editor-Plugins mit dieser Funktion ist ideal für diejenigen, die das Design ihrer Website anpassen möchten, aber nicht wissen, wie man CSS schreibt.

Unabhängig davon, welche Art von WordPress CSS Live Editor-Plugin Sie verwenden, sind die Endergebnisse im Wesentlichen gleich. Sie können ein originelles und persönliches Design für Ihre Website erstellen. Dank der Live-Editor-Komponente sparen Sie nicht nur Zeit und Mühe, sondern können den Vorgang auch genießen.

Worauf Sie in einem WordPress CSS Live Editor-Plugin achten sollten

Was Sie von einem CSS Live Editor-Plugin erwarten, hängt stark von Ihrem CSS-Wissen oder Ihrer Programmiererfahrung ab.

Wenn Sie kein Programmierer sind, keine Sorge, einige CSS-Live-Editor-Plugins wurden erstellt, um von Anfängern verwendet zu werden. Sie müssen jedoch ein Live-Editor-Plugin mit einem Control Panel auswählen, mit dem Sie nur zeigen und klicken können, um Änderungen vorzunehmen. Es lohnt sich jedoch, genau zu prüfen, welche Elemente Sie anpassen können, da jedes Plugin anders ist.

Erfahrene Entwickler möchten möglicherweise ein Plugin, mit dem Sie den Code selbst eingeben oder bearbeiten können. Eine gute Option ist eine, die Ihnen beim Codieren und Hervorheben von Fehlern hilft. Weitere Plugin-Funktionen, nach denen Sie suchen müssen, unabhängig von Ihrer Erfahrung:

  • Funktioniert es mit allen WordPress-Themes und Plugins??
  • Bietet es irgendwelche vorgefertigten Designs?
  • Können Sie im Entwurfsmodus arbeiten, bevor Sie die Änderungen veröffentlichen??
  • Speichert es inkrementelle Änderungen, sodass Sie Ihre Arbeit bei Bedarf rückgängig machen können?
  • Bietet es ausführliche Dokumentation, Tutorials und Support?

Jetzt wissen Sie also, was Sie beachten müssen, bevor Sie eine Auswahl treffen. Schauen wir uns die verschiedenen verfügbaren WordPress CSS Live Editor-Plugins an.

Haftungsausschluss: WPExplorer ist ein Partner für ein oder mehrere der unten aufgeführten Produkte. Wenn Sie auf einen Link klicken und einen Kauf abschließen, können wir eine Provision erheben.

1. CSS Hero

CSS-Held

Info & DownloadView Die Demo

CSS Hero ist ein Premium-Plugin für den WordPress-Live-Theme-Editor, mit dem Sie nahezu jeden Aspekt des Designs Ihres Themas anpassen können. Dazu wird eine intuitive Point-and-Click-Oberfläche verwendet, die am vorderen Ende der Site funktioniert, ohne dass Sie eine CSS-Zeile eingeben müssen, wenn Sie dies wünschen. Selbst wenn Sie überhaupt keine Programmierkenntnisse haben, können Sie dieses Plugin verwenden, um das Design Ihrer Site zu ändern.

CSS Hero hat einige besonders bemerkenswerte Funktionen. Erstens werden alle Ihre Änderungen gespeichert, sodass Sie alle durchgeführten Arbeiten rückgängig machen oder zu einem bestimmten Punkt in Ihrem Workflow zurückkehren können. Sie müssen nicht länger befürchten, einen Fehler zu machen und Ihre Website zu beschädigen.

Zweitens bietet CSS Hero “Ready Made Styles” und “Theme Skins”. Auf diese Weise können Sie Hunderte von Designs und 29 vorgefertigte Layouts als Ausgangspunkte für Ihre Site auswählen. Selbst diejenigen von uns, die keine Inspiration oder Vision für das Design haben, können eine Website erstellen, auf die sie stolz sein können.

CSS Hero ist eines der beeindruckendsten WordPress CSS Live Editor-Plugins, mit denen Sie das Design Ihrer Website ganz einfach anpassen können, unabhängig davon, ob Sie ein Programmieranfänger oder ein Webentwickler sind. Bevor Sie CSS Hero für nur 19 US-Dollar kaufen, sollten Sie prüfen, ob dieses Plugin mit Ihrem Thema funktioniert. CSS Hero arbeitet an einer Reihe von Hero-fähigen Themen und bietet Ihnen eine Beschreibung, einen Kompatibilitätsprozentsatz (fyi Total erzielt die höchste höchste Bewertung von 99% – weit höher als bei anderen meistverkauften Premium-Themen) und eine Live-Testseite für jedes Thema. Sie können auch CSSHero ausprobieren RocketMode um es für Ihr aktuelles Thema zugänglich zu machen.

CSSHero Sommer Sale

Im Moment können Sie bei CSSHero während des Sommerschlussverkaufs bis zu 50% sparen! Beim Auschecken wird kein Code benötigt, der Rabatt wird angewendet. Das Angebot endet am 9. August 2016.

Sparen Sie bis zu 50% bei CSSHero

2. Gelber Stift

Gelber Bleistift

Info & DownloadView Die Demo

Yellow Pencil ist ein WordPress Visual CSS Style Editor und ein weiteres Plugin, das keine Codierung erfordert. Es gibt jedoch einen integrierten CSS-Editor für diejenigen, die ihre Stylesheets von Hand bearbeiten möchten. Dieses Plugin funktioniert zu 100% im Frontend, sodass Sie Ihre Site in Echtzeit sehen und bearbeiten können. Es wurde erstellt, damit Sie jedes Element in einem beliebigen Thema oder Plugin anpassen können. Sie können Ihr Thema in wenigen Minuten bearbeiten oder das gesamte Design Ihrer Website neu gestalten, falls Sie dies wünschen.

Mit Yellow Pencil können Sie einzelne CSS-Selektoren einfach hervorheben und so Ihr Thema schnell und schmerzlos ändern. Dieses Plugin bietet mehr als 300 Hintergründe, mehr als 600 Schriftfamilien und mehr als 50 Animationen, sodass Sie Ihr Thema an das Image Ihrer Marke anpassen können. Gelbe Seiten bieten auch eine umfangreiche Dokumentation und Unterstützung für diejenigen, die noch keine WordPress Live CSS Editor-Plugins verwendet haben.

Yellow Pencil bringt Ihnen 23 US-Dollar zurück und ist mit allen WordPress-Themes und Plugins kompatibel. Wieder eine großartige Option für Anfänger und erfahrene Webdesigner.

3. TJ Custom CSS

TJ Custom CSS Plugin

TJ Custom CSS von Theme Junkie ist ein kostenloses WordPress-Plugin, mit dem Sie Ihre Site über eine Front-End-Oberfläche anpassen können. Dieses Plugin wurde speziell für Programmierer entwickelt und ist kein Plugin, das denjenigen empfohlen werden kann, die mit CSS nicht vertraut sind.

Wie viele dieser Plugins verwendet TJ Custom CSS einen CSS-Manager, um das benutzerdefinierte CSS zu Ihrer Site hinzuzufügen und alle Themen oder Standardstile zu überschreiben. Dies kann über Ihr Dashboard aufgerufen und bearbeitet werden.

Mit TJ Custom CSS können Sie jedoch auch eine Vorschau Ihrer Änderungen in Echtzeit anzeigen. Mit dem Live Customizer können Sie die Auswirkungen Ihrer Änderungen beim Hinzufügen des benutzerdefinierten CSS anzeigen. Dies kann Ihnen viel Zeit sparen, da Sie Ihre Arbeit nicht ständig speichern, die Browser-Registerkarten wechseln und Seiten aktualisieren müssen.

TJ Custom ist ein sehr einfaches Plugin, mit dem Sie eine einzigartige Site erstellen können, die genau Ihren Anforderungen entspricht. Wenn Sie gerne mit Code basteln und Erfahrung mit dem Anpassen Ihres Themas mithilfe von CSS haben, ist dies möglicherweise das perfekte Plugin für Sie.

4. SiteOrigin CSS

SiteOrigin CSS Editor

SiteOrigin CSS ist ein kostenloses erweitertes WordPress CSS Live Editor Plugin von SiteOrigin. Berichten zufolge kompatibel mit allen WordPress-Themes. Dieses funktionsreiche Plugin bietet eine Auswahl an Tools, die auf die Bedürfnisse aller Benutzer zugeschnitten sind, unabhängig von ihrer Codierungserfahrung.

Für Anfänger bietet SiteOrigin CSS einen visuellen Editor. Dies besteht aus einem einfachen Satz von Steuerelementen, mit denen Sie Stile, Farben und andere Einstellungen einfach auswählen können. Sie benötigen keinerlei Programmierkenntnisse und können mit nur wenigen Klicks Änderungen am Design Ihrer Website vornehmen.

Für diejenigen mit etwas Erfahrung in der manuellen CSS-Bearbeitung und dem Bedürfnis, mehr zu tun, wird SiteOrigin mit einem dynamischen Inspektor geliefert. Auf diese Weise finden Sie den richtigen Selektor, mit dem Sie auf ein bestimmtes Element abzielen können, das Sie anpassen möchten. Dies ist oft der schwierigste Teil beim Bearbeiten von vorhandenem CSS. Daher ist es eine große Hilfe für diejenigen, die noch lernen.

Für die fortgeschritteneren Programmierer gibt es im leistungsstarken CSS-Editor des SiteOrigin-Plugins eine automatische Vervollständigung sowohl für CSS-Selektoren als auch für Attribute. Es hilft Ihnen auch dabei, Probleme in Ihrem CSS zu finden, bevor Sie es veröffentlichen.

Unabhängig davon, welche Funktionen dieses Plugins Sie zum Anpassen Ihrer WordPress-Site verwenden, findet die gesamte Arbeit am Frontend Ihrer Site in Echtzeit statt, sodass Sie Ihre Änderungen beobachten können, während Sie sie vornehmen.

5. Mikrothemer

Microtherma

Info & DownloadView Die Demo

Microthemer ist ein intuitives und leistungsstarkes visuelles Front-End-Premium-WordPress-CSS-Editor-Plugin. Es kann das Erscheinungsbild jedes WordPress-Themas oder Plugins anpassen und ist leicht genug, um eine Verlangsamung Ihrer Website zu vermeiden.

Microthemer bietet Optionen für Anfänger und Profis. Nicht-Codierer können Elemente wie Farben, Schriftarten, Hintergrundbilder und Site-Layouts ändern, um nur einige zu nennen. Entwickler können im Live-Vorschaumodus arbeiten und von Hand in CSS, SCSS und JavaScript codieren.

Eine wichtige Funktion von Microthemer ist, dass Sie im Entwurfsmodus arbeiten können. Sie können ein neues Design für Ihre Website ausprobieren oder verschiedene Stiloptionen ausprobieren, ohne dass dies die Erfahrung Ihres Publikums auf Ihrer Website beeinträchtigt. Sie können dann alle Ihre Änderungen auf einmal veröffentlichen, sobald Sie mit dem endgültigen Entwurf zufrieden sind.

Microthemer enthält äußerst ausführliche Tutorials, Dokumentationen und Support-Foren, mit denen Sie dieses Plugin optimal nutzen können. Sie können Microthemer für eine einmalige Gebühr von 45 US-Dollar erwerben, die lebenslange kostenlose Upgrades beinhaltet.

Bonus: Ultimativer Tweaker

Ultimativer Tweaker für WordPress

Info & DownloadView Die Demo

Vielleicht möchten Sie nicht nur das Front-End-Erscheinungsbild Ihrer Website bearbeiten, sondern auch einige der Benutzerrollen, die Anmeldeseite oder andere WordPress-Funktionen. Hier kann der Ultimate Tweaker für WordPress nützlich sein. Das Plugin ist mit aktuellen Versionen von WordPress kompatibel. Die meisten JavaScript-fähigen Browser sorgen dafür, dass sie problemlos funktionieren.

Ultimate Tweaker enthält mehr als 260 verschiedene Hacks und Tweaks, mit denen Benutzer (ohne PHP- oder Programmierkenntnisse) WordPress konfigurieren und anpassen können. Trotz der großen Anzahl von Funktionen ist das Plugin sehr schnell und optimiert, um nur verwendete Tweaks zu laden (verzögertes Laden ohne Speichernutzung).

Das Plugin unterstützt auch die meisten Themen, Logos und Symbole und schützt den Inhalt (kein Kontextmenü, keine Auswahl und kein Ziehen). Mit der HTML Minifier-Funktion können Benutzer Kommentare entfernen, HTML minimieren und relative URLs erstellen.

Zu den bemerkenswerten Funktionen dieses Plugins gehören eine leichte Administrationsoberfläche mit automatischer Speicherung, HTML Minifier und Builder für relative Links, die Option zum Ausblenden von Meta-Boxen auf benutzerdefinierten Seitentypen, Rollenmanager, rollenunabhängiger Einstellungsmodus, 2-mal schneller / verzögertes Laden, Ausblenden und Administratorrolle “Ultimate Tweaker”.


Abschließende Gedanken

Alle hier erwähnten WordPress CSS Live Editor-Plugins sind beeindruckende Optionen, mit denen Sie Ihr Site-Design anpassen können. Egal für welches Plugin Sie sich entscheiden, lesen Sie unbedingt die bereitgestellte Dokumentation, damit Sie das Beste daraus machen können. Je besser Sie verstehen, wie man einen Live-Editor verwendet, desto besser sind die Designs, die Sie erstellen.

Verwenden Sie ein CSS Live Editor Plugin und wenn ja welches? Würdest du es weiterempfehlen? Bitte teilen Sie alle nützlichen Tipps oder Beobachtungen in den Kommentaren.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map