Comment concevoir un en-tête personnalisé avec Elementor : guide complet

J'aimerais… pouvoir utiliser un en-tête personnalisé WordPress sur mon site Web sans avoir aucune compétence en codage ! 

Avez-vous déjà pensé à vous comme ça ? Sûrement, vous l’avez fait !

Eh bien… La bonne nouvelle est… oui, vous pouvez utiliser le générateur de pages Elementor pour créer un en-tête entièrement personnalisé.

Vous savez peut-être déjà que le Générateur de pages Elementor permet à un concepteur non-codeur de créer des pages WordPress entièrement uniques.

Ainsi, ici, dans cet article, vous obtiendrez le processus étape par étape pour comment concevoir un en-tête personnalisé avec le module complémentaire Elementor et ElementsKit.

Allons-y ! 

Pourquoi avez-vous besoin de concevoir un en-tête personnalisé Elementor

Concevoir un en-tête personnalisé avec Elementor dans un site WordPress offre de nombreux avantages, améliorant à la fois l'esthétique et la fonctionnalité. Voici 5 avantages clés d'intégrer un en-tête personnalisé dans votre site Web :

🚀 Image de marque et identité améliorées

La création d'un en-tête WordPress personnalisé avec Elementor vous permet d'adapter le design à l'identité de votre marque. Vous pouvez incorporer les couleurs, les logos et la typographie de la marque, offrant ainsi une apparence cohérente et professionnelle sur votre site. 

Cette cohérence contribue à établir et à renforcer l'identité de votre marque, rendant ainsi votre site Web plus mémorable pour les visiteurs.

✅ Expérience utilisateur améliorée (UX)

Un en-tête WordPress personnalisé bien conçu peut améliorer l'expérience utilisateur globale en rendant la navigation plus intuitif et convivial. 

Vous avez la possibilité d'organiser les menus de navigation, d'inclure des boutons d'appel à l'action et d'optimiser la mise en page pour une meilleure accessibilité. Ceci, à son tour, peut réduire les taux de rebond et encourager les visiteurs à explorer davantage de contenu sur votre site.

📱Conception réactive pour les appareils mobiles

Elementor vous permet de créer des en-têtes réactifs, garantissant une expérience transparente aux utilisateurs sur différents appareils, y compris les smartphones et les tablettes. 

Avec un en-tête personnalisé Elementor, vous pouvez optimiser la mise en page et le contenu spécifiquement pour les écrans plus petits et fournir une conception adaptée aux mobiles pour adapter différentes résolutions et orientations.

💰Opportunités de conversion accrues

La conception d'un en-tête WordPress personnalisé à l'aide d'Elementor vous permet de placer stratégiquement des éléments importants tels que des formulaires de contact, des barres de recherche ou des messages promotionnels à des endroits bien visibles. 

Cela peut mener à augmentation des taux de conversion car les visiteurs sont plus susceptibles de remarquer et d’interagir avec ces éléments. 

🎨 Flexibilité et contrôle de la conception

Elementor fournit une interface glisser-déposer, vous aurez donc un contrôle total sur la conception de votre en-tête sans avoir besoin de compétences approfondies en codage.

Cette flexibilité vous aide à expérimenter différentes mises en page, styles et dispositions de contenu jusqu'à ce que vous trouviez le meilleur. visuellement attrayant et fonctionnel En-tête Elementor pour votre site.

Comment concevoir un en-tête personnalisé avec Elementor : guide étape par étape

Pour créer et concevoir un en-tête personnalisé Elementor dans votre site WordPress, vous aurez besoin de deux plugins wordpress d'en-tête personnalisé ->

• Plugin Elementor
• Module complémentaire ElementsKit

Maintenant, nous allons vous montrer le processus étape par étape sur la façon de créer un en-tête personnalisé avec Elementor pour votre site Web WordPress.

Étape->1 : Ajouter un en-tête Modèle

Tout d’abord, connectez-vous à votre panneau de tableau de bord d’administration pour créer une conception d’en-tête WordPress personnalisée avec Elementor.

• Aller vers ElementsKit → Mes modèles → Cliquez sur « Ajouter un nouveau« . 

Étape->2 : Sélectionnez les options d'en-tête

Une boîte contextuelle s'ouvrira avec des options.

• Ajouter un Titre. Par exemple: En-tête personnalisé
• Sélectionnez le type → Entête
• Sélectionnez une condition → Site entier, Singulier ou Archive 
• Activez l'option d'activation
  • Cliquer sur "Modifier avec Elementor"

Vous pouvez désormais modifier votre aspect professionnel Élémentor section d'en-tête personnalisée en toute simplicité. 

Étape->3 : Choisissez un modèle d'en-tête

Vous pouvez sélectionner votre conception d'en-tête personnalisée pour votre site WordPress à partir du Bibliothèque d'en-têtes intégrée ElementsKit.

• Choisissez un design dans la bibliothèque.
• Clique sur le "Bouton Insérer » du design que vous avez choisi.
• Il mettra automatiquement votre conception d’en-tête personnalisée sur votre page Web.

Étape->4 : Personnaliser la mise en page par défaut

Pour modifier la section mise en page cliquez sur le bouton de personnalisation : 

• Activer/Désactiver la section Étirer : Vous pouvez étendre la section sur toute la largeur 
• Ajuster la largeur du contenu : Sélectionnez la largeur du contenu encadré ou pleine largeur dans le menu déroulant
• Changer la écart entre les colonnes pour affiner, étendre, élargir ou plus large.
• Ajuster la hauteur : Choisissez Elementor Fit à l’écran ou à la hauteur minimale
• Choisir aligner verticalement Du haut, du milieu, du bas, de l'espace entre, de l'espace autour, de l'espace uniformément
• Débordement: Gardez-le par défaut ou caché 
• Sélectionnez la balise HTML : Sélectionnez dans la liste déroulante

