Comment créer des en-têtes et des pieds de page personnalisés avec Elementor ?

Vous n’aimez pas la façon dont votre thème WordPress actuel gère l’en-tête ou le pied de page principal ?

Dans ce guide, nous vous expliquons comment créer des en-têtes et des pieds de page personnalisés avec Elementor,  étape par étape, et sans compétences de codage requises.

Pourquoi Elementor ?

Pourquoi Elementor ?

Elementor est mon plugin de création de page préféré pour WordPress et, en fait, l’un des meilleurs outils que vous pouvez utiliser pour personnaliser votre site ou blog WordPress sans savoir coder.

Elementor est également votre meilleur pari si vous n’aimez pas l’apparence de votre en-tête ou pied de page actuel, mais que vous ne voulez pas non plus changer complètement votre thème.

Cliquez ici pour obtenir Elementor Pro (et bénéficier jusqu’à 20% de réduction !)

Ce dont vous avez besoin pour créer des en-têtes et des pieds de page personnalisés avec Elementor

Deux choses:

  • Le plugin principal Elementor – le gratuit
  • Elementor Pro – la mise à niveau premium en plus de l’édition gratuite d’Elementor

Pour obtenir la version Pro, vous devez acheter une license.

La version de base d’Elementor Pro (pour un site) coûte 59 $ / an, mais c’est de l’argent bien dépensé, car elle vous offre de nombreuses fonctionnalités intéressantes qui vont au-dessus de vos en-têtes ou pieds de page. Vérifiez-le.

1. Installez Elementor gratuit et pro

Le processus d’installation d’Elementor gratuit est comme n’importe quel autre plugin:

  • Accédez simplement à votre wp-admin → Plugins → Ajouter un nouveau, et entrez «Elementor» dans la case.
  • Installez et activez.

Pour installer le module complémentaire pro, vous devez d’abord vous rendre sur Elementor.com et acheter un abonnement. Après cela, vous pourrez télécharger le module complémentaire à partir de votre profil client.

Vous devez également générer une nouvelle clé API pour votre copie d’Elementor Pro.

Une fois que vous l’avez récuperé dans votre espace client, revenez à votre wp-admin et passez à Plugins → Ajouter un nouveau encore une fois.

Ensuite, téléchargez l’archive Elementor Pro manuellement, procédez à son installation et à son activation. Cela fait, à partir de la barre latérale principale de wp-admin, accédez à Elementor → Licence. Entrez votre code de licence ici. Elementor et Elementor Pro sont maintenant actifs!

2. Créez un modèle d’en-tête ou de pied de page vide

Dans la barre latérale wp-admin, accédez à Modèles puis Constructeur de thème

Vous aurez ensuite une interface sur laquelle vous pouvez choisir différents types de modules. Cliquez sur la section que vous voulez modifier ou le type de modèle que vous voulez créer.


C’est là que le plaisir commence! Vous verrez le lancement d’Elementor et vous pourrez vous mettre au travail. Pour accélérer les choses, Elementor vous montrera une liste de modèles d’en-tête et de pied de page prêts à l’emploi.

Vous pouvez choisir l’un d’entre eux ou commencer à travailler sur votre propre en-tête ou pied de page à partir de zéro.

Le choix vous appartient.

modèles d'en-tête

Voici une vidéo qui résume tout ce processus

3. Définissez la disposition générale de votre en-tête / pied de page

Tout d’abord, pour créer des en-têtes et des pieds de page personnalisés avec Elementor, vous devez décider de la disposition principale de votre en-tête ou pied de page.

Lire aussi :   Que ce passe t-il lorsque que ma license Elementor Pro expire ?

Il n’y a aucune limitation concernant la conception ou ce que vous pouvez inclure dans vos en-têtes ou pieds de page.

Pour commencer, cliquez sur le bouton principal de personnalisation de votre en-tête pour voir le Mise en page section dans la barre latérale.
cliquez sur le bouton principal de personnalisation de votre en-tête pour voir le Mise en page section dans la barre latérale. 

Choisissez la structure qui semble la plus optimisée.

Définissez la disposition générale de votre en-tête / pied de page avec elementor

