Elementor-Farbpaletten-Generator: globales Kit und Kontrast
Wählen Sie die vier globalen Farben und vier globalen Schriften, prüfen Sie die Lesbarkeit und laden Sie ein Kit zum Importieren in Elementor oder die CSS-Variablen herunter.
- Kostenlos
- keine Anmeldung
- alles läuft in Ihrem Browser
Kontrast (WCAG AA)
| Kombination | Verhältnis | Normaler Text | Großer Text |
|---|
Vorschau mit den auf Ihrem Computer installierten Schriften
Hauptüberschrift
Sekundärer Untertitel
Absatztext, um zu prüfen, ob er auf dem gewählten Hintergrund gut lesbar ist.
ButtonIn Elementor importieren: Werkzeuge › Kit importieren/exportieren › Importieren. Machen Sie vorher eine Sicherung.
So erstellen Sie das globale Kit mit dem Tool
Palette festlegen
Primär, Sekundär, Text und Akzent, mit denselben IDs, die Elementor für seine Globalen verwendet. Für jeden eine Farbe, eine Schrift und ein Gewicht.
Kontrast prüfen
Wählen Sie die Hintergrundfarbe Ihrer Website. Jede Kombination zeigt ihr Verhältnis und ob sie WCAG AA für normalen und großen Text besteht.
Herunterladen
Ein .zip-Kit zum Importieren in Elementor, oder die CSS-Variablen --e-global-* zum Einfügen in Ihr Theme.
Was das globale Kit generiert
Ein Kit, das Elementor importiert
Das .zip folgt dem Exportformat von Elementor: eine manifest.json und eine site-settings.json mit den System-Farben und -Schriften.
CSS-Variablen mit Elementors Namen
Die Variablen verwenden dieselben Namen, die Elementor generiert (--e-global-color-primary, --e-global-typography-primary-font-family…).
WCAG-AA-Kontrast
Die Tabelle berechnet das Verhältnis jeder Farbe auf dem Hintergrund. AA erfordert 4,5:1 für normalen Text und 3:1 für großen Text.
Vorschau
Eine Überschrift, ein Untertitel, ein Absatz und ein Button mit Ihren Farben und Schriften, damit Sie prüfen können, ob die Kombination gut lesbar ist.
So legen Sie globale Elementor-Farben manuell fest
Öffnen Sie im Elementor-Editor das Menü und gehen Sie zu Websiteeinstellungen. Globale Farben und Globale Schriftarten befinden sich dort. Die ersten vier (primär, sekundär, Text und Akzent) sind die Systemfarben.
Ein Widget verwendet eine globale Farbe, wenn Sie sie über das Globale-Symbol in seiner Farbeinstellung auswählen. Ändern Sie dieses Global und es ändert sich in jedem Widget, das es verwendet.
Manuell vorzugehen ist für eine Website in Ordnung. Wenn Sie mehrere mit derselben Marke erstellen oder den Kontrast vor der Entscheidung prüfen möchten, spart das Kit Schritte.
Was ist mit den manuell eingegebenen Farben auf der Website?
Ein neues Kit ändert keine Widgets mit einer manuell eingegebenen Farbe. Das Design-System-Plugin findet sie und wandelt sie in Globale oder Elementor-4-Variablen um.
Design system · Demnächst
Was dieses Tool nicht tut
- Es ändert keine manuell eingegebenen Farben in Widgets: es legt nur die Globalen fest.
- Bei Schriften legt es Familie und Gewicht fest; Größe und Zeilenhöhe werden danach in Elementor angepasst.
- Die Vorschau verwendet auf Ihrem Computer installierte Schriften; auf der Website lädt Elementor sie.
- Es erstellt keine Elementor-4-Variablen, die ein separates System von den globalen Farben sind.
Weitere kostenlose Tools
Suchen und ersetzen in Elementor-JSON
Ändern Sie Texte und Links in einer exportierten Vorlage, ohne das JSON zu beschädigen.
Einwilligungstext für Formulare
Der Datenschutzhinweis erster Ebene und die Checkboxen in HTML.
Smart Search & Replace
Suchen und ersetzen Sie Texte und Links in ganz Elementor, mit Vorschau und Rückgängig.
Globale Elementor-Farben: häufig gestellte Fragen
Wo sind die globalen Farben in Elementor?
Im Editor, unter dem Menü › Websiteeinstellungen › Globale Farben. Schriften befinden sich daneben unter Globale Schriftarten.
Löscht das Kit meine benutzerdefinierten Farben?
Nein: Beim Importieren eines Kits ersetzt Elementor die vier Systemfarben und -schriften und fügt benutzerdefinierte zu den vorhandenen hinzu. Machen Sie vorher eine Sicherung.
Welches Kontrastverhältnis benötige ich?
WCAG 2.2 Stufe AA erfordert 4,5:1 für normalen Text und 3:1 für großen Text (24 px oder 18,66 px fett).
Funktioniert es mit Elementor 4?
Ja. Das Kit wurde durch Import in Elementor 4.4 getestet. Elementor-4-Variablen sind etwas anderes und dieses Kit erstellt sie nicht.