Visual Designer

Last Updated November 19, 2024

Download as PDF

Kurzübersicht

Das Anpassen von ShoutOuts ist mithilfe des Visual Designers viel einfacher geworden. Erstellen Sie wunderschöne Designs ohne die Notwendigkeit von CSS. Dadurch erreichen Sie eine einfache Kontrolle bei der Erstellung und Gestaltung von Shoutouts, mit Funktionen wie:

• Drag & Drop
• Buttons, Absätze, Formen, Bilder und Videos hinzufügen
• Canvas-Schichten verwalten
• Ausrichtung ändern
• Rich-Text-Bearbeitung
• Dynamischer Text
• Mehrsprachiger Support

Weitere Informationen zu ShoutOuts finden Sie im entsprechenden Artikel über ShoutOuts hier!

Anpassungsoptionen

Nachfolgend finden Sie weitere Details zu den verfügbaren Optionen, mit denen Sie Ihren ShoutOut über die verschiedenen Registerkarten des Visual Designers weiter anpassen können:

Obere Leiste

Wählen Sie die Bildschirmauflösung, die Zoomstufe und „Rückgängig/Wiederholen“ für jede Bearbeitungsaktion (wird auch durch Tastenkombinationen unterstützt) aus.

Objekte hinzufügen und löschen

Um neue Elemente zu Ihrem ShoutOut hinzuzufügen, klicken Sie auf das blaue Plus-Symbol ADD NEW OBJECT (Neues Objekt hinzufügen) in der rechten unteren Ecke, wählen Sie ein Objekt aus und ziehen Sie es an die gewünschte Stelle. Sobald sie an Ort und Stelle sind, können Sie Form, Inhalte, Standort und mehr bearbeiten. Wenn Sie ein Objekt im Objects Tree (Objektbaum) auswählen, wird dieses Objekt im ShoutOut angezeigt.

Wenn Sie ein Bild oder ein Video hinzufügen, können Sie es in der Seitenleiste in der Vorschau anzeigen. Bei YouTube und Vimeo ist es nicht nötig, einen Link einzubetten, ein normaler Link wird automatisch eingebettet.

Um ein Objekt aus Ihrem ShoutOut zu löschen, markieren Sie das Objekt in der ShoutOut-Vorschau und klicken Sie auf das Papierkorbsymbol.

Alternativ können Sie auch Ihr Objekt auswählen und auf das gleiche Symbol im Seitenmenü klicken.

Styling

Wenn Sie ein bestimmtes Objekt in Ihrem ShoutOut auswählen (Textfeld, Bild usw.), bietet Ihnen die Registerkarte Styling eine Reihe von Formatierungsoptionen, die speziell für dieses Objekt gelten. Folgende Fähigkeiten und mehr sind eingeschlossen:

• Ändern der Farbe, der Deckkraft und des Eckenradius der ShoutOut-Leinwand
• Hinzufügen eines Rahmens zum ShoutOut und Anpassen der Breite oder des Randes.
• Textrichtung (standardmäßig von links nach rechts)
• Ändern der Schriftart, der Größe, der Farbe und der Höhe
• Formatierung von Text in fett, kursiv oder unterstrichen
• Anpassen der Textausrichtung von der Mitte aus, links oder rechts

Links: Fügen Sie einen Link zum Text Ihres ShoutOuts hinzu. Wählen Sie den gewünschten Text aus, klicken Sie auf das URL-Symbol in der Registerkarte „Styling“, fügen Sie den Link ein und wählen Sie, wo er geöffnet werden soll (New Window, This Window, New Tab).

Als Standardformat festlegen: Wenn Sie ein Widget – z. B. eine Schaltfläche – entwerfen und diese Funktion auf ON umschalten, werden die nächsten Schaltflächen, die Sie hinzufügen, im gleichen Design nachgebildet.

Emoji: Sie können Emojis in Ihre WalkMe-Inhalte einfügen. Fügen Sie sie einfach zu Text- oder Button-Widgets hinzu und passen Sie ihre Größe an, genau wie bei Schriftarten.

NEU! Es gibt jetzt die Möglichkeit, der Leinwand des Shoutout Schatten hinzuzufügen.
Der Benutzer kann zwischen vordefinierten Optionen für Keine, Soft, Regular und Retro Shadow auswählen.

