É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

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 :

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.