WORDPRESS · ELEMENTOR V4
Ein Design-System für Elementor — nicht tausend Pixel-Werte.
Layrix bringt echte Design-Tokens, fluide Skalen und automatische Klassen in Elementor. Ändere eine Farbe — die ganze Website zieht mit. Kein Hardcoding, keine Inkonsistenzen.
FARBPALETTE
VORHER / NACHHER
Ohne System sind es tausend Einzelwerte.
Vorher — Hardcoded
border-radius: 14px;
background: #0ea4e8;
font-size: 17px;
Jeder Wert von Hand. Farbe ändern = alles einzeln suchen.
Nachher — Layrix-Token
border-radius: ecf-radius-m;
background: ecf-color-accent;
font-size: ecf-text-s;
Ein Token. Überall. Farbe ändern = einmal, alles zieht mit.
WAS LAYRIX KANN
Ein System, das mitdenkt.
Echte Design-Tokens
Farben, Abstände, Radien und Typografie als eine Quelle. Ändere ein Token — die ganze Website zieht mit.
Automatische Klassen
Layrix vergibt konsistente BEM-Klassen automatisch. Kein Copy-Paste, keine schleichende Drift.
Import aus Theme-CSS
Bestehende Palette und Skalen einlesen, Dubletten erkennen und in saubere Tokens verwandeln.
Fluide Skalen
Abstände und Schrift skalieren geschmeidig mit dem Viewport — clamp() ohne Handarbeit.
FARBE, SYSTEMATISCH
Palette definieren. Harmonien & Abstufungen automatisch.
Setz deine Grundfarben — Layrix erzeugt Schattierungen, Aufhellungen und Deckkraft-Stufen und schlägt harmonische Paletten vor. Alles live, kein Reload.
✦ Harmonie-Generator — komplementär, analog, triadisch …
✦ Schattierungen & Aufhellungen pro Farbe, live
✦ Farben sperren & gezielt neu würfeln
✦ Import aus bestehender Theme-CSS
TYPOGRAFIE, FLUIDE
Schrift, die auf jedem Screen sitzt.
Schriftfamilien, Größen, Zeilenhöhen und Buchstabenabstände als Design-Grundwerte. Skalen leiten sich fluide per clamp() ab — Mobile bis Desktop ohne Breakpoint-Gefummel.
✦ Fließtext, Überschrift & Akzent als Token-Schriften
✦ Fluide Schriftskalierung per clamp()
✦ Zeilenhöhen & Buchstabenabstand als Skala
✦ Live-Vorschau mit echtem Text
1×
ändern, alles zieht mit
0
px/hex von Hand
clamp()
fluid, ohne Breakpoints
4.2
Elementor atomic, nativ
FÜR WEN
Für alle, die Elementor ernst nehmen.
🏢
Agenturen
Ein Design-System pro Kunde, konsistent über jede Seite — in Minuten umgefärbt statt in Stunden.
🧑💻
Freelancer & Pros
Schneller bauen, professioneller abliefern. Tokens statt Copy-Paste-Werte.
🎯
Design-Verliebte
Fluide Typo, harmonische Paletten, saubere BEM-Klassen — Disziplin, die man sieht.
IN 3 SCHRITTEN
So funktioniert's.
01
Tokens definieren
Farben, Abstände und Typografie einmal festlegen. Layrix leitet Schattierungen, fluide Skalen und Radius automatisch ab.
02
Auto-Klassen aktivieren
Überschriften, Buttons und Formularfelder bekommen automatisch dein System — inklusive Hover, Focus und Eckenradius.
03
Bauen & jederzeit umfärben
Inhalte platzieren, fertig. Ein Token ändern und die ganze Seite zieht mit — in Sekunden statt Stunden.
DER UNTERSCHIED
Ohne Layrix vs. mit Layrix.
OHNE LAYRIX
MIT LAYRIX
Konsistenz
✗ Jede Seite driftet, Copy-Paste
✓ Ein System, überall identisch
Umfärben
✗ 40 Widgets einzeln durchklicken
✓ Ein Token → alles zieht mit
Responsivität
✗ Breakpoint-Werte pflegen
✓ Fluide clamp()-Skalen, ohne Breakpoints
Wartung
✗ Änderungen brechen woanders
✓ Zentrale Tokens, planbar & portabel
FRAGEN & ANTWORTEN
Was du vorm Start wissen willst.
Brauche ich Elementor Pro?
Nein. Layrix baut auf Stock-Elementor auf und funktioniert mit der kostenlosen Version. Deine Tokens und Klassen bleiben gültig, egal ob Free oder Pro.
Muss ich meine Seite neu bauen?
Nein. Du überführst bestehende Werte per Import in Tokens und stellst Schritt für Schritt um.
Bleiben die Styles nach der Deinstallation?
Ja. Tokens landen als echte Elementor-Variablen; ein CSS-Snapshot-Export hält deine Styles auch danach am Leben.
Läuft es mit Elementor 4.2?
Ja, nativ. Atomare Widgets, Formularfelder und Tabs docken sauber an die neue Architektur an.
Bereit für ein echtes Design-System?
Hol dir Layrix und ersetze tausend Einzelwerte durch eine Design-Sprache.