Creación de lanzadores avanzados

Last Updated mayo 1, 2026

Breve descripción general

Conviértete en un creador experto de Decentralized Application (DAP) y cumple con los requisitos de creación que deseas. El siguiente artículo explica cómo lograr las tres opciones más solicitadas para la construcción del Launcher.

Crear un lanzador intermitente

  1. Haz clic en "Personalizar"
  2. Haz clic en la pestaña "CSS"
  3. Pega el siguiente texto en la parte inferior del panel CSS y reemplaza las x con el ID del Launcher. Puedes encontrarlo pasando el cursor sobre los 3 puntos verticales junto al Launcher y haciendo clic en "Copiar ID".
    .walkme-launcher-id-xxxxxx .walkme-launcher-image-div {
     animation: scale-pulse 1.75s cubic-bezier(.39,.58,.38,.75) normal infinite forwards;
    }
    
    @keyframes scale-pulse {
     from {
     transform: scale(1.0);
     opacidad: 1;
     }
     to {
     transform: scale(1.5);
     opacidad: 1;
     }
    }

Crear un Launcher invisible.

Caso de uso: para bloquear un botón para evitar una acción según las prácticas recomendadas. Puedes utilizarlo para iniciar un Smart Walk-Thru o no hacer nada.

  1. En la pestaña Diseño del lanzador, haz clic en el icono Editar plantilla

  2. Se abrirá la pantalla de diseño personalizado
  3. Haz clic en Hacer invisible


Crear un globo constante

Un globo permanecerá en pantalla mientras continúa el tutorial.

Caso de uso: quieres que un globo general permanezca en pantalla mientras el usuario rellena un formulario.

  1. Crea un globo con el texto y el diseño que desees.
  2. Convierte el globo en una imagen (Captura de pantalla-Pegar en Paint y editar - Guardar-Subir a S3).
  3. Añade la imagen como iniciador. Y ubícalo donde se habría ubicado el globo.
  4. Crea un WM-Data (datos de WM) en el que deseas que aparezca el globo en el recorrido guiado (Walk-Thru).
  5. Añade los mismos datos de WM que anulan los anteriores donde deseas que el globo desaparezca.
  6. Segmenta el "Lanzador de globos" para que aparezca solo cuando existan los datos de WM (datos de World Manager).
  7. Haz que el lanzador compruebe las segmentaciones (frecuencia de las mismas).

Rotar/Inclinar un lanzador

Para que el lanzador se muestre en un ángulo, utiliza el CSS global.

  1. Inspecciona el lanzador y copia sus credenciales: walkme-launcher-id-xxxxxxx
  2. En el Editor, abre Configuración -> Editar CSS global
  3. En la pestaña CSS, utiliza la siguiente sintaxis:
    .walkme-launcher-id-xxxxxxx {
    
    transform: skew(Xdeg) !important;
    
    }
    Ejemplo:
    .walkme-launcher-id-123456 {
    
    tranform: skewX(10deg) !important;
    
    }
  4. Encuentra más ejemplos de sintaxis para las propiedades de transform skew() y rotate() en los siguientes artículos:
    skew()
    rotate()

Actualizar el diseño del lanzador personalizado

Caso de uso: quieres actualizar algunos lanzadores personalizados a la vez en lugar de abrir cada uno por separado para ahorrar tiempo.

  1. Crea un lanzador de prueba en un elemento aleatorio de la página.
  2. Haz clic para cambiar el lanzador.
  3. Una vez que estés en el menú de selección de todos los lanzadores personalizados, puedes actualizarlos uno tras otro sin guardar el lanzador actual en el que estás trabajando.
  4. Después de actualizar todos los lanzadores, puedes simplemente cancelar el lanzador de prueba en el que estabas trabajando; todos los cambios se guardarán en tus lanzadores personalizados.

Oculta el icono de mano del lanzador invisible que bloquea.

Desactiva el widget y utiliza un lanzador en su lugar.

  1. Desactiva el Widget yendo a Personalizar > Reproductor > Widget y establece ninguna visualización:
  2. A continuación, deberás crear un iniciador para abrir el menú. Para ello, puedes abrir la aplicación del iniciador en el Editor y colocar el iniciador donde deseas que aparezca en la aplicación.
  3. Además, puedes elegir el tipo de iniciador de menús que deseas en Opciones del iniciador -> Interacción -> Cambiar iniciador. Desde aquí puedes elegir entre las imágenes predeterminadas del iniciador, cargar tu propia imagen o crear una imagen del iniciador dentro del Editor.
  4. Por último, en la pestaña Interacción, asegúrate de configurar la acción para Abrir Menú. También puedes elegir qué pestaña deseas que sea visible cuando los usuarios abran el menú por primera vez:

Convertir un lanzador en una imagen

Añade el siguiente CSS a tu CSS global en el Editor:

.walkme-launcher-id-xxxxx {

background-image: url(url.png) !important;

padding-top: 24px;

padding-right: 2px;

padding-bottom: 18px;

padding-left: 1px;

}

Consulta la imagen a continuación como ejemplo.

Asegúrate de reemplazar la URL con la imagen de tu elección y los xxx (identificación del lanzador) con el ID del lanzador. Sigue estos pasos para encontrar el ID único del lanzador:

  1. Pasa el cursor sobre los 3 puntos verticales a la derecha del lanzador
  2. Haz clic en "Copiar ID" en el menú desplegable.

Oculta elementos en tu sitio con Launchers.

Crea un Launcher de efectos 3D.

Añade animaciones y efectos especiales a los Launchers.

Para más consejos, consulta los videos de Launchers Tip Tuesday.

Was this article helpful?

Thanks for your feedback!

Be part of something bigger.

Engage with peers, ask questions, share ideas

Explore our community
×