botón flotante（Floating Button, a veces llamado Floating Action Button (FAB), es un elemento de interfaz de usuario que flota en una página web y se utiliza a menudo para guiar a los usuarios a realizar acciones clave. En este artículo, le llevaremos a entender la función principal del botón flotante, escenarios de uso, y explicar los pasos para agregar.

?Qué es un botón flotante?

Los botones flotantes son un elemento común de interacción web, normalmente fijados en una esquina o en el borde de una página y mostrados continuamente a medida que la página se desplaza.

A continuación se enumeran algunas de sus principales características:

• destacar: Botones flotantesresuspensiónEncima del contenido de la página, siempre visible y fácil de pulsar por los usuarios en cualquier momento.
• operación importante: Normalmente se utiliza para alojar acciones importantes como ponerse en contacto con el servicio de atención al cliente, iniciar un chat o a?adir nuevos contenidos.
• Estilo Material Design: Las directrices Material Design de Google lo estandarizan, a menudo con animación y atractivo visual.
• reconocimiento de iconosBotones flotantes: los botones flotantes suelen contener un icono, por ejemplo, un signo más para "A?adir", un lápiz para "Editar", etc.
• interactividadLos botones pueden mostrar diferentes estados en función de las acciones del usuario, como predeterminado, pulsado, enfocado o desactivado, para mejorar la respuesta interactiva.

Escenarios comunes de uso

Por ejemplo, Jan acaba de abrir una floristería. Para no perderse ningún cliente potencial, ha a?adido un botón flotante que facilita a los visitantes ponerse en contacto con el tendero en cualquier momento, independientemente de la página del sitio web que visiten.

Otros casos:

• Crear nuevos contenidosBotones flotantes: los botones flotantes se utilizan habitualmente en las aplicaciones Mail o Notas para crear rápidamente nuevos contenidos.
• Navegación rápida: En algunas pantallas, los botones flotantes pueden saltar a áreas o páginas específicas.
• operación de disparo: En la clase de aplicaciones Gestión de tareas, se utiliza para a?adir nuevas tareas.

Formas de a?adir un botón flotante

Nota: Los botones flotantes son plantillas, no widgets ni elementos normales. Se utilizan en el WordPress A?ádelo en el backend, no en el Elementor directamente en el editor.

A continuación se describen los pasos para a?adir.

A?adir un botón flotante: Pasos completos

A continuación se muestra un ejemplo de creación de un botón flotante de "Chat con Atención al Cliente". Este botón se implementa basándose en la plantilla de botón flotante de Elementor.

?? llamar la atención sobre algoBotones flotantes: los botones flotantes deben utilizar una plantilla preestablecida y, aunque es posible personalizar el contenido, no es posible crear una nueva plantilla desde cero.

Paso 1: Crear una plantilla

Los botones flotantes se basan en plantillas, por lo que primero debe crearse una plantilla.

• Regístrese WordPress Entre bastidores:Plantillas > Botones flotantes(Plantillas > Botones flotantes)

• A la derecha se abrirá el panel Crear elementos flotantes.

?? Consejo: Una vez creado el primer elemento flotante, puedes seguir a?adiendo más botones flotantes en cualquier momento haciendo clic en Plantilla > Nuevo.

• Haga clic en [A?adir nuevo elemento flotante] (A?adir nuevo elemento flotante)

• La página abrirá la galería de plantillas y cambiará automáticamente a la categoría "Botones flotantes".

• Pasa el ratón por encima de tu plantilla favorita y haz clic en [Insertar

• La plantilla se cargará en el Elementor En el lienzo del editor

?? Recordatorio: los visitantes de tu sitio sólo verán inicialmente el icono de Messenger. Sólo al hacer clic se expandirá la interfaz completa del botón flotante.

Paso 2: Editar el contenido del botón flotante

Diferentes plantillas proporcionan diferentes elementos de configuración, el siguiente es un flujo de configuración de ejemplo:

• Configurar una cuenta de atención al cliente para recibir chats
  • En el panel, busque el Nombre de usuarioIntroduzca el número de cuenta del servicio de atención al cliente desde el que se recibirá el diálogo.
  • Cuando el visitante haga clic en el botón de chat, el mensaje se enviará a la cuenta

?? ?Quieres aprender a obtener nombres de usuario para apps sociales? Consulta el documento oficial "?Cómo puedo crear enlaces inteligentes desde mis widgets?".

• Configurar el nombre del servicio de atención al cliente que aparece en la barra superior
  • Abra la configuración de la barra superior.
  • Introduzca en el campo [Nombre]:Alex Smith

• Establecer apodos en las burbujas de mensajes
  • Abra la configuración de la burbuja de mensajes.
  • Introduzca en el campo [Nombre]:Alex

• Ajustar estilos y formas
  • Cambie a la pesta?a Estilo.
  • Abra la configuración del buzón de chat.
  • A través del menú desplegable "Esquinas" seleccione "orbicular" para cambiar la forma del cuadro de chat

• Ajustar la posición de los botones flotantes
  • Cambie a la pesta?a Avanzado.
  • Ajustes"Posición horizontal"paraIzquierda
  • Ajustes"Posición vertical"paraCentro

• Una vez finalizada la edición, haga clic en [Publish] (Publicar) en la esquina superior derecha

Paso 3: Configuración del intervalo de visualización de los botones flotantes (Elementor Pro)

Elementor Pro Los usuarios pueden establecer en qué páginas se muestran los botones flotantes. La configuración recomendada esvisualización en todo el sitiopara utilizar el botón de acción en cada página.

corto

botón flotanteLos botones flotantes no son sólo un elemento de dise?o, sino también una característica importante que ayuda a los usuarios a completar acciones de forma eficaz. Ya sea para aumentar la interacción, ofrecer asistencia rápida o mejorar la funcionalidad general de una página, los botones flotantes tienen un significado real.

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