• Votre panier est vide.

Comment créer un header sur elementor

Comment créer un header sur Elementor
?

Vous avez toujours voulu créer une en-tête personnalisée pour votre site web WordPress ? Agencer les différents éléments de votre menu à votre manière et ajouter d’autres éléments ? Sachez qu’avec Elementor, c’est possible ! C’est d’ailleurs ce que nous allons voir dans cet article : la création d’un header sur Elementor de A à Z. Mais vous auriez tout aussi bien pu faire la même chose pour un footer (une section en pied de page).

Pré-requis et premières étapes pour créer un header

Pour pouvoir créer une en-tête personnalisée, la version gratuite du plugin Elementor ne suffira pas. Il faudra vous équiper d’une licence Elementor Pro du page builder. En revanche, quel que soit votre thème, vous pourrez suivre ce tutoriel. Bien que Elementor conseille de travailler avec un thème optimisé pour Elementor. De plus, lorsque vous utilisez une licence pro, utiliser un thème très enrichi perd de son intérêt.

Voici ensuite les différentes étapes à suivre si vous voulez savoir comment créer un header sur Elementor.

Pour éditer un header à partir d’un template, sélectionnez le modèle de votre choix. Vous pouvez à présent effectuer des modifications, section par section, de façon à personnaliser votre en-tête.

Créer un header sur Elementor

Construire un header de A à Z sur Elementor

Nous allons à présent voir comment créer un header sur Elementor en partant de zéro. Le principe est assez simple, vous allez travailler avec le même constructeur de thème (page builder) que pour une page web classique. Néanmoins, Elementor vous propose des éléments spécifiques aux headers :

Cependant, vous pouvez rajouter tous les éléments que vous souhaitez pour un header vraiment personnalité. Si par exemple, vous désirez ajouter un bouton, un onglet, un compte à rebours ou encore les coordonnées de votre entreprise sous forme de liste, c’est possible !

De même, vous avez de nombreuses options pour la mise en forme de vos éléments. Vous pouvez créer des colonnes de largeurs différentes, créer plusieurs lignes, etc.

Vous pouvez également modifier la conception et le design de votre en-tête pour sa version mobile, et ainsi adapter sa mise en forme.

Définir les éléments dynamiques de votre header

Continuons maintenant de voir comment créer un header sur Elementor avec l’utilisation des éléments dynamiques. Cela signifie que vous allez pouvoir définir l’emplacement de l’élément dynamique lors de la construction de votre header, mais que le contenu même de l’élément se définit ailleurs. C’est le cas notamment, du logo du site web qui se définit directement dans l’identité du site WordPress. Mais c’est aussi le cas du menu de navigation.

En effet, lorsque vous ajoutez un menu de navigation, vous pouvez choisir quel menu vous souhaitez utiliser pour ce header spécifique. Cela signifie que vous pouvez créer plusieurs menus (depuis le menu Apparence > Menus) et créer un header spécifique par menu si cela est pertinent pour votre site WordPress.

Définir des conditions d'affichage du header

L’un des énormes avantages du plugin Elementor, c’est que l’on va pouvoir décider d’afficher un header sur certaines pages uniquement par exemple. En effet, maintenant que vous savez comment créer un header sur Elementor, il est temps d’ajouter des conditions.

Lorsque vous avez terminé d’éditer votre header, cliquez sur la flèche verte à côté du bouton Publier en choisissant “Conditions d’affichage” .

Vous pouvez simplement choisir de la définir sur tout le site, mais aussi ajouter des règles plus spécifiques. Quelques exemples :

Comment créer un header sur Elementor Pro

Vous aimez ? Partagez-le avec vos amis !

Facebook
Email
Twitter
LinkedIn
Pinterest

Vous avez aimé apprendre comment créer un header sur Elementor ? Si, vous souhaitez apprendre à créer un footer personnalise, à utiliser Elementor, WordPress et bien plus encore, n’hésitez pas à vous abonner !

Tous les cours avec les formations en ligne !

Elementor
WordPress
PowerPoint
3 février 2022
Logo Formafly pour apple
© FORMAFLY 2021 | COURS EN LIGNE ET FORMATION | TOUS LES DROITS RÉSERVÉS | CGV - CGU | INFORMATIONS LÉGALES | VIE PRIVÉE | AFFILIATION