CSS für Umfragen
Kurzübersicht
Mit Cascading Style Sheets (CSS) können Sie erweiterte Anpassung bei Umfragen anwenden, einschließlich Elemente wie Schriftart, Hintergrund und Grenze.
CSS kann zum Anpassen von Umfragen und NPS-Umfragen verwendet werden:
- Schaltflächen „Aktion“ und „Schließen“
- Text für Titel
- Text
- Schaltfläche „X“
Funktionsweise
Cascading Style Sheets (CSS) ist eine Formatvorlagensprache, die zur Beschreibung der Formatierung eines in einer Auszeichnungssprache geschriebenen Dokuments verwendet wird. Wenn Sie in CSS schreiben, müssen Sie sich auf die verschiedenen Komponenten (technisch als Elemente bekannt) der Umfrage beziehen. Bei der Eingabe in das Fenster „Custom CSS“ zeigt WalkMe Optionen zum automatischen Vervollständigen von Selektoren, Eigenschaften und Werten an.
Aufschlüsselung der Einstellungen
Konfigurieren von Sprechblasenkomponenten
Jede Umfrage enthält eine Reihe von Komponenten (Elementen), die mit CSS angepasst werden können. Beispielsweise können Sie den Titelbereich einer Umfrage mit dieser Klasse anwenden:.wm--survey-title (siehe unten für eine vollständige Liste von Klassen).
Allgemeine Regeln
Allgemeines CSS für Umfragen kann im Menü „Anpassen“ hinzugefügt werden:
Umfragen-ID finden
- Bewegen Sie den Mauszeiger über den Namen Ihrer Umfrage
- Navigieren Sie zum Bleistift-Symbol
- Klicken Sie auf „ID kopieren“.
Verwenden von „!Important“
Standardmäßig überschreibt das WalkMe-Themendesign alle anderen Designänderungen in einer Sprechblase oder einem Walk-Thru. Damit CSS angewendet werden kann, muss die CSS-Regel „!important“ enthalten, um sicherzustellen, dass sie das standardmäßige Styling außer Kraft setzt.
Beispiel:
#walkme-survey-balloon-37897.walkme-survey-title {
color: #000 !important;
}
Konfigurierbare Umfragekomponenten
| Verschiedene | BEARBEITBARE FUNKTIONEN | |
| 1 | #walkme-survey-balloon-37897 | Dieses Element bildet den Hauptanteil der Umfrage. Sie können Folgendes bearbeiten:
|
| 2 | .walkme-survey-title | Dieses Element bildet den Haupttitel für die Umfrage. Sie können Folgendes bearbeiten:
|
| 3 | .walkme-survey-question-title | Dieses Element bildet die Frage(n) der Umfrage Sie können Folgendes bearbeiten:
|
| 4 | #walkme-survey-answer-text-XXXXXX | Dieses Element bildet die Antwort(en) der Umfrage. Sie können Folgendes bearbeiten:
|
| 5 | #walkme-survey-answer-radiobutton-110079 | Dieses Element bildet die Optionsschaltflächen für die Antworten. Sie können Folgendes bearbeiten:
|
| 6 | .walkme-click-and-hover.walkme-custom-balloon-close-button.walkme-action-close.walkme-inspect-ignore | Dieses Element bildet die Schaltfläche „Schließen“ Sie können Folgendes bearbeiten:
|
| 7 | .walkme-custom-balloon-content-wrapper | Dieses Element ist der allgemeine Selektor für jeden Inhalt/Text in der Umfrage. Sie können Folgendes bearbeiten:
|
Konfigurierbare NPS-Umfragekomponenten
| Verschiedene | BEARBEITBARE FUNKTIONEN | |
| 1 | .walkme-survey-question-nps-answers | Dieses Element bildet alle Antworten in Ihrer NPS-Umfrage (normalerweise von 0 bis 10). Sie können Folgendes bearbeiten:
|
| 2 | .walkme-survey-nps-answer ausgewählt.walkme-survey-answer-label-nps-radiobutton | Dieses Element bildet die gewählte NPS-Antwort. Sie können Folgendes bearbeiten:
|
| 3 | .walkme-survey-low-score-div span oder walkme-survey-high-score-div span | Dieses Element bildet die hohen und niedrigen Punktzahletiketten an beiden Enden der Sprechblase. Sie können Folgendes bearbeiten:
|
| 4 | .walkme-custom-side-border | Dieses Element bildet den Seitenrand für die Umfrage. Sie können Folgendes bearbeiten:
|
Allgemeine Anpassungen der Umfrage-CSS
Ändert die Schriftgröße des Umfragetitels
#walkme-survey-id-XXXXXX.walkme-survey-title {
Schriftgröße: XXpx !important;
}
Ändert die Farbe der Seitenleiste und der Schaltfläche „Submit“
#walkme-survey-balloon-XXXXX.walkme-custom-side-border {
Hintergrundfarbe: #XXXXXX !important;
}
#walkme-survey-balloon-XXXXX.walkme-custom-balloon-submit-button {
Hintergrundfarbe: #XXXXXX !important;
}
Ändert oder korrigiert den Rand der NPS (1–10)
#walkme-survey-question-nps-answers-XXXX.walkme-survey-nps-answer {
Rand: Xpx !important;
}
Ändert die Schriftart der Fragen zur Umfrage
#walkme-survey-balloon-XXXXX.walkme-custom-balloon-content {
Schriftfamilie: (Schriftart hier) !important;
}
Ändert die Farbe der Antworten zur NPS-Umfrage
.walkme-survey-question-nps-answers.selected.walkme-survey-nps-answer.selected label {
Hintergrund: XXX !important;
Randfarbe: XXX !important;
}
Ändert die Farbe der Antworten zur NPS-Umfrage, wenn Sie den Mauszeiger darüberbewegen
.walkme-survey-answer-label-nps-radiobutton.walkme-survey-answer-label-nps-radiobutton-unchecked:hover {
Hintergrund: XXX !important;
Randfarbe: XXX !important;
}