Botón de acción flotante (FAB)es un elemento común de la interfaz de usuario que suele encontrarse en sitios web o aplicaciones móviles. Se caracteriza porPase el ratón sobre el contenido de la páginaLos botones flotantes suelen fijarse en una esquina o en el borde de la página y permanecen visibles para el usuario mientras se desplaza por la página. Este dise?o hace que los botones flotantes resulten muy prácticos para acceder rápidamente a acciones o funciones importantes.

Características principales de los botones flotantes

1. posición destacadaBotones flotantes: los botones flotantes suelen estar situados en la esquina inferior derecha de la página, una posición muy visible en la que se puede hacer clic en cualquier momento, lo que mejora enormemente la eficacia del usuario. No importa por dónde se desplace el usuario en la página, el botón permanece en su sitio, y esta disposición fija mantiene el botón en la línea de visión del usuario.
2. operación importanteBotones flotantes : Los botones flotantes se utilizan a menudo para activar acciones importantes como enviar un formulario, iniciar un chat, a?adir nuevo contenido o navegar a una página específica. Debido a su posición prominente y a su estado fijo, los botones flotantes se suelen utilizar para las funciones más centrales de un sitio web para garantizar que los usuarios no se pierdan estas acciones críticas.
3. Promoción del dise?o de materialesBotones flotantes : Los botones flotantes son altamente recomendados por las Directrices de Dise?o Material de Google. Este estilo de dise?o se centra en la simplicidad y la intuición, con animaciones de botones y comentarios visuales cuidadosamente dise?ados para ofrecer una mejor experiencia de usuario.
4. Visualización de iconos: Los botones flotantes suelen utilizar un icono sencillo para indicar su función, por ejemplo, "más" para a?adir un nuevo elemento, "lápiz" para editar el contenido, "Burbujas de chat" se utiliza para iniciar un diálogo. Esta iconización no sólo es estéticamente agradable, sino que también comunica intuitivamente la finalidad del botón.
5. Estados múltiples y efectos de interacciónBotones flotantes : Los botones flotantes tienen varios estados de interacción, como predeterminado, pulsado, enfocado y desactivado. Cada estado va acompa?ado de una respuesta visual que ayuda al usuario a entender el estado actual del botón y si se puede pulsar.

Casos de uso habituales de los botones flotantes

1. Contactos de clientesEl servicio de atención al cliente: por ejemplo, una floristería recién inaugurada podría a?adir a su sitio web un botón flotante que permitiera a los usuarios ponerse en contacto en cualquier momento con un representante de atención al cliente para solicitar asistencia o realizar consultas sobre compras. Este botón está siempre visible independientemente de la página en la que se encuentre el usuario y lo dirige rápidamente a la comunicación en tiempo real con el servicio de atención al cliente.
2. Creación de contenidos: En algunas aplicaciones (como clientes de correo electrónico o aplicaciones para tomar notas), los botones flotantes pueden utilizarse para crear rápidamente nuevos contenidos, como escribir un nuevo correo electrónico o a?adir una nueva nota.
3. navegadorBotones flotantes: en algunas interfaces de aplicaciones complejas, los botones flotantes pueden utilizarse para ayudar a los usuarios a navegar rápidamente a partes específicas de la aplicación. Por ejemplo, hacer clic en un botón puede llevar directamente a la página de ajustes personales del usuario.
4. gestión de tareasEn las aplicaciones de gestión de tareas, los botones flotantes se utilizan a menudo para a?adir nuevas tareas o iniciar funciones importantes de gestión de proyectos.

Cómo a?adir un botón flotante

Aquí tienes una guía paso a paso sobre cómo a?adir botones flotantes a tu sitio web WordPress. Este artículo se basa en Plugin ElementorUn ejemplo de cómo crear y personalizar un botón flotante.

Paso 1: Crear una plantilla de botón flotante

Dado que los botones flotantes se basan en plantillas, es necesario crear o seleccionar una plantilla.

1. Vaya a la sección de plantillasInicie sesión en el backend de WordPress y navegue hasta "plantilla">"botón flotante".

2. Crear una nueva plantilla: pulse "A?adir nuevo botón flotante"Botones". El sistema abrirá la biblioteca de plantillas y mostrará una lista de las plantillas de botones flotantes disponibles.

3. Seleccione una plantillaNavegue por la biblioteca de plantillas, seleccione una plantilla de botón flotante que se adapte a sus necesidades, pase el ratón por encima de la plantilla y haga clic en "palo".

4. Edición de plantillas tras la inserción: La plantilla se insertará en el editor de Elementor y podrás empezar a editar el contenido y los estilos de la plantilla.

Para seleccionar más plantillas, debe actualizar a la versión Elementor ProVersión.

Paso 2: Personalizar los botones flotantes

En el editor, los aspectos de los botones flotantes pueden personalizarse como se desee.

1. Editar la información del usuario: En el campo Nombre de usuario, introduzca el nombre del agente del servicio de atención al cliente que responderá al usuario, por ejemplo "Alex Smith". Cuando un usuario inicia un chat, el mensaje se envía a este agente de atención al cliente designado.

2. Cambiar el estilo de los botonesEstilo: Si hace clic en la pesta?a Estilo, podrá ajustar la forma, el color, el borde, etc. del botón. Por ejemplo, la forma del botón puede ajustarse a redonda para que coincida con el estilo general de dise?o del sitio web.

3. Ajuste de la posición de los botonesAvanzado: Haga clic en la pesta?a Avanzado para cambiar la posición del botón flotante en la página. Puede elegir fijar el botón en el lado izquierdo o derecho de la página y ajustar su posición vertical y horizontal según sea necesario.

4. Publicar botones flotantesUna vez completados los ajustes, haga clic en la esquina superior derecha de la ventana "escriba a", su botón flotante aparecerá en el sitio web.

Paso 3: Establecer las condiciones de visualización del botón flotante

Los usuarios de Elementor Pro pueden configurar las condiciones de visualización del botón flotante para controlar dónde se muestra en el sitio.

1. Ajuste de las condiciones de visualizaciónAntes de publicar, se le pedirá que defina las condiciones de visualización del botón flotante. Por ejemplo, puede elegir que el botón aparezca en todas las páginas del sitio, o sólo en páginas o tipos de entrada específicos.
2. Guardar y publicar: Una vez completados los ajustes, haga clic en Guardar y publicar y el botón flotante aparecerá en el sitio en sus términos.

resúmenes

Los botones flotantes son una herramienta importante para mejorar la experiencia de usuario de un sitio web. Al situar las acciones clave en un lugar destacado y fijo, los botones flotantes pueden ayudar a los usuarios a completar tareas más rápidamente, mejorando la interactividad del sitio web y la satisfacción del usuario. Mediante un uso y una personalización adecuados, los botones flotantes pueden convertirse en un elemento crucial del dise?o de un sitio web.

Contacte con nosotros
?No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de peque?as empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨詢：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres