Ajouter des boutons flottants à votre site web avec Elementor

bouton flottant（Le bouton flottant, parfois appelé bouton d'action flottant (FAB), est un élément d'interface utilisateur qui plane sur une page web et qui est souvent utilisé pour guider les utilisateurs afin qu'ils effectuent des actions clés. Dans cet article, nous allons vous aider à comprendre la fonction principale du bouton flottant, les scénarios d'utilisation et vous expliquer les étapes à suivre pour l'ajouter.

Qu'est-ce qu'un bouton flottant ?

Les boutons flottants sont un élément d'interaction web courant, généralement fixé dans un coin ou sur un bord de la page et affiché en continu lors du défilement de la page.

Quelques-unes de ses principales caractéristiques sont énumérées ci-dessous :

• mettre en évidenceBoutons flottantsremise en suspensionAu-dessus du contenu de la page, toujours visible et sur lequel les utilisateurs peuvent cliquer à tout moment.
• opération importante: Généralement utilisé pour héberger des actions importantes telles que contacter le service clientèle, initier un chat ou ajouter un nouveau contenu.
• Style Material DesignLes lignes directrices Material Design de Google les normalisent, souvent avec des animations et un attrait visuel.
• reconnaissance des icônesLes boutons flottants contiennent généralement une icône, par exemple le plus pour "Ajouter", le crayon pour "Modifier", etc.
• l'interactivitéLes boutons peuvent afficher différents états en fonction des actions de l'utilisateur, comme par défaut, appuyé, focalisé ou désactivé, afin d'améliorer le retour d'information interactif.

Scénarios d'utilisation courante

Par exemple, Jan vient d'ouvrir un magasin de fleurs. Pour ne pas perdre de clients potentiels, elle a ajouté un bouton flottant qui permet aux visiteurs de contacter facilement le commerçant à tout moment, quelle que soit la page du site web qu'ils visitent.

Autres cas :

• Créer un nouveau contenuLes boutons flottants sont couramment utilisés dans les applications Mail ou Notes pour créer rapidement un nouveau contenu.
• Navigation rapideDans certains écrans, les boutons flottants permettent d'accéder à des zones ou à des pages spécifiques.
• opération de déclenchementDans la classe d'applications Gestion des tâches, il est utilisé pour ajouter de nouvelles tâches.

Comment ajouter un bouton flottant

Remarque : les boutons flottants sont des modèles, et non des widgets ou des éléments normaux. Ils sont utilisés dans la section WordPress L'ajouter dans le backend, et non dans le fichier Elementor directement dans l'éditeur.

Voici une description des étapes d'ajout.

Ajout d'un bouton flottant : étapes complètes

Voici un exemple de création d'un bouton flottant "Chat avec le service client". Ce bouton est implémenté sur la base du modèle de bouton flottant d'Elementor.

⚠️ attirer l'attention sur qqch.Les boutons flottants doivent utiliser un modèle prédéfini et, s'il est possible de personnaliser le contenu, il n'est pas possible de créer un nouveau modèle à partir de zéro.

Étape 1 : Créer un modèle

Les boutons flottants sont basés sur des modèles, il faut donc d'abord créer un modèle.

• s'inscrire WordPress Dans les coulisses, entrez :Modèles > Boutons flottants(Modèles > Boutons flottants)

• Le panneau Créer des éléments flottants s'ouvre sur la droite.

💡 Astuce : Une fois que vous avez créé votre premier élément flottant, vous pouvez continuer à ajouter d'autres boutons flottants à tout moment en cliquant sur Modèle > Nouveau.

• Cliquez sur [Ajouter un nouvel élément flottant] (Ajouter un nouvel élément flottant)

• La page ouvrira la galerie de modèles et passera automatiquement à la catégorie "Boutons flottants".

• Survolez votre modèle préféré et cliquez sur [Insérer

• Le modèle sera chargé dans le fichier Elementor Dans le canevas de l'éditeur

🔔 Rappel : les visiteurs de votre site ne verront initialement que l'icône Messenger. Ce n'est qu'en cliquant dessus que l'interface complète du bouton flottant s'étend.

Étape 2 : Modifier le contenu du bouton flottant

Les différents modèles fournissent des éléments de configuration différents ; voici un exemple de flux de configuration :

• Création d'un compte de service clientèle pour recevoir les chats
  • Dans le tableau de bord, recherchez la rubrique Champ du nom d'utilisateurSaisissez le numéro de compte du service clientèle à partir duquel le dialogue sera reçu.
  • Lorsque le visiteur clique sur le bouton "chat", le message est envoyé au compte.

📚 Vous voulez savoir comment obtenir des noms d'utilisateur pour les applications sociales ? Consultez le document officiel "Comment créer des liens intelligents à partir de mes widgets ?".

• Réglage du nom du service clientèle affiché dans la barre supérieure
  • Ouvrez les paramètres de la barre supérieure.
  • Entrez dans le champ [Nom] :Alex Smith

• Configurer des surnoms dans les bulles de messages
  • Ouvrez les paramètres de la bulle de message.
  • Entrez dans le champ [Nom] :Alex

• Ajustement des styles et des formes
  • Passez à l'onglet Style.
  • Ouvrez les paramètres de la boîte de dialogue.
  • Dans le menu déroulant "Coins", sélectionnez "orbiculaire"pour modifier la forme de la boîte de dialogue

• Ajuster la position du bouton flottant
  • Passez à l'onglet Avancé.
  • Paramètres"Position horizontale"pourGauche
  • Paramètres"Position verticale"pourCentre

• Une fois la modification terminée, cliquez sur [Publish] (Publier) dans le coin supérieur droit

Étape 3 : Définir la plage d'affichage des boutons flottants (Elementor Pro)

Elementor Pro Les utilisateurs peuvent définir les pages sur lesquelles les boutons flottants sont affichés. Le paramètre recommandé estaffichage sur l'ensemble du siteafin d'utiliser le bouton d'action sur chaque page.

court

bouton flottantLes boutons flottants ne sont pas seulement un élément de conception, mais aussi une caractéristique importante qui aide les utilisateurs à effectuer des actions de manière efficace. Qu'il s'agisse d'accroître l'interaction, de fournir une assistance rapide ou d'améliorer la fonctionnalité globale d'une page, les boutons flottants ont une réelle signification.

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.