Si vous le souhaitez, vous pouvez également décider d’étirer la mise en page ou de définir une largeur fixe lorsque vous créez.

Les paramètres spécifiques ici dépendront de votre thème. Choisissez ce qui vous convient le mieux.
des en-têtes et des pieds de page personnalisés avec Elementor pro

4. Autres éléments 

Ajouter un logo

L’ajout d’un logo est une étape très simple, mais uniquement à condition que votre thème actuel gère le logo conformément aux directives officielles de WordPress.

Comment attribuer un logo dans n’importe quel thème WordPress Pour vous assurer que votre logo sera correctement défini, vous devez d’abord aller à Personnalisateur WordPress → Identifier le site et attribuez le logo à partir de là.

Une fois cela fait, Elementor sera en mesure de le récupérer correctement. Dans Elementor, choisissez le Logo du site bloquer dans la barre latérale. Mettez-le où vous le souhaitez. Il devrait récupérer automatiquement votre logo actuel.
Dans les paramètres, vous pouvez sélectionner le comportement du logo lorsque vous cliquez dessus, et également ajuster sa taille et son alignement.

Ajouter un menu

Prenez le Menu de navigation block de la barre latérale Elementor et faites-le glisser là où vous le souhaitez dans l’en-tête.

Voici les principaux éléments à ajuster:

  • Menu – choisissez le menu spécifique que vous souhaitez présenter (vous pouvez choisir parmi ce que vous avez défini Apparence → Menus).
  • Mise en page – Horizontal, vertical ou déroulant
  • Aligner – gauche, centre, droite ou étirer pour remplir toute la zone disponible
  • Liens – comment vous souhaitez mettre en évidence le lien actif
  • Animation – comment vous voulez que le pointeur apparaisse

Ajouter un champ de recherche

Pour finaliser ma conception, je vais sélectionner le formulaire de recherche et le glisser sur la colonne de droite de ma conception d’en-tête.

Quelques options intéressantes là-bas:

  • Design – Classique, minimal, plein écran
  • Espace réservé – peut laisser vide, ou y mettre quelque chose comme «recherche»
  • Alignement, Taille – les deux sont assez explicites

Ajouter d’autres éléments supplémentaires

Il existe également quelques autres blocs que vous pouvez utiliser pour déterminer comment créer des en-têtes et des pieds de page personnalisés avec Elementor.

Vous pouvez les expérimenter librement pour obtenir l’effet que vous désirez.

Elementor vous permet également de mettre n’importe quel autre bloc Elementor dans vos en-têtes ou pieds de page. Cela inclut du texte personnalisé, des images, des icônes, tout ce qui peut améliorer encore plus votre en-tête.
Ajouter d'autres éléments supplémentaires avec elementor

5. Publiez votre en-tête / pied de page

La dernière chose à faire est de publier votre création sur le site et de l’affecter pour remplacer votre en-tête / pied de page par défaut à l’échelle du site ou simplement sur des pages spécifiques.

Il existe de nombreuses possibilités.

Pour ce faire, cliquez sur le bouton principal PUBLIER bouton dans Elementor. Vous verrez une fenêtre contextuelle vous demandant où vous souhaitez afficher votre nouvel en-tête ou pied de page.

conditions
La condition la plus élémentaire est “Site entier” :

Site entier
Vous pouvez également expérimenter ce paramètre et distinguer des pages individuelles, des articles, des catégories, etc. Par exemple, voici une condition pour que le nouvel en-tête n’apparaisse que sur la page Contact :

uniquement sur contact
Une fois terminé, cliquez sur SAUVEGARDER ET FERMER. Votre nouvel en-tête ou pied de page est maintenant en ligne!

Prêt à créer vos en-têtes et pieds de page personnalisés avec Elementor?

J’espère que ce tutoriel vous a été utile et que vous êtes déjà sur la bonne voie pour un nouvel en-tête ou pied de page génial!

Si vous avez des questions, n’hésitez pas à les poser dans les commentaires ci-dessous.

Nous avons également d’autres contenus liés à Elementor sur le blog pour vous aider à améliorer votre conception.