Theming
Kurzübersicht
Theming ist eine neue WalkMe-Funktion, mit der Sie das Design über verschiedene WalkMe-Apps hinweg vereinheitlichen können. Mit Theming können Sie einfach ein konsistentes Aussehen und Gefühl auf alle Ihre WalkMe-Elemente anwenden, indem Sie eine breite Palette von Pre-Maid und anpassbaren Designelementen verwenden, einschließlich Farbschemas, Typografie und Layouts.
Wie Sie darauf zugreifen können
Theming befindet sich in der Konsole und kann aufgerufen werden
- Unter https://console.walkme.com/themes
- Über das Seitenfenster der Konsole
Wie zu verwenden
Main Screen (Hauptbildschirm)
Wenn Sie zum ersten Mal auf Theming zugreifen, sehen Sie auf dem Hauptbildschirm alle von WalkMe angebotenen Themen.
Auf der rechten Seite des Bildschirms können Sie die Vorschau davon sehen, wie dieses Thema aussieht. Sie können zwischen verschiedenen Elementtypen navigieren und sehen, wie jeder von ihnen in diesem Thema aussieht.
Bewegen Sie den Mauszeiger über verschiedene Elemente der Vorschau, um zu sehen, was sie vom Thema erben. Zum Beispiel erbt der Rahmen, der das Bild in diesem ShoutOut enthält, die Farbe (Hintergrund, Main), und der Texttitel erbt die Typografie des Titels (Large) und die Farbe Text, Main.
Aktive und veröffentlichte Themen
Label Active bedeutet, dass dieses Thema derzeit das ist, das auf Ihre Editor-Inhalte angewendet wird.
Label Published bedeutet, dass dieses Thema derzeit das ist, das Ihren Benutzern in der veröffentlichten Umgebung angezeigt wird.
Beachten Sie, dass es einen Fall geben kann, wenn aktives Thema und veröffentlichtes Thema nicht identisch sind.
Wenn Sie ein Thema als aktiv festlegen, können Sie es im Editor sehen. Um das Thema jedoch für Ihre Benutzer sichtbar zu machen, müssen Sie es zuerst veröffentlichen.
So stellen Sie ein Thema als aktiv fest:
- Klicken Sie in das Menü Optionen
- Wählen Sie Als aktiv festlegen
- Wenn Sie das Thema noch nicht veröffentlichen möchten, klicken Sie auf Bestätigen
- Um das Thema auch zu veröffentlichen, aktivieren Sie das Kontrollkästchen und klicken Sie dann auf Bestätigen
Themen bearbeiten
Sie können WalkMe-Themen bearbeiten und das Ergebnis als neues Thema speichern.
Um ein Thema zu bearbeiten, klicken Sie auf das Optionsmenü und wählen Sie Bearbeiten oder doppelklicken Sie auf das Thema.
Hier können Sie die Farben, Typografie und Schaltflächeneigenschaften des Themas ändern.
Colors (Farben)
- Auf der Registerkarte Farben können Sie die Farbe verschiedener Designelemente ändern
- Sie können sehen, was sich genau in der Vorschau auf der rechten Seite ändert
- Wenn Sie Änderungen vornehmen, sehen Sie eine Animation in der Elementnavigationsleiste, die anzeigt, in welchem Element Sie diese Änderung sehen können
Typografie
- Auf der Registerkarte Typografie können Sie den Schrifttyp und die Größe für alle Textelemente ändern
- Sie können primäre und sekundäre Schriftart ändern
- Sie können auswählen, welche der beiden Titel und Textarten erben sollen – primär oder sekundär
- Sie können sehen, wo jedes der Textelemente derzeit verwendet wird
Schaltflächen
- Ändern Sie die Rahmenbreite und den Eckradius Ihrer Schaltflächen
- Sie können wählen, einen farbigen Rand zu haben und die Dicke auf jeder der Seiten festlegen
- Die Füll- und Textfarben werden automatisch vom Thema geerbt – Sie können sie von hier aus nicht ändern, aber Sie können die Farbe ändern, die die Schaltfläche in der Registerkarte Farbe erbt, und dies wirkt sich auf die Schaltfläche hier aus
- Sekundäre Textschaltflächen haben standardmäßig keine Füllfarbe (sind transparent) (z. B. die Schaltfläche Zurück in diesem ShoutOut)
- Zusätzliche Schaltflächen erben die meisten ihrer Eigenschaften vom Thema
- Sie können nur die Farbe des Textes ändern
Wenn Sie mit der Bearbeitung fertig sind, können Sie das Thema als neu speichern.
Ihre Themen werden unter Meine benutzerdefinierten Themen angezeigt.
Im Gegensatz zu WalkMe-Themen können Ihre benutzerdefinierten Themen auch umbenannt, dupliziert und gelöscht werden.
Theming im Editor
Theming wird auf alle Ihre Editor-Inhalte angewendet. Gehen Sie zu Inhaltsstil anpassen, um zu sehen, wie er sich auf Ihre Sprechblasen und SmartTips auswirkt.
Sprechblasen
Auf der Registerkarte Ballon können Sie sehen, welches aktive Thema auf Ihre Sprechblasen angewendet wurde.
Sie können die Highlighter-Farbe ändern, um eine der Themenfarben zu sein.
Sie können sich auch vom Thema lösen, wenn Sie möchten, dass Ihre Inhalte nicht vom Thema beeinflusst werden.
Wenn Sie beispielsweise die Hervorheber-Farbe vom Thema lösen, bleibt diese Farbe (in diesem Fall – rosa Primär, Main), auch wenn Sie das Thema in der Konsole ändern.
Klicken Sie auf Vorlage ändern, um alle verfügbaren Vorlagen anzuzeigen.
Um besser zu verstehen, wie verschiedene Text- und Farbtypen aus dem Thema mit verschiedenen Vorlagen verbunden sind, lesen Sie den Abschnitt Mapping: Theme-Template-Relationship unten.
Wenn Sie Änderungen an einer bestimmten Vorlage des Themas vornehmen möchten, klicken Sie auf das Symbol Bearbeiten.
Die CSS-Konsole wird geöffnet. Hier können Sie jede der Eigenschaften der Sprechblase anpassen.
Sie können die Primärfarbe durch die sekundäre ersetzen oder sie vollständig ändern – zum Beispiel auf Schwarz oder Weiß.
Sie finden die CSS-Variablen, die vom Thema kommen, im Artikel CSS im Theming.
Sie können die bearbeitete Vorlage als neu speichern und sie wird auf der Registerkarte Benutzervorlagen angezeigt.
Im Smart Walk-Thru-Schrittbildschirm können Sie die Farbe der Textteile aus den Themenfarben auswählen. Der Typografie-Stil kann von hier aus nicht geändert werden, da er vom Thema geerbt wurde.
Sie können auch eine andere Vorlage ändern.
SmartTips
Auf der Registerkarte SmartTip können Sie sehen, welches aktive Thema auf Ihre SmartTips angewendet wurde.
Klicken Sie auf das Symbol Ändern, um das Symbol auszuwählen, das Ihr SmartTip haben soll.
Klicken Sie auf das Symbol Bearbeiten wenn Sie die Farbe und die Größe des Symbols ändern möchten. Sie können jede Farbe aus dem Thema auswählen.
Sie können auch die Farbe des Tipps selbst ändern.
Sie können auch jeden der Werte vom Thema lösen, wenn Sie möchten, dass dieses Design-Element nicht vom Thema beeinflusst wird.
Launchers
Wenn Sie einen Launcher erstellen, können Sie zwischen allen in diesem Thema verfügbaren Vorlagen wählen.
Im Dropdown-Menü Design können Sie die bevorzugten Farben aus dem Thema festlegen.
Sie können sich auch vom Thema lösen und eine Farbe festlegen, die nicht damit zusammenhängt.
Wenn Sie die Farbe vom Thema lösen, sehen Sie ein dediziertes Symbol, das sie veranschaulicht.
Sie können immer wieder eine Verbindung zum Thema herstellen.
Nachdem Sie den Launcher erstellt haben, können Sie die Vorlage im Bildschirm Launcher-Optionen ändern. Der Text Ihres Launchers bleibt gleich.
Sie können auch den Typografiestil ändern oder verschiedene Farben aus dem Thema auswählen.
Surveys
- Umfragen sind standardmäßig mit Themen verbunden
- Nur eine Vorlage ist für Umfragen verfügbar
Mapping: Theme-Template-Beziehung
- Alle Text- und Farbwerte (Titel 1, Körper 1, Primär, Sekundär usw.) funktionieren in verschiedenen Vorlagen unterschiedlich, auch innerhalb eines Themas
- Zum Beispiel verwenden die hier angehängten Smart Walk-Thrus-Vorlagen dasselbe Thema
- Wie Sie sehen können, sind die Beziehungen zwischen den Werten in verschiedenen Vorlagen unterschiedlich
- Finden Sie die Zuordnung der Farben und des Textes in den angehängten Bildern
Smart Walk-Thru-Vorlagen
Launcher-Vorlagen
SmartTip-Vorlagen
Theming in Visual Designer
Neue Vorlagen
Wenn Sie einen neuen ShoutOut erstellen, sehen Sie die neuen Vorlagen, die alle in dem Thema präsentiert werden, das Sie jetzt als aktiv festgelegt haben.
Wenn Sie den Mauszeiger über das Theming-Symbol neben der Farbe bewegen, können Sie sehen, welches Thema derzeit verwendet wird.
Sie können zwischen den Themenfarben und Typografie-Stilen wählen oder sich vom Thema lösen und eine eigene Farb- oder Schrifteigenschaft festlegen.
Schaltflächen
Sie können entscheiden, mit welchen Eigenschaften der Schaltfläche Sie verbunden oder vom Thema getrennt werden möchten. Zum Beispiel können Sie die Schriftart lösen und eine eigene Schriftart auswählen und die Textfarbe und Füllfarbe mit dem Thema verbunden lassen.
Änderungen im Editor
Vorher
- Sie können Farben im Editor auswählen, die CSS der Vorlage bearbeiten und die CSS sehen, CSS-Design als Vorlage speichern
Danach
- Die Farb- und Typografiebearbeitung wird im Thema durchgeführt
- Neue mit dem Thema verbundene Vorlagen werden dem Benutzer zur Verfügung gestellt
- Sie können die globale Sprechblasenvorlage CSS bearbeiten
Vorher
- Sie können Farben für Text, Hintergrund, Grenze auswählen
Danach
- Die Farben stammen aus dem Thema und Sie können die Zuordnung ändern und die Verbindung vom Thema trennen
Vorher
- Symbole sind Bilder – die Farbe kann nicht geändert werden (der Benutzer kann nur ein anderes Bild auswählen)
- Farben können nicht mit CSS geändert werden
Danach
- Symbole sind HTML
- Symbole sind mit dem Thema verknüpft und wirken sich darauf aus, wenn Farben des Themas geändert werden
- Sie können die Zuordnung und die Größe des Symbols ändern
Vorher
- Sie können die Schriftfamilie nicht ändern
Danach
- Sie können die angewandte Typografie des Titels und des Körpers sehen
- Design ist an das Thema angehängt
Vorher
- Sie können den Text des Launchers nicht ändern
- Sie können nur eine neue Vorlage mit anderem Text erstellen
Danach
- Die Galerie wurde aktualisiert und bietet jetzt neue mit dem Thema verbundene Vorlagen
Technische Hinweise
- Nur Admin- und Content Manager-Rollen haben Bearbeitungs- und Veröffentlichungsberechtigungen. Alle anderen Rollen haben nur Berechtigungen, die Themen anzuzeigen
- Das Widget-Menü wird noch nicht unterstützt
- Nur das Pro-Menü und das Pro Light-Menü werden unterstützt
- Nur kalifornische Ballons werden unterstützt – klassische Ballons werden nicht unterstützt
- Nur dynamische Layout-Vorlagen im Visual Designer werden unterstützt
- Die folgenden Schriftarten werden unterstützt:
- Arial, Tahoma, Georgia, Courier, Proxima Nova, Poppins, Öffnen Ohne
- Die Vorschau in der mehrsprachigen App funktioniert, spiegelt aber nicht die tatsächlichen Farben wider