Visual Designer (concepteur visuel)

Aperçu général

La personnalisation des ShoutOuts est plus facile que jamais grâce au concepteur visuel. Réalisez de belles créations sans avoir besoin de CSS. Il vous permet de contrôler facilement la création et la conception de ShoutOuts, avec les fonctionnalités suivantes :

• Glisser-déposer
• Ajouter des boutons, paragraphes, formats, images et des vidéos
• Gérer les couches du canvas
• Ajuster l'alignement
• Éditer un texte riche
• Texte dynamique
• Prise en charge multilingue

Pour plus d'informations sur ShoutOut, consultez l'article dédié aux ShoutOuts ici !

Options de personnalisation

Vous trouverez ci-dessous des informations plus détaillées sur les options disponibles pour personnaliser votre ShoutOut en utilisant les différents onglets du concepteur visuel :

Barre supérieure

Choisissez la résolution d'écran, le niveau de zoom et annulez ou rétablissez toutes les modifications (ces actions peuvent également être réalisées avec des raccourcis clavier)

Ajouter et Supprimer des objets

Pour ajouter de nouveaux éléments à votre ShoutOut, cliquez sur l'icône plus bleue ADD NEW OBJECT (ajouter un nouvel objet) dans le coin inférieur gauche, choisissez un objet et faites le glissez dans l'emplacement souhaité. Une fois en place, vous pouvez en modifier la forme, le contenu, l'emplacement et bien plus encore. Sélectionner un objet dans l' arbre des objets indiquera cet objet dans le ShoutOut.

Lorsque vous ajoutez une image ou une vidéo, vous pouvez la prévisualiser sur le panneau latéral. Pour YouTube et Vimeo, il n'est pas nécessaire d'insérer les liens intégrés, un lien normal sera automatiquement intégré.

Pour supprimer un objet dans votre ShoutOut, sélectionnez l'objet dans la prévisualisation du ShoutOut et cliquez sur l'icône de la corbeille.

Sinon, sélectionnez votre objet et cliquez sur la même icône dans le menu latéral.

Styles

Lorsque vous sélectionnez un objet spécifique dans votre Shoutout (zone de texte, image, etc.), l'onglet Styling (styles) vous fournit une gamme d'options de formatage spécifiques à cet objet. Vous aurez notamment accès aux fonctionnalités suivantes :

• Modification de la couleur, de l'opacité et du rayon des angles du canevas ShoutOut,
• Ajout d'une bordure au ShoutOut et réglage de la largeur de la bordure
• Orientation du texte (de gauche à droite par défaut)
• Modification du style, de la taille, de la couleur et de la hauteur de la police
• Mise en forme du texte en caractères gras, italique ou souligné,
• Ajustement de l'alignement du texte au centre, à gauche ou à droite,

Liens : Ajoutez un lien au texte de votre ShoutOut. Sélectionnez le texte souhaité, appuyez sur l'icône URL dans l'onglet Styling, insérez le lien et choisissez l'endroit où vous souhaitez qu'il s'ouvre (une nouvelle fenêtre, cette fenêtre, un nouvel onglet).

Définir le format par défaut : si vous concevez un widget, par exemple un bouton, et que vous l'activez en le faisant basculer sur ON, les prochains boutons que vous ajouterez seront recréés sur le même modèle.

Emoji : vous pouvez insérer des emojis dans votre contenu WalkMe. Il suffit de les ajouter aux widgets de texte ou de bouton et de personnaliser leur taille, tout comme vous le faites avec les polices.

Pour ouvrir le menu emoji :

• Windows : Appuyez sur Windows + Période
• Mac OS : Appuyez sur Commande + Contrôle + Espace

Ombre : Ajoutez une ombre à la toile du Shoutout.
Sélectionnez entre : Options prédéfinies d'ombre douce, régulière et rétro.

Action

Ajoutez une action qui se déclenchera lorsqu'un utilisateur cliquera sur l'objet du ShoutOut. De nouvelles actions, comprenant la lecture du ShoutOut, du Survey, de l'ActionBot et l'ouveture d'un lien, ont été ajoutées.

Ouvrir l'action de la branche (avec le système de Workstation uniquement)

L'action ouvre une nouvelle branche sur la carte Smart Walk-Thru (dans les bulles classiques, cela a été fait via le BBcode « trg ») Elle peut être appliquée à un bouton ou à un texte

La fonctionnalité comprend également des validations : si une branche a une étape qui y est connectée, le bouton ou le texte qui ouvre la branche ne pourra pas être supprimé.

Bouton X

Montrez ou masquez le bouton X sur votre ShoutOut.

Calque sur l'écran

Vous pouvez décider d'avoir une superposition d'écran derrière votre ShoutOut et définir la couleur et l'opacité de cette superposition. L'activation de la superposition d'écran permet d'atténuer ou de colorer l'écran derrière et de faire ressortir votre ShoutOut.

Mise en page

Sélectionnez l'emplacement où ShoutOut apparaît à l'écran, en le faisant un glisser sur l'écran de prévisualisation, en choisissant l'un des paramètres de position par défaut dans le menu latéral, ou en définissant une position personnalisée.

Taille

Ajustez la taille de votre ShoutOut soit manuellement (sur l'écran de prévisualisation du ShoutOut) ou en sélectionnant les propriétés de la largeur et de la hauteur souhaitées dans le menu latéral.

REMARQUE : les modèles marqués d'une étoile dans la Theme Gallery des ShoutOuts utilisent la mise en page dynamique et ont un menu latéral différent. Pour modifier la taille d'un tel ShoutOut, activez le bouton à bascule de la taille avancée.

Configurer

Ajustez les paramètres du ShoutOut en cliquant sur l'icône du rouage dans le coin inférieur gauche.

Traduire du texte riche dans l'Éditeur visuel

Si vous souhaitez traduire le texte riche dans le nouveau concepteur visuel pour ShoutOut (hors ShoutOuts classiques), la marche à suivre diffère légèrement des procédures habituelles. Veuillez consulter les instructions ci-dessous pour savoir comment traduire une partie de ce texte :

Étape 1 : Téléchargez le fichier .xliff de la langue associée à partir de votre onglet d'exportation Texte et multilingue :

Étape 2 : À la différence d'un champ normal dans lequel nous sommes censés saisir un *texte* de traduction, les champs de texte enrichi sont créés de manière légèrement différente et nécessitent donc l'adoption d'une méthode spécifique :

• Référez-vous au texte original -
  • Que puis-je faire dans View et Markup ?

• Copiez l'ensemble de la structure et modifiez la partie en caractères gras :
  • saisissez le texte traduit ici]]>

Étape 3 : Le résultat final d'un champ entier contenant à la fois le texte original et le texte traduit devrait ressembler à l'exemple ci-dessous :

• Que puis-je faire dans View et Markup ?]]>
  Test?]]>

Étape 4 : Enregistrez le fichier mis à jour dans le dossier où il se trouve actuellement, et importez-le à nouveau dans la section multilingue, à la langue adéquate. Il ne devrait y avoir aucune erreur si la syntaxe de formatage est identique et si seul le conteneur a été modifié.

Raccourcis clavier

Utilisez ces raccourcis pour optimiser votre temps tout en travaillant avec le Visual Designer.