Bouton d'action flottant (FAB)est un élément d'interface utilisateur courant que l'on trouve généralement dans les sites web ou les applications mobiles. Il se caractérise parSurvoler le contenu de la pageLes boutons flottants sont généralement fixés dans un coin ou sur le bord de la page et restent visibles pour l'utilisateur lorsqu'il fait défiler la page. Cette conception rend les boutons flottants très pratiques pour un accès rapide aux actions ou fonctions importantes.

Principales caractéristiques des boutons flottants

1. position dominanteLes boutons flottants sont généralement situés dans le coin inférieur droit de la page, un emplacement très visible sur lequel il est possible de cliquer à tout moment, ce qui améliore grandement l'efficacité de l'utilisateur. Quel que soit l'endroit où l'utilisateur fait défiler la page, le bouton reste en place, et cette disposition fixe permet de garder le bouton dans la ligne de mire de l'utilisateur.
2. opération importanteLes boutons flottants sont souvent utilisés pour déclencher des actions importantes telles que l'envoi d'un formulaire, l'ouverture d'une session de chat, l'ajout d'un nouveau contenu ou la navigation vers une page spécifique. En raison de leur position proéminente et de leur état fixe, les boutons flottants sont souvent utilisés pour les fonctions les plus centrales d'un site web afin de s'assurer que les utilisateurs ne manquent pas ces actions critiques.
3. Promotion de la conception des matériauxLes boutons flottants sont fortement recommandés par les lignes directrices Material Design de Google. Ce style de conception met l'accent sur la simplicité et l'intuition, avec des animations de boutons et un retour visuel soigneusement con?us pour offrir une meilleure expérience à l'utilisateur.
4. Affichage des ic?nesLes boutons flottants utilisent généralement une ic?ne simple pour indiquer leur fonction, par exemple "plus" pour ajouter un nouvel élément, "crayon" pour modifier le contenu, "[...]".Bulles de conversation"est utilisé pour initier un dialogue. Cette iconisation n'est pas seulement esthétique, elle communique aussi intuitivement l'objectif du bouton.
5. états multiples et effets d'interactionBoutons flottants : Les boutons flottants ont plusieurs états d'interaction, tels que par défaut, appuyé, focalisé et désactivé. Chaque état est accompagné d'un retour visuel qui aide l'utilisateur à comprendre l'état actuel du bouton et à savoir s'il peut être cliqué.

Cas d'utilisation courants des boutons flottants

1. Contacts avec les clientsLes services à la clientèle : Par exemple, un fleuriste nouvellement ouvert pourrait ajouter un bouton flottant à son site web qui permet aux utilisateurs de contacter un représentant de la clientèle à tout moment pour obtenir de l'aide ou pour des questions relatives à l'achat. Ce bouton est toujours visible, quelle que soit la page sur laquelle se trouve l'utilisateur, et le dirige rapidement vers une communication en temps réel avec le service clientèle.
2. Création de contenuDans certaines applications (comme les clients de messagerie ou les applications de prise de notes), les boutons flottants peuvent être utilisés pour créer rapidement un nouveau contenu, comme la rédaction d'un nouvel e-mail ou l'ajout d'une nouvelle note.
3. navigateurDans certaines interfaces d'applications complexes, des boutons flottants peuvent être utilisés pour aider les utilisateurs à naviguer rapidement vers des parties spécifiques de l'application. Par exemple, en cliquant sur un bouton, vous pouvez accéder directement à la page des paramètres personnels de l'utilisateur.
4. Gestion des tachesDans les applications de gestion des taches, les boutons flottants sont souvent utilisés pour ajouter de nouvelles taches ou lancer d'importantes fonctions de gestion de projet.

Comment ajouter un bouton flottant

Voici un guide étape par étape sur la fa?on d'ajouter des boutons flottants à votre site web WordPress. Cet article est basé sur Plugin ElementorExemple de création et de personnalisation d'un bouton flottant.

étape 1 : Créer un modèle de bouton flottant

Les boutons flottants étant basés sur des modèles, un modèle doit être créé ou sélectionné.

1. Naviguer vers la section des modèlesPour cela, il faut se connecter au backend de WordPress et se rendre dans la rubrique "modèle">"bouton flottant".

2. Création d'un nouveau modèle: cliquez "Ajouter un nouveau bouton flottant"Boutons. Le système ouvre la bibliothèque de modèles et affiche une liste des modèles de boutons flottants disponibles.

3. Sélectionnez un modèlePour les boutons flottants : Parcourez la bibliothèque de modèles, sélectionnez un modèle de bouton flottant qui répond à vos besoins, passez la souris sur le modèle et cliquez sur ".baton".

4. Modification du modèle après l'insertionLe modèle sera inséré dans l'éditeur Elementor et vous pourrez commencer à modifier le contenu et les styles du modèle.

Pour sélectionner davantage de modèles, vous devez passer à la version Elementor ProVersion.

étape 2 : Personnalisation des boutons flottants

Dans l'éditeur, certains aspects des boutons flottants peuvent être personnalisés selon les besoins.

1. Modifier les informations sur l'utilisateurDans le champ Nom de l'utilisateur, saisissez le nom de l'agent du service clientèle qui répondra à l'utilisateur.Alex Smith". Lorsqu'un utilisateur lance un chat, le message est envoyé à l'agent du service clientèle désigné.

2. Modifier le style des boutonsStyle : En cliquant sur l'onglet Style, vous pouvez ajuster la forme, la couleur, la bordure, etc. du bouton. Par exemple, la forme du bouton peut être ronde pour correspondre au style général du site web.

3. Réglage de la position du boutonBouton flottant : Cliquez sur l'onglet Avancé pour modifier la position du bouton flottant sur la page. Vous pouvez choisir de fixer le bouton sur le c?té gauche ou droit de la page et ajuster sa position verticale et horizontale selon vos besoins.

4. Publier des boutons flottantsUne fois les réglages terminés, cliquez sur le coin supérieur droit de l'écran "poste"Votre bouton flottant appara?tra sur le site web.

étape 3 : Définir les conditions d'affichage du bouton flottant

Pour les utilisateurs d'Elementor Pro, vous pouvez également définir les conditions d'affichage du bouton flottant afin de contr?ler l'endroit où il est affiché sur le site.

1. Réglage des conditions d'affichageAvant de publier, vous serez invité à définir les conditions d'affichage du bouton flottant. Par exemple, vous pouvez choisir de faire appara?tre le bouton sur toutes les pages du site, ou seulement sur certaines pages ou certains types d'articles.
2. Enregistrer et publierUne fois les réglages terminés, cliquez sur Enregistrer et publier et le bouton flottant appara?tra sur le site selon vos conditions.

résumés

Les boutons flottants sont un outil important pour améliorer l'expérience utilisateur d'un site web. En pla?ant les actions clés à un endroit visible et fixe, les boutons flottants peuvent aider les utilisateurs à effectuer des taches plus rapidement, améliorant ainsi l'interactivité du site et la satisfaction de l'utilisateur. Grace à une utilisation et une personnalisation appropriées, les boutons flottants peuvent devenir un élément crucial de la conception d'un site web.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨詢：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.