É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.

Sommaire

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 :

sticky element fixe elementor

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 : 

sticky element fixe elementor

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 : 

sticky element fixe elementor

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 :

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.

Elements responsive mobile SEO

Partagez le guide Elementor

Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur reddit