Fixer l’entête en haut de page (sticky header)

Tutoriel permettant de bloquer son menu en haut avec Elementor PRO
SOMMAIRE

ETAPE 1 : Créer une nouvelle page

Pour l’exemple, partons sur une nouvelle page !

Pour fixer une entête en haut de page, vous pouvez passer sur le modèle de page « Elementor Canevas » en cliquant sur la roue crantée en bas à gauche « Réglages », supprimant ainsi le Header et le Footer de votre thème.

Changer de modèle de page avec Elementor
Gestion des modèles de page via Elementor

ETAPE 2 : Créer une section avec 2 colonnes

Créez une nouvelle section en cliquant sur le bouton + Rouge sur le coté droit de votre écran. Sélectionnez une section avec 2 colonnes par exemple pour ajouter le logo dans la première et le menu dans la seconde.

Ajouter une nouvelle section avec 2 colonnes avec Elementor
Nouvelle Section > 2 colonnes

ETAPE 3 : Ajouter le logo et le menu

Grâce aux modules du constructeur de pages, ajoutez votre logo (module image) dans la colonne de gauche et le widget « Menu de navigation » dans la colonne de droite.

Vous pouvez adapter la largeur de la colonne contenant votre logo (généralement plus petit que le menu) en modifiant la « largeur de colonne » à 25% par exemple.

Option permettant de paramétrer la largeur d'une colonne Elementor
Colonne > Mise en page > Largeur de colonne

ETAPE 4 : Epingler la section en haut

Une fois votre section paramétrée, nous allons pouvoir la bloquer en haut de page la rendant visible même en scrollant vers le bas.

Pour cela, rendez-vous sur l’onglet « Avancé » en modifiant votre section. Puis, dans « Effets de mouvement », sélectionnez « En haut » dans le champ « Epingler ».

Il est possible de désactiver cet épinglage sur mobile en décochant « Mobile » dans le champ « Epinglage Actif »

N’oubliez pas de sauvegarder votre travail et de tester.

Option permettant de bloquer une section au scroll avec Elementor
Section > Avancé > Epingler en Haut

Conseil Bonus

Si vous souhaitez ajouter votre entête épinglé en haut (sticky header) sur tout le site, il est préférable de créer un modèle "Header". Cette solution vous permettra de créer qu'une seule fois votre header : Pratique en cas de changements ultérieurs !

Concepteur de site web freelance entre Saint Etienne et Lyon

Spécialisé dans l’utilisation d’Elementor depuis 2019, je vous apporte une aide personnalisée lors de la création de votre site web.

Retrouvez tous mes tutos Elementor

Blocage Elementor

30 min pour vous aider

Vous n’avez pas la solution pour faire ce que vous souhaitez sur Elementor ou WordPress lors de la création de votre site ?
Je vous propose de vous aider ou de vous conseiller gratuitement afin d’avancer sereinement sur votre projet.