Endlich Kontrolle über CSS
ohne Chaos im WordPress-Backend
Organisiere Custom CSS sauber, modular und sicher – ohne Theme-Dateien anzufassen, ohne Copy-Paste-Wildwuchs und ohne Angst vor Updates. Entwickelt für moderne WordPress-Workflows, Agenturen und Projekte mit Anspruch.
Struktur statt CSS-Chaos
Verwalte Styles logisch getrennt, versionierbar und nachvollziehbar – statt kilometerlanger styles.css-Dateien oder verstreuter Builder-Snippets.
Schneller arbeiten
Änderungen testen, Vorschauen prüfen und Anpassungen ausrollen – direkt im Workflow, ohne unnötige Umwege oder Theme-Abhängigkeiten.
Sauber. Sicher. Zukunftsfähig.
Kein Theme-Lock-in, klare Rechteverwaltung und ein System, das auch bei wachsenden Projekten performant und wartbar bleibt.
Schluss mit dem CSS-Kuddelmuddel im Customizer
LCS Custom CSS bringt Ordnung, Geschwindigkeit und Sicherheit in Deine Styles – mit echten Dateien, klaren Bereichen und einem Workflow, der auch bei wachsenden Projekten sauber bleibt.
Dateibasiert statt Textblock
Echte Ordner, klare Pfade und eigene CSS-Dateien pro Bereich wie Header, Footer oder einzelne Seiten – genau dort, wo Du sie brauchst.
Finden statt scrollen
Tabs, Suche, Snippets und Revisionen bringen Dich direkt zur richtigen Stelle. Kein endloses Scrollen, kein verlorener Überblick.
Sauber ausliefern
Nur aktive und zugeordnete Dateien werden geladen. Mit Sortierung pro Bereich, ohne Theme-Lock-in und updatesicher.
Revisionen & Commits
Versionsverlauf mit Historie, Wiederherstellung und Vergleichseditor. Änderungen bleiben nachvollziehbar, editierbar und sicher.
Live prüfen
Integrierte Vorschau mit Elementansicht. Teste Änderungen strukturiert, bevor sie live gehen.
Sicher & rollenbasiert
Capabilities, Nonces und Pfad-Schutz sorgen dafür, dass der Admin Herr der Rechte bleibt.
Vom Customizer in einen sauberen Workflow
Importiere Dein „Zusätzliches CSS“ aus dem Customizer in eine klare Datei, ohne das Original anzutasten.
Typische Probleme mit unstrukturiertem CSS
Wenn Styles irgendwo im Theme, Builder oder Plugin landen, wird Wartung schnell langsam, riskant und unübersichtlich.
Entwickelt für professionelle CSS-Organisation
Von dateibasierter Architektur bis Live-Vorschau: CSS wird planbar, nachvollziehbar und direkt im WordPress-Workflow wartbar.
Dateibasierte CSS-Architektur
Organisiere CSS-Dateien strukturiert nach Bereichen, Seiten oder Komponenten.
Live-Vorschau
Teste Änderungen direkt visuell, bevor sie dauerhaft übernommen werden.
Monaco Editor
Professionelles Editor-Erlebnis direkt in WordPress.
Revisionen & Commits
Speichere, vergleiche und verfolge jede Änderung nachvollziehbar.
CSS aus Element erzeugen
Generiere CSS direkt aus ausgewählten Elementen.
Wartbare Selektoren
Nutze automatisch optimierte Selektoren statt unnötig komplexer DOM-Pfade.
Diff-Vergleich
Analysiere Änderungen zwischen Revisionen exakt und nachvollziehbar.
Suchen & Ersetzen
Refaktoriere große CSS-Strukturen schnell und kontrolliert.
Zuordnungen
Ordne CSS-Dateien einfach mehreren Seiten oder Bereichen zu.
Wir hatten exakt die gleichen CSS-Albträume.
Endlose Customizer-Blöcke. Keine Suche. Kein Überblick.
Jeder kleine Hotfix fühlte sich an wie ein Risiko für das gesamte Projekt.
Mit jedem zusätzlichen Snippet wurde die Wartung langsamer, unübersichtlicher und gefährlicher.
Unkontrollierbares CSS-Wachstum
Hunderte Zeilen verstreutes CSS ohne Struktur, Historie oder nachvollziehbare Verantwortlichkeiten.
Blindes Debugging
Niemand wusste mehr, welcher Fix welche Datei verändert hat – oder warum plötzlich etwas kaputt ging.
Hotfixes wurden zum Risiko
Selbst kleine Änderungen konnten unerwartete Seiteneffekte auslösen und produktive Systeme destabilisieren.
Deshalb haben wir LayerCraft Studio – Custom CSS entwickelt: ein CSS-System für professionelle Wartung, transparente Workflows, strukturierte Zusammenarbeit und schnelle, sichere Anpassungen — ohne Chaos im WordPress-Customizer.
Features im Überblick
Entwickelt für moderne WordPress-Workflows — strukturiert, versionierbar und gemacht für professionelle CSS-Wartung.
CSS direkt aus Elementen erzeugen
Wähle Elemente direkt in der Live-Vorschau aus und generiere automatisch präzise, wartbare CSS-Regeln — inklusive Ziel-Datei, Bereichserkennung und direktem Einfügen in deinen Editor.
Hero Card
Das Plugin erkennt das aktive Element, versteht Kategorie, Abstand, Layout und Effekte — und übersetzt alles in sauberes CSS.
Automatisch erzeugte Regel
assets/css/frontend.css.hero-card {
display: grid;
gap: 18px;
padding: 24px;
border-radius: 15px;
background: rgba(255,255,255,.06);
backdrop-filter: blur(18px);
}Ziel erkannt: → CSS-Datei → passender Bereich → Cursor-Position → direkt einfügen
Wartbare Selektoren
Erzeugt klare, wiederverwendbare CSS-Selektoren statt fragiler Zufalls-Strukturen.
Exakte Zuordnung
Erkennt Element, Kategorie, Style-Kontext und passende Ziel-Datei automatisch.
Direkt einfügen
Übernimmt Layout-, Abstands- und Effektwerte und fügt Regeln direkt im Editor ein.
Entwickelt für skalierbare WordPress-Projekte
Strukturierte Styles, klare Organisation und weniger Komplexität – ideal für größere Websites, die langfristig wartbar, performant und sauber erweiterbar bleiben sollen.
Saubere CSS-Struktur
Klare Style-Regeln sorgen für nachvollziehbaren Code und verhindern unübersichtliche CSS-Fragmente.
Projektbasierte Organisation
Styles lassen sich logisch nach Projekt, Bereich oder Website-Struktur organisieren.
Globale & seitenbezogene Styles
Nutze zentrale globale Regeln und ergänze gezielt individuelle Styles für einzelne Seiten.
Bessere Wartbarkeit
Auch bei wachsenden Websites bleibt der Code übersichtlich, konsistent und leichter anpassbar.
Ideal für größere Websites
Perfekt für umfangreiche WordPress-Projekte mit vielen Templates, Seiten und wiederkehrenden Elementen.
Schnelleres Debugging
Reduzierte CSS-Komplexität macht Fehler schneller sichtbar und spart Zeit bei Anpassungen.
Feature Vergleich
| Feature | Additional CSS | Typische CSS Plugins | LayerCraft CSS |
|---|---|---|---|
| Dateiverwaltung | × | ! | ✓ |
| Versionierung | × | × | ✓ |
| Diff-Vergleich | × | × | ✓ |
| Element-Picker | × | ! | ✓ |
| Monaco Editor | × | × | ✓ |
| CSS-Organisation | × | ! | ✓ |
| Wartbare Selektoren | × | × | ✓ |
| Live Preview | ! | ✓ | ✓ |
Änderungen nachvollziehen wie in modernen Dev-Workflows
Behalte jede Anpassung im Blick – mit Revisionen, Commits, Versionsvergleich und Wiederherstellung.
Nie wieder „Welche CSS-Datei hat das kaputt gemacht?“
Durch die laufende Versionierung, Benutzer-Zuordnung und Commits behältst du jederzeit den Überblick.
CSS Files via Explorer verwalten
Struktur statt Chaos: CSS-Dateien übersichtlich nach Bereichen organisieren, schneller finden und direkt dort bearbeiten, wo sie hingehören.
Klarer Bereichsbaum
Global, Header, Footer, Page und weitere Bereiche sind sauber getrennt – sofort sichtbar, wo welches CSS liegt.
Schneller Zugriff
Per Doppelklick öffnen und per Suche filtern – ohne Scrollen durch endlose Customizer-Blöcke.
Kontext-Aktionen direkt im Baum
Neu erstellen, umbenennen, löschen und sortieren direkt am richtigen Ort – ohne zusätzliche Menüwege.
Drag-and-Drop-Sortierung
Die Reihenfolge pro Bereich in Sekunden anpassen, ohne Codezeilen manuell verschieben zu müssen.
Sicher im Arbeitsverzeichnis
Nur .css-Dateien, keine gefährlichen Pfade – alles bleibt kontrolliert innerhalb der vorgesehenen Struktur.
Team- und Deployment-ready
Eindeutige Pfade, nachvollziehbare Struktur und saubere Trennung erleichtern Wartung, Tests, Staging und Rollbacks.
Explorer Funktionen
Kompakte Datei-Verwaltung für CSS-Workflows direkt im Plugin-Interface.
-
Navigation: Vor, Zurück und Hoch
-
Neue Ordner und CSS-Dateien erstellen
-
CSS Upload, Download und Drag & Drop
-
Umbenennen, löschen, Meta-Infos und Favoriten
Tabellen Funktionen
Verwaltung, Zuordnung und Organisation deiner CSS-Dateien direkt aus der Tabellenansicht.
-
Eindeutige CSS-ID, Titel und Pfad-Erkennung
-
Aktiv/Inaktiv Status und Sortierung sofort sichtbar
-
Direkte Übersicht aller Seiten-Zuordnungen
-
Beschreibung, Kommentare und Revisionen verwalten
-
Drag & Drop Sortierung und direktes Löschen
Punktgenau steuern, wo Dateien wirken.
Weise Dateien exakt Seiten, Posts, Kategorien, Tags oder Custom Post Types zu – flexibel, klar und ohne Codeänderung.
page:12 · post:34 · category:5 · tag:7 · custom_post_type:99Präzise Zielbereiche
Nutze typ:id pro Zeile oder lasse IDs weg, damit eine Datei überall in diesem Bereich wirkt – zum Beispiel auf allen Pages.
Modal-Suche per AJAX
Finde Seiten, Posts und Taxonomien direkt über die Suche und übernimm die Auswahl ohne manuelles Tippen.
Mehrere Zuordnungen
Eine Datei kann mehreren Bereichen zugewiesen werden – ideal für thematisch verwandte Seiten und saubere Struktur.
Best Practice
Wenige, klar benannte Dateien mit gezielten Zuordnungen sind besser als viele Duplikate. Änderungen sind nach dem Speichern sofort wirksam.
Jeder Bereich lädt genau das, was er braucht.
Von globalen Basis-Styles bis zu gezielten Taxonomie- und Custom-Post-Type-Layouts: steuere deine CSS-Struktur sauber, präzise und performant.
Global
Basis-Styles und Tokens einmal definieren und überall konsistent verwenden.
Header
Navigation, Branding und kritische Above-the-Fold-Layouts früh laden.
Footer
Rechtliche Links, Kontakt und Newsletter spät laden und sauber trennen.
Page / Post
Präzise Zielgruppen-Styles für einzelne Seiten und Beiträge ohne globales Rauschen.
Category / Tag
Themenwelten gestalten: ein Look pro Taxonomie, ohne den Rest anzufassen.
Custom Post Type
Maßgeschneiderte Layouts für spezielle Inhaltstypen und individuelle Templates.
Sortierung pro Bereich
Feinreihenfolge in 10er-Schritten setzen und jederzeit flexibel erweitern.
Zuordnungen
Bereich und Objekt-IDs kombinieren für maximale Kontrolle bei minimaler Streuung.
CSS live testen, bevor du speicherst.
Prüfe deine Styles direkt in der Seitenansicht oder isoliert am Element – mit Picker, Selektor-Follow und externer Vorschau.
Zwei Vorschau-Modi
Wechsle zwischen ganzer Seitenansicht und isolierter Elementansicht für fokussiertes Styling.
Freie Vorschau-URL
Nutze die Website-Adresse als Standard oder definiere einen eigenen Default in den Einstellungen.
Element wählen
Der Picker im IFrame setzt per Klick den Selektor und schaltet automatisch auf die Elementansicht.
Selektor folgt Cursor
Der Selektor der aktuellen CSS-Regel wird gelesen, im Overlay markiert und für die Elementansicht genutzt.
Pseudo-Elemente erkannt
::before und ::after werden über das Basis-Element gezeigt, inklusive Hinweis.
Sicheres IFrame-Rendering
Skripte werden entfernt, um Konsolenfehler zu vermeiden. Dynamische Funktionen der Zielseite können fehlen.
Reload & externe Ansicht
„Vorschau neu laden“ lädt die URL neu, „Vorschau extern“ öffnet sie in einem neuen Tab.
Live CSS ohne Speichern
CSS wird mit ca. 400 ms Debounce live injiziert und kann in ein externes Fenster abgedockt werden.
Import „Zusätzliches CSS“
Ein Klick statt Copy-Paste: Holt den Inhalt aus dem WP-Customizer-Feld „Zusätzliches CSS“ in eine eigene Datei.
Sicherer Migration-Pfad
Das Original im Customizer bleibt unverändert. Status und Sortierung der Ziel-Datei kannst du danach flexibel anpassen.
Admin-Protokollierung
Der Import wird über Admin-Meldungen bestätigt — erfolgreich oder fehlgeschlagen.
Rechte erforderlich
Voraussetzung ist das Recht import in den Rollen- und Rechte-Einstellungen.
Best Practice: Nach dem Import prüfen, aufräumen und bei Bedarf in thematische Dateien splitten, zum Beispiel global/typography.css oder global/layout.css.
Revisionen
Automatische Sicherung bei jedem Speichern — ohne manuelle Aktion. Änderungen bleiben nachvollziehbar und jederzeit wiederherstellbar.
Automatische Sicherungen
Bei jedem Speichern wird automatisch eine neue Revision erstellt — ganz ohne zusätzlichen Workflow.
Verlauf pro Datei
Zeitstempel und Benutzer jeder Revision sind direkt einsehbar und helfen beim Nachvollziehen von Änderungen.
Restore ohne Datenverlust
Wiederherstellen funktioniert mit einem Klick — dabei entsteht automatisch eine neue Revision als zusätzlicher Sicherheitsanker.
Ideal für Experimente
Änderungen testen, größere Umbauten ausprobieren und bei Bedarf sofort auf einen früheren Stand zurückspringen.
Hinweis: Die Diff-Anzeige ist im MVP bewusst einfach gehalten. Verlass dich zusätzlich auf Zeitstempel, Benutzer und die inhaltliche Prüfung.
Sortierung & Lade-Reihenfolge
Kontrolliere exakt, wann CSS-Dateien geladen werden — für saubere Overrides, weniger Konflikte und eine klare Struktur.
Sortierwerte pro Datei
Kleinere Zahlen werden früher geladen. Empfohlen sind 10er-Schritte wie 10, 20 oder 30 für flexible Erweiterungen.
Klare Lade-Hierarchie
Global vor Header, vor Footer und danach spezifische Zuordnungen wie page, post, category, tag oder CPT.
Feine Overrides
Höhere Sortierwerte ermöglichen gezielte spätere Überschreibungen innerhalb desselben Bereichs.
Drag-and-Drop Explorer
Die Reihenfolge kann direkt per Drag-and-Drop verwaltet werden — Sortierwerte passen sich automatisch an.
Performance & Stabilität
Weniger, aber sauber sortierte Dateien sorgen für schnelleres Laden und reduzieren CSS-Konflikte.
Geschützt vom ersten Klick bis zum Deployment
Jede Aktion ist abgesichert, jede Datei streng begrenzt und jede Berechtigung rollenbasiert kontrolliert.
Nonces & Capabilities
Speichern, Löschen, Import und Vorschau werden konsequent über WordPress-Sicherheitsmechanismen geschützt.
Strikte Datei-Restriktionen
Nur .css-Dateien, kein .. im Pfad und ausschließlich innerhalb von /wp-content/uploads/lcs-custom-css/.
Sicheres Upload-Verzeichnis
Das Arbeitsverzeichnis wird bei Aktivierung erstellt. Fehlende Schreibrechte erzeugen klare Fehlermeldungen.
Rollenbasierter Zugriff
Nur freigeschaltete Nutzer dürfen sehen, bearbeiten, löschen, importieren, exportieren oder Einstellungen ändern.
Saubere Vorschau
Die Entfernung von Skripten in der Vorschau reduziert Drittanbieter-Fehler und minimiert die Angriffsfläche.
Kein Theme-Lock-in
Styles bleiben erhalten, auch wenn Themes oder Page-Builder gewechselt werden.
Empfehlung: Revisionen regelmäßig prüfen und vor größeren Rollouts immer Backups erstellen.
CSS auf mehreren Seiten verwenden
Einmal bauen, mehrfach nutzen: Style-Sets einfach auswählen, zentral pflegen und ohne manuelles Kopieren auf anderen Seiten einsetzen.
Einfache Auswahl
Style-Sets bequem auswählen und auf ähnliche Seiten anwenden — ohne CSS manuell zu kopieren.
Konsistente Markenwirkung
Einheitliches Styling über Landingpages, Blogposts, Kategorien und wiederkehrende Seitentypen hinweg.
Schnelle Rollouts
Änderungen zentral anpassen und sofort auf vielen Seiten wirksam machen — sauber, schnell und skalierbar.
Lean & wartbar
Keine Dubletten pro Seite, weniger Tippfehler, geringere Dateigröße und klare Zuordnung statt verstreuter Snippets.
Flexibel segmentieren
Spezielle Styles pro Bereich wie Header, Footer oder Category nutzen, ohne globalen CSS-Wildwuchs zu erzeugen.
Editor & Tabs
Monaco-Editor direkt im Backend — mit Multi-Tab-Workflow, Snippets und vertrauten Developer-Features wie im echten Code-Editor.
Monaco-Power im Backend
Syntax-Highlighting, Wordwrap, Multi-Cursor, Suchen/Ersetzen und modernes Editing — wie im gewohnten Code-Editor.
Mehrere Dateien parallel
Tabs öffnen, schnell wechseln und neue Dateien direkt per „+“ anlegen. Ein Stern (*) zeigt ungespeicherte Änderungen.
Klare Metadaten
Titel, Pfad, Bereich, Status, Sortierung und Zuordnungen direkt im Formular — ohne Kontextwechsel.
Snippets auf Abruf
Kommentar, Media Query, Flex, Grid oder Button — ein Klick fügt sauberen Basis-Code ein.
Speichern wie gewohnt
Speichern per Button oder Ctrl/Cmd + S. Unsaved-Changes-Warnungen schützen vor Datenverlust.
Tab-Zustand bleibt erhalten
Vorschau-URL und Selektor werden je Tab gespeichert — kein erneutes Eingeben beim Wechseln zwischen Dateien.
Einfache Installation
In wenigen Minuten einsatzbereit — ohne Theme-Abhängigkeit, ohne komplizierte Einrichtung und ohne Risiko beim Update.
ZIP-Upload im Backend
Plugin einfach als ZIP hochladen über Plugins → Installieren → Plugin hochladen und direkt aktivieren.
Alternativ via FTP / SCP
Plugin manuell nach WordPress kopieren und danach bequem im Backend aktivieren.
Theme-unabhängig
Funktioniert unabhängig vom aktiven Theme und bleibt auch bei Theme-Wechseln vollständig erhalten.
Arbeitsverzeichnis automatisch
Das benötigte Upload-Verzeichnis wird automatisch erstellt — kein manuelles Setup nötig.
Updates ohne Datenverlust
ZIP einfach erneut hochladen oder ersetzen — Einstellungen und CSS-Dateien bleiben bestehen.
Rollen & Rechte
Lege präzise fest, welche Rollen CSS-Dateien sehen, bearbeiten, löschen, importieren oder Einstellungen anpassen dürfen.
Feingranulare Capabilities
Weise exakt zu, wer welche Aktionen ausführen darf — von reiner Ansicht bis zu Import und Systemeinstellungen.
Admin bleibt Chef
Administratoren behalten standardmäßig volle Kontrolle. Andere Rollen erhalten nur bewusst gesetzte Rechte.
Sicher im Team arbeiten
Reduziere versehentliche Änderungen, indem Edit- und Delete-Rechte nur an Power-User oder technische Rollen vergeben werden.
Compliance-freundlich
Trenne Zuständigkeiten sauber zwischen Redaktion und Technik — ohne zusätzliche Rollen- oder Rechte-Plugins.
Allgemeine Einstellungen
Zentrale Konfiguration für Vorschau, Rechte, Deinstallation und sichere Plugin-Standards — dauerhaft update-resistent.
Standard-Vorschau-URL
Sofort die richtige Domain oder Stage verwenden — weniger CORS- und Mixed-Content-Probleme beim Arbeiten.
Uninstall-Verhalten steuern
Entscheide selbst, ob Tabellen und Upload-Verzeichnis beim Entfernen des Plugins gelöscht werden sollen.
Versionierung zentral steuerbar
Administratoren können die Kommentare (Commits) neuer Versionen beim Speichern global aktivieren oder deaktivieren — flexibel an den jeweiligen Workflow und Projektumfang anpassbar. Die automatische Versionierung ist immer aktiv.
Rechte zentral verwalten
Capabilities je Rolle direkt konfigurieren — ohne Code und ohne zusätzliches Rechte-Plugin.
Sicherer Rahmen
Pfad- und Dateityp-Restriktionen bleiben aktiv — unabhängig davon, welche Einstellungen geändert werden.
Update-resistent
Einstellungen bleiben bei Plugin-Updates erhalten — einmal konfigurieren und langfristig davon profitieren.
LayerCraft Studio — Custom CSS
Die professionelle CSS-Workflow-Umgebung für WordPress. Entwickelt für moderne Entwickler, Agenturen und Power-User — damit Custom CSS endlich strukturiert, sicher und skalierbar wird.
Anfrage stellen
Du planst ein Projekt, brauchst Unterstützung oder möchtest individuelle Anpassungen besprechen?
Handbuch Deutsch
Vollständige Dokumentation, Workflows, Funktionen und Best Practices für deutschsprachige Nutzer.
English Manual
Complete documentation, workflows and feature explanations for international WordPress professionals.