Aktion

Fügen Sie eine Aktion hinzu, die beim Klicken auf das ShoutOut-Objekt ausgelöst wird. Neue Aktionen — Shoutout abspielen, Survey abspielen, Action Bot abspielen, einen Link öffnen, wurden hinzugefügt.

NEU! Öffnen Sie die Branch Action (nur Workstation-System)

Die Aktion öffnet einen neuen Branch (Zweig) auf der Smart Walk-Thru-Karte (in den klassischen Sprechblasen geschah dies über den „trg“ BBcode). Sie kann auf eine Schaltfläche oder einen Text angewendet werden.

Die Funktion umfasst auch Validierungen – wenn ein Zweig mit einem Schritt verbunden ist, kann die Schaltfläche/der Text, die/der den Zweig öffnet, nicht gelöscht werden.

X-Taste

Zeigen oder verbergen Sie die X-Taste auf Ihrem ShoutOut.

Screen Overlay (Bildschirmüberlagerung)

Sie können entscheiden, ob Sie ein Bildschirm-Overlay hinter Ihrem ShoutOut haben möchten und dessen Farbe und Deckkraft einstellen. Durch das Aktivieren der Bildschirmüberlagerung wird der Bildschirm dahinter verdunkelt oder gefärbt und Ihr ShoutOut fällt auf.

Layout

Legen Sie fest, wo der ShoutOut auf dem Bildschirm angezeigt werden soll — indem Sie ihn auf dem Vorschaubildschirm verschieben, eine der Standardeinstellungen im Seitenmenü wählen oder eine eigene Position festlegen.

Größe

Passen Sie die Größe Ihres ShoutOuts entweder manuell an (auf dem Shoutout-Vorschaubildschirm) oder indem Sie die gewünschten Eigenschaften für Breite und Höhe im Seitenmenü auswählen.

HINWEIS: Vorlagen, die in der ShoutOut Theme Gallery mit einem Stern gekennzeichnet sind, verwenden das dynamische Layout und haben ein anderes Seitenmenü. Um die Größe eines solchen ShoutOuts zu ändern, schalten Sie den Umschalter „Advanced Size“ (Erweiterte Größe) auf ON.

Settings

Passen Sie die ShoutOut-Einstellungen an, indem Sie auf das cog-Symbol in der unteren linken Ecke klicken.

Übersetzen von Rich-Text im Visual Editor

Wenn Sie den Rich-Text im neuen Visual Designer für ShoutOuts (nicht klassische ShoutOuts) übersetzen möchten, weicht der für diese Übersetzung erforderliche Vorgang leicht von dem ab, was normalerweise erwartet wird. In den nachstehenden Anweisungen erfahren Sie, wie Sie einen Teil dieses Textes übersetzen können:

Schritt 1: Laden Sie die zugehörige .xliff-Sprachdatei aus Ihrer Registerkarte Text & Multi-language Export herunter:

Schritt 2: Im Gegensatz zu einem normalen Feld, in dem wir einen *text* für die Übersetzungen einreichen sollen, sind die Rich-Text-Felder etwas anders konstruiert und erfordern daher eine bestimmte Methode:

• Siehe den Originaltext –
  • Was kann ich in View and Markup tun?

• Kopieren Sie die gesamte Struktur und ändern Sie nur den fettgedruckten Teil:
  • Der übersetzte Text kommt hier hin]]>

Schritt 3: Das Endergebnis für ein ganzes Feld, das sowohl den Originaltext als auch den übersetzten Text enthält, sollte dem folgenden Beispiel entsprechen:

• Was kann ich in View and Markup tun?]]>
  Test?]]>

Schritt 4: Speichern Sie die aktualisierte Datei im aktuellen Ordner, in dem sie sich befindet, und importieren Sie sie zurück in den Multi-Language-Bereich der betreffenden Sprache – es sollte kein Fehler auftreten, wenn die Formatierungssyntax identisch ist und nur der Container geändert wurde.

Keyboard Shortcuts (Tastaturkurzbefehle)

Verwenden Sie diese Shortcuts, um Ihre Zeit bei der Arbeit mit dem Visual Designer zu optimieren.