Élément fixe sur Elementor : sticky elements
Un éléments fixe Elementor ou sticky element est un éléments dont la position est fixe par rapport à l’écran.
Peu importe que l’utilisateur navigue sur la page, l’élément garde la même position absolue par rapport à l’écran.
On parle de position fixe.
C’est utile par exemple pour faire un bouton pour retourner en haut de la page.
Sur Elementor version gratuite, les éléments fixes ne peuvent être que des Widgets.
Rendre un élément fixe Elementor (ou sticky element) :
Pour rendre un élément fixe sur Elementor ou sticky Element, il suffit de cliquer sur l’élément puis d’aller dans Avancé > Positionnement :
C’est ici que l’on va pouvoir rendre notre élément fixe avec Elementor :
- Sous Position : choisissez Fixe
- Orientation horizontale : sélectionnez VW ou % et réglez la position sur l’axe horizontal
- Orientation verticale : sélectionnez VH ou % et réglez la position sur l’axe vertical
Mettez votre élément fixe Elementor au premier plan de votre page
Les éléments fixes peuvent être masqués par d’autres éléments de la page comme sur cet exemple :
Réglez l’index-z si l’élément fixe Elementor (sticky) est masqué.
Pour faire passer un élément devant un autre il suffit d’aller régler l’index-Z.
Dans Avancé > Index Z : faites monter la valeur jusqu’à ce que l’élément passe devant celui qui le masque :
En utilisant la position fixe et en la réglant par rapport à la page, on va pouvoir placer des éléments flottant sur notre page.
Les éléments fixes ou Sticky elements que l’on va généralement utiliser sur Elementor sont :
- Des boutons de réseaux sociaux
- Un bouton pour revenir en haut de la page
- Un menu flottant
Optimiser votre élément fixe Elementor pour le mobile
Faites cependant bien attention a la version mobile de votre site.
Un element fixe Elementor a tendance à être mal adapté.
Dans ce cas vous pouvez choisir de ne pas afficher un élément fixe (sticky) sur mobile en allant dans
Avancé > Responsive > Masquer sur mobile.
Partagez le hub Elementor :