Souhaitez-vous créer un bouton flottant avec l’index Z sur Elementor ?
Nous sommes sûrs que vous êtes familier avec le bouton qui apparaît devant tout le contenu de l’écran et généralement avec une forme circulaire et une icône au centre. Eh bien, c’est le bouton d’action flottant.
Le bouton d’action flottant peut déclencher une action ou vous envoyer naviguer quelque part. Tels que les déclencheurs pour les emails, les réseaux sociaux, l’orientation des visiteurs à s’abonner à une chaîne, et bien d’autres.
Dans Elementor, il existe deux méthodes pour créer un bouton d’action flottant, elles sont les suivantes :
- En définissant Z-Index
- En créant une fenêtre contextuelle -Popup-
Dans ce tutoriel nous vous montrerons uniquement comment créer un bouton d’action flottant en définissant l’index Z. Et nous utiliserons la version pro pour y arriver.
Mais avant découvrez : Comment installer Elementor sur WordPress
Comment créer le bouton d’action flottant dans Elementor
Vous pouvez utiliser la version gratuite d’Elementor pour créer le bouton d’action flottant avec cette méthode. Mais, vous devez coller le bouton que vous avez conçu sur chaque page où vous souhaitez que le bouton s’affiche sur votre site web.
Avec Elementor Pro, vous pouvez également accéder à la fonctionnalité CSS personnalisée, que nous utiliserons dans ce tutoriel.
Accédez à votre éditeur Elementor ; vous pouvez modifier votre contenu existant (pages, articles, etc…) ou en créer un nouveau. Dans ce tutoriel, nous allons modifier une page.
Tout d’abord, créez une nouvelle section avec une seule colonne. Sélectionnez le widget Bouton et faites-le glisser et déposez-le dans la zone d’édition à partir du panneau du widget. Ensuite, modifiez le bouton Texte et le lien.
Dans ce tutoriel, nous utiliserons le bouton comme déclencheur pour pousser les visiteurs à naviguer sur le site Web Elementor. Puis, sur l’option Alignement, réglez-le sur la droite et, enfin, modifiez la taille du bouton Sur Très Grand.
Comme vous pouvez le voir dans le GIF ci-dessus, ce bouton est stationnaire dans la section. Ensuite, nous allons le faire bouger au fur et à mesure que nous défilerons tout en le gardant à la même position.
Accédez à l’onglet Avancé. Dans le paramètre Mise en Page, définissez la largeur sur Inline (auto), définissez la position sur Fixe, définissez l’orientation horizontale sur la droite et ajustez le décalage comme vous le souhaitez.
Ensuite, nous allons définir l’essentiel dans cette méthode. Dans le champ Z-Index, entrez le nombre 9999 ; il rendra le bouton toujours devant (flottant).
Maintenant, il est temps de faire pivoter le bouton d’action flottant. Toujours sous l’onglet Avancé, accédez aux classes CSS du bloc Mise en page, puis écrivez rotate à l’intérieur.
Consultez également : Elementor : Présentation du meilleur Page Builder de WordPress
Après cela, accédez au bloc Custom CSS , puis collez le code suivant dans le champ :
.rotate.rotate
{transform: rotate(90deg);}Vous pouvez voir que le bouton vient de tourner, mais il y a un espace étrange entre le côté de l’écran. Alors, corrigeons-le en ajustant le décalage à -92
Enfin, nous allons faire une dernière petite touche pour ce bouton d’action flottant. Accédez au bloc Transformer, sélectionnez le SURVOL, accédez à l’option Décalage et définissez chaque option sur 7.
Il existe plusieurs options pour réaliser une certaine chose dans Elementor. En ce qui concerne le bouton flottant, il existe deux options que vous pouvez utiliser. Ici, nous avons couvert uniquement une méthode, l’autre méthode fera l’objet d’un autre tutoriel.
Lire aussi : Elementor : Comment migrer un site web WordPress
Si vous souhaitez avoir plus d’options de style, la création d’un bouton d’action flottant à l’aide du constructeur de Popup sera une meilleure alternative car vous aurez des options pour personnaliser le bouton ainsi que le comportement, comme le bouton de fermeture, la durée, l’animation d’entrée ou de sortie, etc…
Vous venez de réaliser facilement cette tâche. Prévisualiser juste votre travail sur tablette et smartphone en essayant de modifier les marges pour qu’elles correspondent à chaque périphérique.
Obtenez Elementor Pro Maintenant !
Conclusion
Voila ! C’est tout pour cet article qui vous montre comment appliquer un effet Zoom sur une carte de profil. Si vous avez des soucis sur comment y arriver faites-nous savoir dans les commentaires.
Cependant, vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress ou celui sur Divi : le meilleur thème WordPress de tous les temps.
Mais en attendant, partagez cet article sur vos différents réseaux sociaux.
…
