El Administrador de interacciones le permite crear interacciones personalizadas que mejoran la funcionalidad de su sitio web sin necesidad de código adicional. Estas interacciones personalizadas se crean combinando reglas preestablecidas, lo que ofrece posibilidades ilimitadas de funcionalidad.
Piense en las reglas como ingredientes: pueden combinarse de muchas maneras para crear una variedad de resultados diferentes.
Se pueden encontrar algunos tutoriales de ejemplo de lo que se puede crear con el Administrador de interacciones en Blocs Academy.
Administrador de interacción abierta
Para iniciar el Administrador de interacciones, diríjase a la Barra de menu principal y desde el Windows menú, seleccione Gerente de interacción o alternativamente usa el atajo de teclado ⌃⌘i.
Agregar interacción
Para crear una nueva interacción, haga clic en el + botón que se encuentra en la esquina superior derecha de la ventana del Administrador de interacciones o, alternativamente, utilice el atajo de teclado ⌃n.
Cambiar el nombre de la interacción
Es posible cambiar el nombre de una interacción simplemente haciendo clic en el texto del elemento de interacción y escribiendo un nuevo nombre.
Interacción duplicada
Es posible duplicar una interacción mediante clic derecho y seleccionando duplicar desde el menú contextual o alternativamente utilice el atajo de teclado ⌘+D.
Eliminar interacción
Para eliminar una interacción personalizada, simplemente seleccione el elemento de interacción que desea eliminar y haga clic en el botón – botón, que se encuentra en la parte superior derecha de la ventana del Administrador de interacciones o, alternativamente, utilice el atajo de teclado ⌘+⌫.
Editar interacción
Para editar una interacción, haga clic en el que se encuentra en el extremo derecho del elemento de interacción, o simplemente haga doble clic en el elemento de interacción. Esto abrirá una ventana emergente que contiene todas las reglas incluidas en la interacción.
Insertar una regla
Para insertar una nueva regla en una interacción, simplemente haga clic en el botón + botón que se encuentra en la parte superior derecha de la ventana emergente de interacción o, alternativamente, utilice el atajo de teclado ⌃nSe abrirá un menú desplegable con todas las reglas disponibles para interacciones personalizadas. Al hacer clic en una, se insertará debajo de la regla seleccionada.
Condicionales
Si declaración
La regla de la declaración if se utiliza para ejecutar lógica condicional. Le permite colocar reglas dentro de ella que se activan solo si una condición especificada se evalúa como verdadera. Esto resulta útil para la toma de decisiones en sus interacciones personalizadas, lo que permite obtener diferentes resultados en función de ciertas condiciones.
Las instrucciones if de interacción personalizada admiten las siguientes variables: URL, Visible, En pantalla, Desplazamiento Y, Cookie, Sistema operativo (SO), Intervalo de tiempo, Diurno, Nocturno, Fecha, Día, Mes, Día laborable, Fin de semana. Todas las variables permiten especificar un valor de comparación y admiten varios operadores.
Navegación - Navigation
Ir a la página
Esta regla llevará el navegador a la página especificada.
Navegar a la URL
Esta regla llevará el navegador a la URL especificada.
Desplazarse hasta el objetivo
Esta regla desplazará el elemento al que tenga el #ID o la clase especificados.
Recargar página
Esta regla volverá a cargar la página actual en el navegador.
Clases
Alternar clase
Esta regla alternará las clases especificadas en los elementos con los #ID o la clase especificados.
Agregar clase
Esta regla agregará las clases especificadas a los elementos con los #ID o la clase especificados.
Eliminar clase
Esta regla eliminará las clases especificadas de los elementos con los #ID o la clase especificados.
Acción:
Establecer atributo
Esta regla establecerá el valor de un atributo de datos para el elemento con el #ID o la clase especificados.
Alternar visibilidad
Esta regla alternará la visibilidad de los elementos con los ID o clases especificados.
Alternar modal
Esta regla alternará un modal (mostrar/ocultar) con el #ID especificado.
Enlace telefónico
Esta regla iniciará una llamada telefónica (en dispositivos compatibles) al número de teléfono especificado.
Enlace de correo electrónico
Esta regla abrirá el cliente de correo electrónico del usuario actual con el campo de dirección completado con la dirección de correo electrónico especificada.
Descargar archivo
Esta regla activará la descarga del archivo especificado.
Contáctenos
Esta regla enviará un formulario con el #ID o la clase especificados.
Restablecer el Formulario
Esta regla restablecerá un formulario con el #ID o la clase especificados.
Eliminar elemento
Esta regla eliminará un elemento con el #ID o la clase especificados.
Deshabilitar elemento
Esta regla deshabilitará un elemento con el #ID o la clase especificados.
Llamar a JavaScript
Esta regla se puede utilizar para llamar a funciones JavaScript personalizadas.
Selección
Seleccionar pestaña
Esta regla seleccionará la pestaña para una pestaña Bric con el #ID especificado.
Haga clic en el elemento
Esta regla hará clic programáticamente en el elemento con el #ID o la clase especificados.
Elemento de enfoque
Esta regla enfocará programáticamente el elemento con el #ID o la clase especificados.
Elemento de verificación
Esta regla establecerá programáticamente el estado de selección del elemento con el #ID o la clase especificados.
Texto
Establecer texto
Esta regla establecerá el contenido de texto especificado para el elemento con el #ID o la clase especificados.
Copiar texto
Esta regla copiará una cadena de texto especificada o el contenido textual de un elemento al portapapeles del usuario.
Valor ajustado
Esta regla establecerá el valor para el elemento de entrada con el #ID o la clase especificados.
Vídeo
Reproductor de video
Esta regla puede activar eventos como reproducir, pausar, detener y silenciar para el elemento del reproductor de video con el ID especificado.
Audio
Audio Player
Esta regla puede activar eventos como reproducir, pausar, detener y silenciar el elemento del reproductor de audio con el #ID o la clase especificados.
Reproducir sonido
Esta regla reproducirá el archivo de audio mp3 asignado (Agregar archivos de audio al Administrador de activos).
Bootstrap
Elemento Carrusel
Esta regla puede activar eventos como reproducir, pausar, siguiente y anterior para el elemento del carrusel con el #ID especificado.
Interacciones
Llamar interacción personalizada
Esta regla llamará a otra interacción personalizada y permitirá un retraso que se establece en milisegundos.
Pausa la interacción
Esta regla agrega un retraso (en milisegundos) antes de que se ejecuten las próximas reglas de interacción.
Detener la interacción
Esta regla evita que una interacción personalizada ejecute reglas adicionales después de ella.
Comentarios
Notificación
Esta regla activará una notificación web del navegador con el mensaje especificado.
Alertar
Esta regla activará una alerta con el mensaje especificado.
Registro de la consola
Esta regla creará un registro del navegador con el texto especificado.
Cookie
Establecer galleta
Esta regla establecerá una cookie en el navegador del usuario con un nombre, valor y número de días específicos.
Destruir Cookie
Esta regla destruirá una cookie en el navegador del usuario con un nombre especificado.
Varios
Establecer HTML
Esta regla establecerá el HTML del elemento con el #ID o la clase especificados.
Detener la carga
Esta regla detendrá la carga del navegador web.
Detener la carga
Esta regla detendrá la carga del navegador web.
Duplicar una regla
Es posible duplicar una regla mediante clic derecho y seleccionando duplicar desde el menú contextual o alternativamente utilice el atajo de teclado ⌘+D.
Eliminar una regla
Para eliminar una regla de una interacción, simplemente seleccione la regla que desea eliminar y haga clic en el botón – Botón que se encuentra en la parte superior derecha de la ventana emergente de interacción.
Coloque dentro de la declaración If
Puede colocar rápidamente varias reglas dentro de una declaración if seleccionándolas, haciendo clic derecho y eligiendo Lugar dentro > Si declaración desde el menú contextual.
Código corto de datos
Ahora puede usar el datos() código corto en una interacción personalizada para obtener información personalizada atributo de datos Valores del elemento disparador cuando se ejecuta la interacción. Simplemente coloque el atributo de datos de destino entre corchetes, como se muestra a continuación: datos(mi-atributo). El atributo Debes También se pueden almacenar en el elemento disparador.
Puede utilizar las opciones datos() Código corto en cualquier campo de texto de regla de interacción. Más información sobre cómo añadir atributos de datos personalizados a los elementos. aquí.
Aplicar interacciones personalizadas
Las interacciones personalizadas se pueden aplicar a casi cualquier elemento dentro Blocs, artículos como botones, las imágenes y iconos tiene una opción de interacción personalizada disponible, en el menú desplegable de interacciones de la barra lateral estándar.
Otros elementos como Blocs, filas, columnas, divs y envíenos mensaje de texto Mostrará un panel de interacción personalizado en el inspector de la barra lateral.
El Gestor de menús Tiene soporte para usar interacciones personalizadas en los elementos del menú.
Activar interacción personalizada
En la mayoría de los casos, las interacciones personalizadas se pueden activar de tres maneras: cuando un elemento es clickeado, cuando el cursor del ratón está cierne sobre un elemento y cuando el cursor del ratón hojas un elemento.
También es posible activar una interacción personalizada una vez que se ha creado una página. cargado, esto se puede hacer a través de Opciones de configuración de página.
También es posible arrastrar una interacción personalizada desde el Administrador de interacciones hacia los elementos de la Blocs Diseño de lienzo para aplicarlos. Además, puede arrastrar interacciones personalizadas a las páginas en el Navegador de páginas para aplicar una interacción personalizada de carga de página.