Die 8 besten CSS Live Editing Plugins für WordPress

Den Style einer WordPress Seite per CSS anzupassen kann ziemlich nervenaufreibend sein. Hauptproblem: Für eure Änderungen gibt es keine Vorschau. Wir stellen euch die acht besten Plugins vor, mit denen ihr Styleänderungen live beobachten könnt.

Vom einfachen Texteditor mit Preview hin zum umfangreichen visuellen Editor, der auf Klicks und Drag & Drop reagiert: bei diesen acht Plugins ist alles dabei. Was sie alle verbindet: alle diese WordPress Plugins ermöglichen es euch, CSS-Änderungen live mitzuverfolgen.

[su_list icon=“icon: angle-double-right“ icon_color=“#000000″]
Umfangreiche visuelle Editoren

• 1. SiteOrigin CSS
• 2. Yellow Pencil
• 3. CSS Hero
• 4. Microthemer

Simple Code-Editoren

• 5. Customizer Custom CSS
• 6. Modular Custom CSS
• 7. Advanced CSS Editor
• 8. TJ Custom CSS

[/su_list]

1. SiteOrigin CSS

Dieses wunderbare Plugin bietet extrem viele Funktionen und ist trotzdem kostenlos: der SiteOrigin CSS Editor. Gleichermaßen geeignet für Anfänger wie Profis: Das Plugin integriert einen visuellen Editor in eure WordPress Seite, der euch das Stylen ohne CSS-Kenntnisse ermöglicht. Wer CSS kann, nutzt den Code-Editor mit Auto-Vervollständigung und Live-Preview.

Funktionen:

• Anpassungen über visuelle Kontrollelemente mit Live-Vorschau
• Professioneller Code-Editor mit Auto-Vervollständigung von CSS-Selektoren und Attributen mit Live-Vorschau
• Kompatibel mit allen WordPress Themes
• Kostenlos!

[su_button url=“https://wordpress.org/plugins/so-css/“ target=“blank“ background=“#009FD4″ size=“7″ icon=“icon: arrow-circle-down“ rel=“nofollow“]Download[/su_button]

 

2. Yellow Pencil

Das WordPress Plugin Yellow Pencil integriert ebenso einen visuellen Editor sowie einen Code-Editor mit Echtzeit-Vorschau in eure WordPress Seite. Der Funktionsumfang ist wirklich groß und ermöglicht es euch, den Style eurer Seite perfekt zu machen. Besonders cool: bevor ihr das Plugin kauft, könnt ihr eine Live-Demo ausprobieren!

Funktionen:

• Styleänderungen über visuellen Editor mit Live-Preview
• Änderungen per Drag & Drop
• CSS-Inspektor: Elemente mit der Maus anwählen
• 600+ Schriftarten
• 300+ Hintergrundmuster
• Farbpalette mit aktuellen Trendfarben im Webdesign
• CSS-Editor mit Live-Vorschau
• Visueller Generator für CSS-Animationen
• Kostenlose Lite-Version mit abgespecktem Funktionsumfang
• Ab 23 $

[su_button url=“https://de.wordpress.org/plugins/yellow-pencil-visual-theme-customizer/“ target=“blank“ background=“#009FD4″ size=“7″ icon=“icon: arrow-circle-down“ rel=“nofollow“]Download[/su_button]

[su_button url=“http://waspthemes.com/yellow-pencil/“ target=“blank“ background=“#00B23C“ size=“7″ icon=“icon: shopping-cart“ rel=“nofollow“]Kaufen[/su_button]

 

3. CSS Hero

Mit dem Plugin CSS Hero integriert ihr einen umfangreichen, visuellen Editor in eure WordPress Seite. Ihr nehmt die Änderungen ganz einfach mit der Maus vor und braucht keine CSS-Kenntnisse. Ausprobieren könnt ihr das Plugin in dieser Live-Demo. CSS Hero ist allerdings nur mit bestimmten Themes kompatibel.

Funktionen:

• CSS einfach über visuellen Editor mit direkter Vorschau anpassen
• Vorschau für verschiedene Geräte mit der Möglichkeit, gerätespezifisches Styling vorzunehmen
• 600+ Schriftarten
• Intelligente Farbauswahl per Klick
• Exportieren des generierten CSS einfach möglich
• Bearbeitungsverlauf: früherer Stand kann problemlos wiederhergestellt werden
• Gute Performance: Ressourcen werden nur während Benutzung des Live-Editors benötigt
• Ab 29$ jährlich

[su_button url=“http://www.csshero.org/“ target=“blank“ background=“#00B23C“ size=“7″ icon=“icon: shopping-cart“ rel=“nofollow“]Kaufen[/su_button]

 

4. Microthemer

Ein weiteres Plugin für visuellen und Code-Editor mit Live-Preview ist Microthemer. Ohne CSS-Kenntnisse nutzt ihr einfach den visuellen Editor und bearbeitet eure Seite mit der Maus. Für Entwickler bringt das Plugin aber auch einen Code-Editor mit, in dem ihr neben CSS auch SCSS und JavaScript schreiben könnt.

Funktionen:

• Visueller Editor mit Live-Preview für Styleanpassungen
• Professioneller Code-Editor mit Vorschau in Echtzeit für CSS, SCSS und JavaScript
• Styling und Vorschau für verschiedene Geräte
• Alle WordPress Themes oder Plugins können angepasst werden
• 80+ CSS-Styling-Optionen für jedes Element
• Inklusive Google Fonts
• Entwurfsmodus: Styling anpassen, ohne es zu veröffentlichen
• Optimierte Plugin-Performance
• Kostenlose Lite-Version mit abgespecktem Funktionsumfang
• Ab 45$

[su_button url=“https://de.wordpress.org/plugins/microthemer/“ target=“blank“ background=“#009FD4″ size=“7″ icon=“icon: arrow-circle-down“ rel=“nofollow“]Download[/su_button]

[su_button url=“https://themeover.com/“ target=“blank“ background=“#00B23C“ size=“7″ icon=“icon: shopping-cart“ rel=“nofollow“]Kaufen[/su_button]

 

5. Customizer Custom CSS

Mit dem Plugin Customizer Custom CSS könnt ihr im WordPress Theme Customizer eigenes CSS hinzufügen und die Änderungen in der Live-Vorschau mitverfolgen. Unter Design > Anpassen findet ihr nach der Installation einen Bereich für eigenen CSS-Code. Für die Vorschau wird die Live-Preview-Funktion des Customizers benutzt.

Funktionen:

• Eigenes CSS im Theme Customizer hinzufügen
• Änderungen über die Vorschaufunktion von WordPress ansehen
• Simples Plugin ohne Schnickschnack
• Ideal für Entwickler, die keinen visuellen Editor benötigen
• Kostenlos

[su_button url=“https://wordpress.org/plugins/customizer-custom-css/“ target=“blank“ background=“#009FD4″ size=“7″ icon=“icon: arrow-circle-down“ rel=“nofollow“]Download[/su_button]

 

6. Modular Custom CSS

Mit dem Plugin Modular Custom CSS könnt ihr ebenso eigenes CSS im Theme Customizer (Design > Anpassen) hinzufügen und die Änderungen in der Vorschau live betrachten. Die Besonderheit bei diesem WordPress Plugin ist die Möglichkeit, spezifisches CSS für jedes einzelne Theme und Plugin hinzuzufügen. Wechselt ihr also öfter mal das Theme, ist dieses Plugin extrem praktisch, denn das jeweils hinzugefügte CSS bleibt erhalten.

Funktionen:

• Editor für eigenes CSS im Theme Customizer
• Anpassungen in der Live Vorschau von WordPress
• Theme- oder Plugin-spezifisches CSS
• Simples Plugin für Entwickler
• Kostenlos

[su_button url=“https://wordpress.org/plugins/modular-custom-css/“ target=“blank“ background=“#009FD4″ size=“7″ icon=“icon: arrow-circle-down“ rel=“nofollow“]Download[/su_button]

 

7. Advanced CSS Editor

Das Plugin Advanced CSS Editor integriert die Möglichkeit, für verschiedene Endgeräte eigenen CSS-Code einzubinden, in den Theme Customizer (Design > Anpassen). Jeweils für Desktop, Tablet oder Smartphone könnt ihr spezifisches CSS angeben und in der Live Preview betrachten.

Funktionen:

• Gerätespezifisches CSS im Theme Customizer hinzufügen (Desktop, Tablet, Smartphone)
• Änderungen in der Vorschau live mitverfolgen
• Einfach gehaltenes Plugin für Developer
• Kostenlos

[su_button url=“https://wordpress.org/plugins/advanced-css-editor/“ target=“blank“ background=“#009FD4″ size=“7″ icon=“icon: arrow-circle-down“ rel=“nofollow“]Download[/su_button]

 

8. TJ Custom CSS

Das Plugin TJ Custom CSS integriert zwei Varianten, eigenes CSS hinzuzufügen, in WordPress. Zum einen ermöglicht es wie die bereits vorgestellten Plugins, im Theme Customizer (Design > Anpassen) eigene Styles zu definieren und über die Live Vorschau direkt anzusehen. Außerdem wird ein großer CSS-Code-Editor ohne direkte Vorschau eingebunden.

Funktionen:

• Eigenes CSS über den Theme Customizer einfügen und betrachten
• Großer Code-Editor
• Simpel gehalten und ideal für Entwickler
• Kostenlos

[su_button url=“https://wordpress.org/plugins/theme-junkie-custom-css/“ target=“blank“ background=“#009FD4″ size=“7″ icon=“icon: arrow-circle-down“ rel=“nofollow“]Download[/su_button]

 

Fazit

CSS-Änderungen live beobachten? Mit diesen acht WordPress Plugins kein Problem! Vier davon integrieren einen visuellen Editor in WordPress, der Nicht-Entwicklern ohne CSS-Kenntnisse Styleanpassungen ermöglicht. Vier weitere binden einen simplen Code-Editor ein, der die Live-Preview des Theme Customizers nutzt, um Änderungen anzuzeigen. Welches das beste Plugin ist? Das kommt auf eure Vorlieben an! Entscheidet einfach nach gewünschtem Funktionsumfang, welches der Plugins für euch das Richtige ist.

Arbeitet ihr mit einem Plugin für Echtzeit-Vorschau von Änderungen? Verratet uns in den Kommentaren, welches WordPress Plugin ihr nutzt!