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

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é.😉​

Créer des headers et footers avec Elementor Header & Footer Builder

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.

Configuration du modèle de header ou de footer Elementor

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

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

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

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.

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

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. 😠​

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

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.

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.

Après avoir créé le header, pensez au footer Elementor…

💡 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 ?