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
La personnalisation via le CSS global ou personnalisé
Sites Frameset (encadrement des sites) - le contenu ne sera pas affiché dessus
Le Visual Designer prend en charge :
Lecteur Web - prend en charge le SO
Lecteur mobile - prend en charge SO, SWT (limité), Surveys et Launchers
Desktop Player - prend en charge SO, SWT (limité)
L'accessibilité est prise en charge (au niveau de l'image et du niveau ShoutOut)
La police régulière d'Open Sans semble différente lorsque l'élément est lu plutôt que dans l'Éditeur. Nous travaillons à la résolution de ce problème.
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,
NOUVEAU : ajout d'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.
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'ouverture d'un lien, ont été ajoutées.
NOUVEAU ! 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 un calque sur l'écran derrière votre ShoutOut et d'en définir la couleur et l'opacité.
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.
Remarque
Les valeurs doivent être comprises entre -25 % et 25 % (les pixels sont donc pris en compte). La limitation a été configurée de sorte que les utilisateurs ne puissent pas positionner le ShoutOut en dehors de l'écran.
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.
Description
Raccourci Mac
Raccourci Windows
Insérer un lien ou le modifier
Command + K
Contrôle + K
En caractères gras
Command + B
Contrôle + B
En italique
Command + I
Contrôle + I
Souligné
Command + U
Contrôle + U
Supprimer un élément lorsqu'il est sélectionné
Supprimer
Supprimer
Copier le formatage du texte ou de la forme sélectionnés
Command + Option + C
Contrôle + Option + C
Coller le formatage du texte ou de la forme sélectionnés
