Voulez-vous savoir comment créer un bouton flottant avec le constructeur de pages Elementor ? Un bouton flottant est celui qui apparaît devant toutes les autres informations de l'écran. La plupart des propriétaires de sites Web incluent un bouton flottant actionnable qui dirige l'utilisateur vers un objectif spécifique, comme s'abonner à une liste de diffusion ou parcourir une page de boutique. les réseaux sociaux, entre autres

Vous pouvez rapidement créer un bouton flottant pour votre site Web avec Elementor de différentes manières. Dans ce tutoriel, nous allons vous montrer comment le faire de la manière la plus simple possible en utilisant le constructeur de pages Elementor .

Créer un bouton flottant dans Elementor

Ici, nous allons configurer le z-index pour construire notre bouton flottant. En utilisant la version gratuite d'Elementor, vous pouvez créer un bouton flottant pour une page spécifique en suivant cette procédure. Si vous souhaitez ajouter le bouton flottant à l'ensemble de votre site, vous devez ajouter manuellement le bouton à chaque page si vous utilisez la version gratuite d'Elementor.

Maintenant, ouvrez l'éditeur Elementor et accédez à la page où vous souhaitez ajouter le bouton flottant. Vous avez la possibilité de créer une nouvelle page ou d'en modifier une existante. Pour ajouter une section, cliquez sur l'icône "+" et sélectionnez la mise en page à une seule colonne.

Ajoutez le widget de bouton à votre colonne nouvellement créée à partir du panneau de widgets.

Vous devez maintenant choisir l'action du bouton. Dans ce cas, nous utilisons le bouton pour accéder à l'URL de la page de la boutique. Pour ce faire, accédez au champ du lien et ajoutez le lien à la page. L'emplacement du bouton peut être modifié à l'aide de l'option d'alignement. Faites en sorte que le bouton soit aussi petit que possible.

Notre bouton est maintenant prêt à flotter lorsqu'un utilisateur fait défiler la page. Pour cela, allez dans l'onglet Avancé et sélectionnez l'option Mise en page. Définissez la largeur et la position sur Inline (Auto). Vous devez également configurer les orientations Horizontale et Verticale, ainsi que le décalage.

Vous devez maintenant spécifier le z-index pour rendre le bouton toujours flottant. Remplissez l'emplacement de l'index z avec 800. Cela fera toujours flotter le bouton.

Vue finale

Voici à quoi ressemble notre conception finale.

Emballer

La fonctionnalité Floating Elementor Elements a piqué notre intérêt. Il aide à la résolution rapide des problèmes de conception. Nous pensons que cela aura le même effet sur vous. Si oui, partagez votre design dans la zone des commentaires. Nous voulons diffuser votre travail partout dans le monde. Consultez également nos autres tutoriels elementor .