Design
Das Aussehen des Widgets anpassen
Im Bereich Design passen Sie das Aussehen des Widgets an. Die Vorschau neben den Einstellungen zeigt sofort, wie das Widget aussehen wird; auf schmalen Bildschirmen steht sie darunter. Die Einstellungen sind auf die Reiter Farben, Größen, Position, Symbole und Widget-Button verteilt.
Farben
Hier legen Sie die Farben des Widgets fest, mit einer Vorlage oder mit eigenen Werten.
Farben im Einzelnen
| Farbe | Verwendung |
|---|---|
| Primärfarbe | Hauptfarbe, Buttons |
| Sekundärfarbe | Ende des Farbverlaufs |
| Hintergrund | Hintergrund des Panels |
| Textfarbe | Haupttext |
| Sekundärtext | Beschreibungen |
| Rahmenfarbe | Rahmen |
| Erfolg | Erfolgsmeldungen |
| Fehler | Fehlermeldungen |
Kontrast im Widget
Unter den Farben prüft das Dashboard, ob die Farbpaare, die das Widget zeigt, genug Kontrast nach WCAG 2.2 AA haben: Schrift braucht mindestens 4,5:1, Rahmen und Bedienelemente 3:1.
| Farbpaar | Wo im Widget | Mindestens |
|---|---|---|
| Textfarbe auf Hintergrund | Namen der Funktionen und Überschriften | 4,5:1 |
| Sekundärtext auf Hintergrund | Beschreibungen, Platzhalter und Auswahlfelder | 4,5:1 |
| Weiße Schrift auf Primärfarbe | Kopfzeile und Zähler an den Kategorien | 4,5:1 |
| Weiße Schrift auf Sekundärfarbe | Ende des Farbverlaufs in Kopfzeile und Zählern | 4,5:1 |
| Primärfarbe als Schrift | Werte neben den Schiebereglern und aktive Favoriten | 4,5:1 |
| Weiße Schrift auf Fehlerfarbe | Knopf „Zurücksetzen“ und Fehlermeldungen | 4,5:1 |
| Weiße Schrift auf Erfolgsfarbe | Bestätigungen im Panel | 4,5:1 |
| Sekundärtext auf Rahmenfarbe | Knopf „?“ unten im Panel | 4,5:1 |
| Rahmenfarbe auf Hintergrund | ausgeschaltete Schalter, Suchfeld und Auswahlfelder | 3:1 |
| Primärfarbe auf Hintergrund | Fokusrahmen und eingeschaltete Schalter | 3:1 |
Zu jedem Paar steht der gemessene Wert, ein Warnzeichen markiert Paare unter dem Mindestwert. Die Prüfung gilt für alle Farben, auch für die Standardfarben; dunklere Stufen derselben Farben helfen meistens. Sie ändert keine Farbe und verhindert das Speichern nicht. Geprüft werden Farben als Hex-Wert wie #1a2b3c.
Größen und Abstände
| Einstellung | Beschreibung |
|---|---|
| Panel-Breite | Breite des Panels |
| Widget-Button | Größe des schwebenden Buttons |
| Schriftgröße | Grundgröße der Schrift im Widget |
| Symbolgröße | Größe der Symbole |
| Abstände (Faktor) | vergrößert oder verkleinert alle Abstände |
| Eckenradius | Rundung der Ecken |
Position
Legen Sie die Position des Widgets mit einem Klick in die Fläche oder über die Schnellauswahl fest.
- Schnellauswahl: Oben Links, Oben Rechts, Unten Links, Unten Rechts, Mitte Links, Mitte Rechts
- Feineinstellung: waagerecht (links oder rechts), senkrecht (oben oder unten) und der Abstand vom Rand
Besucherinnen und Besucher können den Button für sich selbst verschieben: mit der Maus oder dem Finger an eine beliebige Stelle ziehen (er bleibt immer ganz im Bild) oder in der Hilfe des Widgets (Fragezeichen) unter Position des Buttons eine Ecke wählen. Das Widget merkt sich das im Browser, wenn Einstellungen gespeichert werden dürfen. Wie von der Website vorgesehen und Zurücksetzen bringen den Button wieder an die Position, die Sie hier festlegen.
Symbole
Für jedes Feature können Sie ein eigenes Symbol als SVG hinterlegen, für den Widget-Button ebenso.
Erlaubt sind SVG-Grafiken bis 20 KB mit Formen, Pfaden, Farbverläufen und Text. Symbole mit Skripten, Links, eingebetteten Bildern, Animationen oder on…-Attributen lehnt das Dashboard mit einer Meldung ab. Andere Teile, die ein Symbol nicht braucht, entfernt es beim Übernehmen.
Widget-Button
Unter So öffnen Besucher das Widget wählen Sie:
- Widget-Button (Standard): Das Widget zeigt seinen eigenen schwebenden Button. Seinen Farbverlauf und ein eigenes Symbol stellen Sie hier ein.
- Eigener Auslöser: Der Widget-Button wird ausgeblendet, und ein Button Ihrer Website öffnet das Widget. Den Code dafür zeigt das Dashboard zum Kopieren, siehe auch Widget einbinden.
Mit der Tastatur öffnet Strg + Umschalt + A das Widget in beiden Fällen.
Rechts zeigt die Vorschau das Widget mit Ihren Änderungen, auch bevor sie gespeichert sind. Sobald Sie etwas ändern, erscheint unten eine Leiste mit Verwerfen und Speichern; erst mit Speichern gilt die Änderung auf der Website. Mit Standard wiederherstellen kehren Sie zu den Standardwerten zurück.