Étape->5 : Personnaliser le téléphone Nombre

Réduisez la barrière de communication en ajoutant le numéro de contact à votre site. Vous pouvez ajouter un lien vers votre numéro de contact Elementor afin que les visiteurs puissent facilement vous appeler. 

• Choisissez la mise en page : Par défaut ou en ligne
• Personnaliser l'entreprise Numéro de téléphone 
• Téléchargez n'importe quel Icône avec lien de redirection

📢📢 Voir aussi – Battre des records : célébrer plus d'un million d'utilisateurs d'ElementsKit !

Étape->6 : Personnaliser l'e-mail

Ajouter votre adresse e-mail officielle sur l'en-tête personnalisé facilite la procédure de communication. Il garantit un pont de communication plus fluide avec vos utilisateurs.

Jetons un coup d'oeil au processus de personnaliser l'adresse e-mail dans l'en-tête personnalisé de votre site WordPress.

• Choisissez la mise en page : Par défaut ou en ligne
• Ajouter ou modifier l'e-mail de l'entreprise
• Téléchargez n'importe quel Icône avec lien de redirection

Étape->7 : Personnaliser l'adresse

Permettez à vos utilisateurs de vous localiser facilement en ajoutant l’adresse de l’entreprise en haut. Cela aidera intensément à améliorer l'interaction avec l'utilisateur. Voici le processus d'ajout de l'adresse de votre entreprise dans votre en-tête personnalisé Elementor →

• Choisissez la mise en page : Par défaut ou en ligne
• Ajouter ou modifier l'entreprise 
• Téléchargez n'importe quelle icône depuis le bibliothèque d'icônes avec le lien de redirection

Étape -> 8 : Ajoutez vos profils de réseaux sociaux

Vous pouvez afficher vos profils de réseaux sociaux officiels comme Facebook, Twitter ou Instagram et connecter vos utilisateurs de manière transparente.

Pour personnaliser les icônes des réseaux sociaux afin de rendre votre en-tête personnalisé WordPress plus fiable, vous devez →

• Clique sur le widget social 
• Sélectionnez votre style : Icône, Texte ou les deux
• Sélectionnez la position d'alignement : Gauche, Centre ou Droite
• Ajouter une icône : télécharger une icône depuis la bibliothèque
• Ajouter/Modifier une étiquette
• Fournir Lien social
• Personnaliser l'icône pour la normale et le survol
• Ajouter une couleur d'arrière-plan
• Choisissez le type de bordure : Pleine, Doublée, Pointillée, Pointillée, Rainurée
• Sélectionnez l'ombre du texte : Flou, Horizontal, Vertical
• Sélectionnez l'ombre de la zone : Horizontal, Vertical, Flou, Étalé
• Choisissez la position : contour ou encart

Étape->9 : Ajouter un logo

Vous pouvez ajouter un logo en quelques étapes simples : 

• Cliquez sur l'image du logo → téléchargez ou choisissez parmi votre fichier multimédia
• Sélectionnez la taille de l'image dans la liste déroulante
• Choisissez l'alignement à gauche, au centre ou à droite
• Ajoutez n'importe quel type de légende d'image comme une légende de pièce jointe ou une légende personnalisée
• Choisissez le fichier multimédia de type lien ou l'URL personnalisée. Vous pouvez également ajouter une URL de redirection. 

Étape->10 : Ajouter Option de recherche

Si votre site Web contient une grande quantité de contenu, vous pouvez ajouter un option de recherche pour votre site Web. Découvrez comment ajouter des options de recherche personnalisées : 

1. Ajoutez-en texte d'espace réservé
2. Télécharger icône de la bibliothèque d'icônes
3. Ajustez la taille en faisant glisser

Étape->11 : Ajouter un bouton CTA

Suivez le processus pour ajouter un bouton CTA dans votre en-tête personnalisé WordPress →

• Étiquette : Ajouter ou modifier le texte du bouton
• URL : fournir un lien URL de redirection
• Activer l'icône Ajouter pour fournir l'icône du bouton
• Téléchargez le Icône de bouton depuis la bibliothèque d'icônes ou vous pouvez le télécharger depuis votre bibliothèque
• Sélectionnez la position de l'icône : avant le texte ou après le texte
• Choisissez l'alignement : Gauche, Centre ou Droite

Étape->12 : Personnaliser le menu

Megamenu Builder est l'une des fonctionnalités les plus étonnantes d'ElementsKit. Si vous souhaitez créer et personnaliser la section de menu, vous pouvez utiliser ceci Fonctionnalité mégamenu. Voyons les fonctionnalités : 

1. Choisissez votre menu précédemment créé dans la liste déroulante
2. Sélectionnez la position du menu horizontal : Gauche, Centre, Droite ou Justifié
3. Télécharger le logo du menu mobile et l'icône du hamburger
4. Activer/Désactiver la zone de clic du sous-menu : Icône/Texte
5. Activer/Désactiver une page
6. Choisissez un point d'arrêt réactif : Tablette/Mobile

Étape 13 : Test de l'en-tête

Il est maintenant temps de vérifier le résultat. Après concevoir votre en-tête personnalisé WordPress avec Elementor en cliquant simplement sur le « Bouton de mise à jour » 

Voyons le résultat final !

Emballer

C'est vraiment simple de créer un superbe en-tête de site Web avec Elementor et ElementsKit. 

J'espère que vous avez appris à créer un en-tête entièrement personnalisé pour votre site WordPress avec Elementor. Cependant, si vous avez d'autres questions sur la procédure, n'hésitez pas à laisser un commentaire ci-dessous. On sera ravis de vous aider.