Créer un header ou un footer avec la version gratuite d’Elementor

Créer un header ou un footer avec la version gratuite d’Elementor
7 mn de lecture

La version gratuite d’Elementor est sympa, mais pour pouvoir créer un header ou un footer personnalisé ou importer des modèles, il vous faut la version pro ou bien modifier les fichiers header.php et footer.php.

Qu’à cela ne tienne ! Utilisez le plugin Elementor Header & Footer Builder et le tour est joué.

Voilà un rapide tuto qui vous permettra de laisser libre cours à votre créativité.😉​

elementor header footer builder plugin pour créer un header ou un footer avec elementor version gratuite

Elementor Header & Footer Builder est un plugin gratuit qui vous permet de créer une mise en page avec Elementor et de la définir comme Header, Footer et également comme bloc. Il fonctionne avec la plupart des thèmes.

Installation et activation des plugins

Installez et activez Elementor et le plugin Elementor Header & Footer Builder.

Dans le cas où après l’activation du plugin, vous voyez un avis vous indiquant que votre thème n’est pas pris en charge. Allez dans Apparence/Elementor Header & Footer Builder/Prise en charge du thème et testez la méthode 2.

thème incompatible Elementor header footer builder

Allez à présent dans le menu Apparence de WordPress, puis cliquez sur Elementor Header & Footer Builder. Dans la fenêtre qui s’affiche, et cliquez alors sur “Ajouter un nouveau”.

Donnez un nom à votre modèle, puis choisissez :

  • Le type de modèle que vous souhaitez créer (en-tête/pied de page/avant le pied de page/bloc)
  • Les pages sur lesquelles vous voulez l’afficher
  • Le rôle des utilisateurs qui verront le header (tous, c’est mieux)

Une fois cela paramétré, cliquez sur “publier”, puis “Modifier avec Elementor”.

choisir type modèle pour créer un header ou un footer elementor
choix endroit d'affichage du header

Création du header Elementor

Ici, pour l’exemple, je vais créer un header.

Arrivé(e) dans Elementor, vous constaterez que le modèle est totalement vide. C’est à vous de le créer à partir de zéro.

Mais, heureusement, le plugin Elementor Header & Footer Builder intègre des widgets de base pour vous faciliter la tâche :

  • Image retina
  • Copyright
  • Menu de navigation
  • Titre de la page
  • Titre du site
  • Slogan du site
  • Logo du site
  • Recherche
  • Panier
widgets elementor header and footer builder

Avec le widget “logo du site”, vous pouvez, non seulement, intégrer automatiquement le logo que vous avez défini dans les paramètres de votre thème, mais aussi une image se trouvant dans vos médias en tant que logo. Afin que lors du clic sur l’image, vous atterrissiez sur la page d’accueil, il vous suffira d’indiquer l’URL de la page d’accueil dans le lien personnalisé.

image personnalisée logo du site header elementor

Pour le titre et le slogan du site, ils seront repris selon les indications que vous avez enregistrées dans WordPress, tout comme le titre de la page.

Si vous avez un site E-commerce avec WooCommerce d’installé, le panier affichera le nombre de produits ainsi que le montant total du panier.

Concernant le menu de navigation, il suffit d’indiquer, via la liste déroulante, le menu que vous désirez afficher dans le header. Ensuite, choisissez parmi les 4 dispositions disponibles (horizontal, vertical, étendu et volte-face). Enfin, n’oubliez pas de paramétrer votre menu mobile et ses icônes d’ouverture et de fermeture.

paramétrage menu header elementor

D’autre part, différentes options de mise en page et de style sont disponibles lors de l’ajout d’un formulaire de recherche.

formulaire recherche header elementor

Enfin, pour la création de votre footer personnalisé, un widget Copyright est disponible.Celui-ci propose des constantes pour afficher l’avis de copyright telles que [hfe_current_year] et [hfe_site_title].

Il ne vous reste plus qu’à créer votre header à votre image à présent.

Et pourquoi pas, créez aussi une top bar en mettant une section interne dans la section.😉

Une fois votre création finalisée, n’oubliez pas de l’enregistrer !

Import de templates de headers et footers Elementor préconçus

Que diriez-vous d’importer un header déjà préconçu ?

C’est sympa et il y a moins de travail à faire, mais voilà, force est de constater qu’Elementor, encore une fois, ne nous facilite pas la tâche dans sa version gratuite.

En effet, tous les blocs de headers ne sont disponibles que pour la version pro. 😠​

créer header ou footer avec blocs elementor

Mais, j’ai une solution : importer des blocs de headers via Templately.

Pour ce faire, installez Templately et importez le bloc que vous souhaitez comme expliqué et hop, c’est terminé.

import header templately
créer un header elementor par import

Bonus : rendre le header sticky dans Elementor gratuit

Je ne sais pas si vous êtes comme moi, mais, j’aime créer des sites avec un header fixed, c’est-à dire un header qui nous suit au défilement de la page.

Alors, voilà comment rendre le header sticky en 2 minutes.

En premier lieu, positionnez-vous sur la section du header. Puis, rendez-vous sur l’onglet avancé. Dans la case ID de CSS, indiquez un terme pour nommer votre section. Ici, je l’ai intitulé myheader. Enregistrez votre travail.

créer header footer fixe elementor free

Ensuite, allez dans votre tableau de bord Apparence/personnaliser/CSS additionnel et ajoutez ce code en prenant soin de remplacer “myheader” par le terme que vous avez choisi pour l’ID de CSS de votre section.

#myheader.elementor-section{
position: fixed;
left: 0;
width: 100%;
}

Mettez à jour et vous pourrez constater que votre header est devenu collant.

💡 Dans cet article, je n’ai parlé que de la création d’un header, mais vous pouvez également concevoir un footer de la même manière.

D’autre part, si vous souhaitez créer des blocs personnalisés, c’est aussi possible. En ce cas, il vous suffira de copier-coller à l’endroit souhaité le code court généré instantanément.

Pour conclure, avoir la possibilité de créer ou d’importer des templates de header ou de footer avec la version gratuite d’Elementor est vraiment top.

Avez-vous déjà utilisé ce plugin pour personnaliser vos sites ?

Si oui, qu’en pensez-vous ?

Soumettre un commentaire 💬

guest
30 Commentaires
Commentaires en ligne
Afficher tous les commentaires