La version gratuite d'Elementor est sympa, mais elle ne permet pas de créer un header ou un footer personnalisé. Pour pouvoir le faire, il vous faut la version pro ou bien modifier les fichiers header.php et footer.php.
Qu'à cela ne tienne ! Pour remédier à ce manque, utilisez le plugin Ultimate Addons for Elementor (Formerly Elementor Header & Footer Builder) et le tour est joué.
Voilà un article qui vous permettra de découvrir ce plugin pour enfin laisser libre cours à votre créativité. Et ce n'est pas tout ! Découvrez également comment importer des templates de headers et de footers pour Elementor ou rendre votre header sticky. 😉
Le plugin pour créer des headers et footers Elementor : Ultimate Addons for Elementor
Ultimate Addons for Elementor (Formerly Elementor Header & Footer Builder) est un plugin gratuit. Il permet de créer une mise en page avec Elementor et de la définir comme Header, Footer et aussi comme bloc.
💡Pour information, Ultimate Addons for Elementor (UAE) est le nouveau nom du plugin Elementor Header & Footer Builder (HFB) bien connu des aficionados d'Elementor.
Avec cette mise à jour, il n'y a pas que le nom du plugin qui a changé. Ultimate Addons for Elementor (Formerly Elementor Header & Footer Builder) offre de nouveaux widgets comme Info Card, Post Info, Breadcrumbs, Scroll to Top et Reading Progress Bar.
De plus, il possède à présent une option d'activation/désactivation des widgets qui permet d'accroitre la performance de votre site en désactivant les widgets inutilisés.
Installation et activation du plugin
En premier lieu, installez et activez Elementor. Puis, faites de même pour le plugin Ultimate Addons for Elementor.
Pour ce faire, accédez à votre tableau de bord WordPress > Extensions > Ajouter une extension. Puis, dans "Rechercher des extensions", utilisez le mot-clé "Ultimate Addons for Elementor". Cliquez alors sur "Installer maintenant" et enfin sur "Activer".
Une fois le plugin activé, vous le retrouverez dans le menu de WordPress sous le nom UAE. C'est par ce menu que vous pouvez désactiver les widgets dont vous ne vous servez pas. Et c'est aussi ici, que vous retrouverez vos Header & Footer créés sous Elementor.
Voyons à présent comment créer un header dans Elementor.
Création d'un header ou d'un footer avec Ultimate Addons for Elementor (Formerly Elementor Header & Footer Builder)
Configuration du modèle de header ou de footer Elementor
Allez dans le menu de WordPress > UAE > Elementor Header & Footer Builder. Et, dans la fenêtre qui s'affiche, cliquez sur "Ajouter nouveau".
Donnez un nom à votre modèle, puis choisissez dans les divers menus déroulants :
- Le type de modèle que vous souhaitez créer (en-tête, pied de page, avant le pied de page ou bloc personnalisé)
- Les pages sur lesquelles vous voulez l'afficher (pour que le modèle s'affiche partout, choisissez tout le site)
- Le rôle des utilisateurs qui verront le header (tous, c'est mieux 😉)
💡 "Activer la mise en page pour le modèle Elementor canevas ?" active un header ou un footer sur des pages qui n'en possèdent pas originellement. Cette option n'est à cocher que si vous souhaitez ajouter un header ou un footer spécifique à une page telle que la page maintenance de votre site.
Une fois cela paramétré, cliquez sur "publier", puis "Modifier avec Elementor".
Création et personnalisation du header ou du footer dans Elementor
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 Ultimate Addons for Elementor (Formerly Elementor Header & Footer Builder) intègre des widgets de base pour vous faciliter la tâche.
Pour la création du header ou du footer, les widgets suivants sont les plus appropriés :
- Retina Logo
- Menu de navigation
- Titre du site
- Slogan du site
- Logo du site
- Panier
- Recherche
- Copyright (pour afficher les informations de droit d'auteur dans le footer)
Insertion du logo, du titre et du slogan du site
Le widget "logo du site" permet d'intégrer automatiquement le logo que vous avez défini dans les paramètres de votre thème. Vous pouvez ajuster son alignement, la résolution de l'image et aussi lui ajouter une légende.
Si vous préférez utiliser une image se trouvant dans vos médias en tant que logo, c'est possible. En ce cas, activez l'interrupteur "image personnalisée". Ensuite, n'oubliez pas de choisir "URL personnalisée" pour le lien. Puis, renseignez l'URL de la page d'accueil pour atterrir sur la page d'accueil lors du clic sur l'image.
Sinon, à la place du widget "Logo du site", vous pouvez utiliser le widget "Retina Logo". Celui-ci vous permet d'afficher une version haute qualité du logo de votre site sur des écrans haute définition comme les écrans Retina, 4K et autres écrans ultra-HD. Le logo Retina a les mêmes options de personnalisation que le logo basique, à une chose près. Ici, vous devez télécharger deux images de logo :
- Le logo normal : l'image standard de votre logo
- Le logo Retina : l'image avec le double des dimensions du logo standard
Après, si le cœur vous en dit, ajoutez le titre et le slogan du site grâce aux widgets dédiés. Les informations seront reprises selon ce que vous avez indiqué dans WordPress.
Ajout du menu de navigation, du panier et de la recherche
Concernant le menu de navigation, utilisez le widget dédié. Puis, indiquez, via la liste déroulante, le menu à afficher dans le header. Si nécessaire, créez un bouton CTA sur le dernier élément du menu en choisissant "bouton" au lieu de "par défaut".
Ensuite, choisissez l'apparence du menu parmi les quatre dispositions disponibles (horizontal, vertical, étendu et volte-face) ainsi que son alignement. Si vous avez des sous-menus, sélectionnez l'icône, l'animation et l'action au clic souhaitées.
Après, n'oubliez pas de paramétrer votre menu mobile et ses icônes d'ouverture et de fermeture. Et pensez à en ajuster le responsive via les 7 points de rupture d'Elementor.
Si votre site est un site E-commerce avec WooCommerce d'installé, vous pouvez aussi utiliser le widget panier dans le header. Celui-ci affichera le nombre de produits ainsi que le montant total du panier.
Enfin, si besoin, intégrez une barre de recherche. Elle est totalement personnalisable et dispose de trois mises en page préconçues : boîte de saisie, boîte de saisie avec bouton ou simplement une icône.
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, ajoutez une couleur d'arrière-plan 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.
💡 Si le header recouvre une partie de la page, ajoutez un padding-top au site-content comme expliqué dans mon article pour créer un en-tête fixe pour le thème Astra gratuit sans extension.
Ajouter d'autres fonctionnalités à votre site
Ultimate Addons for Elementor est plus qu'un simple créateur de Header & Footer pour Elementor.
Il propose plusieurs widgets utiles pour la conception de vos pages.
- Titre de la page pour afficher dynamiquement le titre d'une page, d'un article ou d'une archive
- Breadcrumbs (fil d'Ariane) pour simplifier la navigation du visiteur et améliorer votre SEO
- Post Info pour afficher les métadonnées d'une publication (auteur, date et heure de publication, catégorie)
- Info Card pour présenter votre contenu de façon créative avec icône et bouton call to action
D'autre part, il permet également d'ajouter des fonctionnalités à votre site comme un bouton de retour en haut (Scroll to Top) ou encore une barre de progression de lecture (Reading Progress Bar). Vous ne les trouverez pas avec les autres widgets. Pour les activer et les personnaliser, vous devrez aller dans les réglages du site d'Elementor.
RIP Elementor Header & Footer Builder, welcome Ultimate Addons for Elementor
Pendant de nombreuses années, Elementor Header & Footer Builder était le plugin de référence pour créer des header et footer personnalisés avec la version gratuite d'Elementor.
D'ailleurs, cet article qui lui était dédié, avait été publié en juillet 2022.
Ultimate Addons for Elementor lui a succédé. Alors, aujourd'hui, 3 ans après, j'ai complètement réécrit l'article pour vous le faire découvrir. 😉
Pour conclure, la fonctionnalité première du plugin est restée. A savoir, la création d'en-tête et de pied de page avec Elementor. mais, le plugin s'est grandement enrichi :
- compatibilité avec tous les thèmes
- performance améliorée puisqu'il charge uniquement le code des widgets que vous utilisez
- widgets pour la création de pages et ajouts de fonctionnalités
En bref, l'essayer, c'est l'adopter !
Qu'en pensez-vous ?
Soumettre un commentaire 💬