12. September 2016

Styleänderungen in Echtzeit mitverfolgen Die 8 besten CSS Live Editing Plugins für WordPress

   Schreibe einen Kommentar

Ein Beitrag von Katharina

Share on Facebook4Tweet about this on Twitter9Share on Google+0Share on LinkedIn0Email this to someone

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.

1. SiteOrigin CSS

WordPress Plugin SiteOrigin CSS

Das WordPress Plugin 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!
Download

 

2. Yellow Pencil

WordPress Plugin Yellow Pencil

Das WordPress Plugin Yellow Pencil: Visual CSS Style Editor

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 $
Download Kaufen

 

3. CSS Hero

WordPress Plugin CSS Hero

Das WordPress Plugin 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
Kaufen

 

4. Microthemer

WordPress Plugin Microthemer

Das WordPress Plugin 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$
Download Kaufen

 

5. Customizer Custom CSS

WordPress Plugin Customizer Custom CSS

Das WordPress Plugin 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
Download

 

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
Download

 

7. Advanced CSS Editor

WordPress Plugin Advanced CSS Editor

Das WordPress Plugin 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
Download

 

8. TJ Custom CSS

WordPress Plugin ThemeJunkie Custom CSS

Das WordPress Plugin 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
Download

 

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!

Share on Facebook4Tweet about this on Twitter9Share on Google+0Share on LinkedIn0Email this to someone
Katharina

Katharina

Beim Webseiten basteln vergesse ich schnell mal die Zeit. An WordPress gefällt mir besonders die vielfältige Welt der Plugins und Themes, die zum Ausprobieren einlädt.
Katharina

Du willst up-to-date bleiben?

Trage dich jetzt in unseren kostenlosen Newsletter ein, um stets die aktuellsten Neuigkeiten rund um Wordpress zu erhalten.

Wir geben deine Daten nicht weiter! Wir hassen Spam genauso wie du!

Schreibe einen Kommentar

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