Diseñador visual

Breve descripción general

La personalización de ShoutOuts se ha vuelto mucho más fácil con la ayuda del Diseñador visual. Crea diseños hermosos sin la necesidad de CSS. Ofrece un control fácil al crear y diseñar ShoutOuts, con capacidades como:

• Arrastrar y soltar
• Añadir botones, párrafos, formas, imágenes y vídeos
• Administrar capas de lienzo
• Cambiar la alineación
• Edición de texto enriquecido
• Texto dinámico
• Compatibilidad multilingüe

Para obtener más información sobre ShoutOuts, consulta el artículo dedicado a ShoutOuts aquí.

Opciones de personalización

A continuación se muestran más detalles sobre las opciones disponibles para personalizar aún más el ShoutOut utilizando las diferentes pestañas del Diseñador visual:

Barra superior

Selecciona Resolución de pantalla, Nivel de zoom y Deshacer/Rehacer para cualquier acción de edición (también compatible con los atajos de teclado).

Añadir y eliminar objetos

Para añadir nuevos elementos al ShoutOut, haz clic en el icono del signo más azul AÑADIR NUEVO OBJETO en la esquina inferior derecha, elige un objeto y arrástralo a la ubicación deseada. Una vez en su lugar, puedes editar la forma, el contenido, la ubicación y más. La selección de un objeto en el árbol de objetos indicará ese objeto en el ShoutOut.

Al añadir una imagen o un vídeo, puedes ver una vista previa en el panel lateral. Para YouTube y Vimeo no es necesario insertar enlaces incrustados, se incrustará automáticamente uno normal.

Para eliminar un objeto del ShoutOut, selecciona el objeto en la vista previa del ShoutOut y haz clic en el icono de la papelera.

Como alternativa, selecciona el objeto y haz clic en el mismo icono en el menú lateral.

Estilo

Al seleccionar un objeto específico dentro del ShoutOut (cuadro de texto, imagen, etc.), la pestaña Estilo te proporciona un rango de opciones de formato, específicas para ese objeto. Incluye las siguientes capacidades y más:

• Cambio del color, la opacidad y el radio de la esquina del ShoutOut
• Añadir un borde al ShoutOut y ajustar el ancho o el borde
• Dirección del texto (de izquierda a derecha por defecto)
• Cambiar el estilo de fuente, el tamaño, el color y la altura
• Formatear el texto en negrita, cursiva o subrayado
• Ajustar la alineación del texto desde el centro, la izquierda o la derecha

Enlaces: añade un enlace al texto del ShoutOut. Selecciona el texto deseado, pulsa el icono de la URL en la pestaña de estilo, inserta el enlace y elige dónde deseas que se abra (Nueva ventana, Esta ventana, Nueva pestaña).

Establecer como formato predeterminado: si diseñas un widget, por ejemplo, un botón, y estableces esta función en ACTIVADO, los siguientes botones que añadas se volverán a ejecutar en el mismo diseño.

Emoji: puedes insertar emojis en el contenido de WalkMe. Simplemente agrégalos a los widgets de texto o botones y personaliza su tamaño, como lo haces con las fuentes.

Para abrir el menú de emoji:

• Windows: presiona Windows + punto
• Mac OS: presiona Comando + Control + Espacio

Sombra: añade una sombra al lienzo del Shoutout.
Selecciona entre: las opciones predefinidas de Ninguna, Suave, Regular y Sombra retro.

Medidas

Añade una acción que se activará al hacer clic en el objeto del ShoutOut. Se han añadido nuevas acciones: Reproducir Shoutout, Reproducir Survey, Reproducir Action Bot, Abrir un enlace.

Abrir acción de ramificación (solo sistema de Workstation)

La acción abre una nueva rama en el mapa del Smart Walk-Thru (en los globos clásicos se realizaba a través del BBcode "trg"). Se puede aplicar a un botón o texto.

La función también incluye validaciones: si una rama tiene un paso conectado a ella, el botón/texto que abre la rama se puede eliminar.

Botón X

Muestra u oculta el botón X en tu ShoutOut.

Superposición de pantalla

Puedes decidir tener una superposición de pantalla detrás del ShoutOut y establecer el color y la opacidad. Al activar la superposición de pantalla, se atenuará o coloreará la pantalla de fondo y hará que el ShoutOut resalte.

Diseño

Selecciona dónde aparece el ShoutOut en la pantalla, arrastrándolo en la vista previa, eligiendo uno de los ajustes de posición predeterminados en el menú lateral o estableciendo una posición personalizada.

Tamaño

Ajusta el tamaño del ShoutOut manualmente (en la pantalla de vista previa del Shoutout) o seleccionando las propiedades de ancho y alto deseadas en el menú lateral.

NOTA: Las plantillas marcadas con una estrella en la Galería de temas de ShoutOut utilizan el Diseño dinámico y tienen un menú lateral diferente. Para cambiar el tamaño de un ShoutOut, activa el interruptor Tamaño avanzado a ON.

Icono

Ajusta la configuración del ShoutOut haciendo clic en el icono del engranaje en la esquina inferior izquierda.

Traducción de texto enriquecido en el Editor visual

Si deseas traducir el texto enriquecido en el nuevo Diseñador visual para ShoutOuts (no en los ShoutOuts clásicos), el proceso requerido para esta traducción varía ligeramente de lo que era habitual. Consulta las instrucciones a continuación sobre cómo traducir una parte de este texto:

Paso 1: descarga el archivo .xliff del idioma asociado desde la pestaña de exportación Texto y multilingüe:

Paso 2: a diferencia de un campo normal donde se espera que introduzcamos un *texto* para las traducciones, los campos de texto enriquecido se construyen de manera ligeramente diferente y, como resultado, requieren un método específico:

• Consulta el texto original:
  • ¿Qué puedo hacer en Ver y Anotar?

• Copia toda la estructura y modifica solo la parte en negrita:
  • el texto traducido va aquí]]>

Paso 3: el resultado final de un campo completo que contiene el texto original y el texto traducido debe parecerse al ejemplo siguiente:

• ¿Qué puedo hacer en Ver y Anotar?]]>
  ¿Prueba?]]>

Paso 4: guarda el archivo actualizado en la carpeta actual en la que se encuentra e impórtalo de nuevo a la sección multilingüe en el idioma relevante: no se debería experimentar ningún error si la sintaxis de formato es idéntica y solo se modificó el contenedor.

Atajos de teclado

Utiliza estos atajos para ahorrar tiempo mientras trabajas con el Diseñador visual.