Votre site web a-t-il l’air suffisamment attrayant pour les visiteurs ? Ou bien c’est juste un site web normal parmi des millions d’autres ! Souhaitez-vous que votre site web se démarque de la masse ? Voulez-vous que chaque page de votre site semble distincte avec une sensation différente ? Et si je vous disais que la clé de la solution à tous ces problèmes est entre vos mains ? Et cette clé est – Custom Header !! Oui, vous avez bien lu. Voyons comment…

Un en-tête est l’élément visuel le plus important de votre site qui occupe la position la plus haute. C’est la première chose qu’un visiteur voit lorsqu’il atterrit sur votre site. L’en-tête de votre site est l’identité de votre site Web qui reste la même sur toutes les pages du site. Vous pouvez l’utiliser pour créer un impact durable dans l’esprit du visiteur. Vous pouvez vous démarquer et gagner la confiance de l’utilisateur en créant des en-têtes personnalisés remarquables qui se dépeignent eux-mêmes. Un en-tête personnalisé dans WordPress est une fonctionnalité qui vous permet de personnaliser l’image d’en-tête tout en y ajoutant du texte, des widgets, etc. Vous pouvez également ajuster ces éléments en fonction de vos besoins pour présenter la meilleure image de votre site Web. Ici, à Templatetoaster website builder software, vérifiez comment créer un en-tête personnalisé avec WordPress theme builder.

WordPress Custom Header : Pourquoi en avez-vous réellement besoin?

L’en-tête est l’un des éléments les plus importants de votre site web. C’est un geste qui transmet beaucoup de choses sur votre site. Généralement, il contient une image ou une vidéo pour attirer l’attention du visiteur. Selon le groupe Nielsen Norman, un visiteur ne reste que 10 à 20 secondes sur votre site Web. L’en-tête doit donc être attrayant pour les intéresser.

Un en-tête personnalisé dans WordPress vous donne plus de contrôle et de flexibilité. Vous pouvez faire pivoter, redimensionner ou recadrer une image d’en-tête en plus du repositionnement du logo, du texte ou des widgets. Vous pouvez le concevoir pour contraster l’apparence de votre site Web. Vous devez l’utiliser comme une proposition au public cible. Essayez de citer votre slogan dans l’en-tête personnalisé de WordPress. Vous n’aurez peut-être pas de seconde chance pour faire une première bonne impression. Un en-tête bien structuré devrait répondre à la raison pour laquelle vous êtes unique, à tout ce que votre site propose, etc.

Donc, un en-tête personnalisé est important car il fonctionne comme un visage de votre site Web. Il devrait être en mesure de communiquer le cœur et l’humeur de votre site à l’audience. Vous pouvez avoir un en-tête personnalisé WordPress différent par page. Par exemple, vous pouvez ajouter les caractéristiques de votre produit dans l’en-tête de la page A propos de nous et le reste des pages sans caractéristiques. Cela peut faire des merveilles !!

Comment ajouter un en-tête personnalisé à WordPress?

Les thèmes WordPress par défaut vous permettent d’utiliser des en-têtes personnalisés. Vous pouvez mettre vos propres images d’en-tête personnalisées selon vos préférences. La mise en place d’une image d’en-tête personnalisée sur WordPress demande quelques efforts. Cela implique essentiellement deux étapes pour ajouter un en-tête personnalisé aux thèmes WordPress par défaut comme suit

1. Sourcez et modifiez votre image

En premier lieu, sélectionnez une image séduisante. Elle doit être simple et unique. Vous pouvez obtenir de nombreuses images gratuites sur Internet. Pour plus de détails, vous pouvez lire 16 sites web pour obtenir des images gratuites. Une fois que vous sourcez votre image d’en-tête, il ne vous reste plus qu’à l’éditer.

Vous pouvez utiliser certains des outils d’édition de bureau utiles ou des outils d’édition gratuits sur le Web. Vous pouvez rajeunir l’image choisie avec GIMP, paint.net, etc. GIMP est un logiciel d’édition d’images gratuit et open source. Il vous fournit de nombreux outils sophistiqués pour donner une touche spéciale à votre image. Tandis que paint.net facilite les outils d’édition d’images sur Windows. Faites faire votre image WordPress d’en-tête personnalisée.

2. Téléchargez l’en-tête personnalisé

Pour télécharger l’image d’en-tête, connectez-vous à votre tableau de bord WordPress. Dans le volet de gauche, naviguez vers Apparence → En-tête.

Cela ouvrira un volet Média d’en-tête sur la gauche de l’écran. Allez dans Image d’en-tête et cliquez sur le bouton Ajouter une nouvelle image.

Il ouvrira la galerie d’images pour choisir l’image. Vous pouvez également parcourir votre image personnalisée ici. Sélectionnez l’image, recadrez-la si nécessaire. Définissez-la comme l’image d’en-tête personnalisée. Vous avez terminé.

Comment personnaliser l’en-tête dans WordPress?

Une fois que vous avez téléchargé l’image d’en-tête personnalisée du thème WordPress, vous pouvez la modifier pour appliquer une vidéo, du texte, des widgets, des icônes sociales, etc. Vous pouvez utiliser n’importe quel thème WordPress par défaut. Ici, vous obtiendrez un exemple de code pour modifier l’en-tête personnalisé dans le thème Twenty Seventeen.

1. Ajouter une zone de texte à l’en-tête

Avec le thème par défaut, vous pouvez seulement changer le titre du site Web. Mais pour ajouter une zone de texte, vous devez écrire un certain code dans le fichier header-image.php. Vous ajouterez le code suivant pour obtenir une zone de texte dans le header

Après avoir ajouté ce code, vous verrez une zone de texte séparée dans le header comme indiqué ci-dessous

2. Ajouter des icônes sociales

Pour ajouter des icônes sociales au header, vous ajouterez le code suivant à site-branding.php après la classe wrap.

Vous devez également donner le CSS si vous voulez styliser les icônes sociales dans votre propre style unique.

Il vous donnera les résultats requis comme indiqué

3. Ajouter un widget à l’en-tête

Si vous voulez quelques widgets pour mettre en vedette votre site Web, vous définirez une fonction dans le fichier function.php. Vous pouvez ajouter ce code à la fin du fichier.

Une fois que vous l’avez fait, vous ajouterez ce code HTML au fichier header-image.php pour montrer le widget spécifique sur le frontend.

Maintenant, vous vous déplacerez vers Apparence → Widgets. De là, vous pouvez ajouter n’importe quel widget à votre position d’en-tête personnalisée. Par exemple, le widget Search est ajouté en le faisant simplement glisser vers la position Custom Header.

L’en-tête résultant ressemblera un peu à ceci

4. Repositionner le logo

Vous pouvez ajouter un logo aux options par défaut de WordPress. Naviguez vers Apparence → En-tête → Média d’en-tête → Section Logo. Ici, définissez un logo en cliquant sur l’option Sélectionner le logo.

Mais pour le repositionner, vous devez écrire du CSS supplémentaire. Dans le thème Twenty Seventeen, vous obtiendrez un logo en position inférieure gauche par défaut comme indiqué ci-dessous

Ici, vous verrez un exemple de CSS pour ajouter le logo en position centrale. De même, vous pouvez le placer n’importe où dans l’en-tête.

.custom-logo-link {padding-right: 2em;position: absolute;left: 500px;top: 0px;}

5. Ajouter une vidéo à l’en-tête

Enfin, vous pouvez également ajouter une vidéo à votre en-tête WordPress. Heureusement, il n’est pas nécessaire d’ajouter du code pour cela. WordPress vous fournit une option par défaut pour ajouter une vidéo ou une image de fond.

Pour ajouter une vidéo à l’en-tête, naviguez vers Apparence → En-tête → Média d’en-tête → Vidéo d’en-tête. Ici, vous cliquerez sur le bouton Sélectionner la vidéo comme indiqué ci-dessous. Ensuite, vous pouvez parcourir la vidéo que vous voulez sur l’en-tête à partir de votre ordinateur. Alternativement, vous pouvez également donner l’URL de la vidéo si elle est en ligne. Il suffit de la publier.

Votre vidéo d’en-tête ressemblera à ceci

De même, vous pouvez ajouter une image d’en-tête d’arrière-plan en sélectionnant n’importe quelle image d’en-tête dans la section Header Media.

Vous pouvez avoir différents en-têtes personnalisés WordPress par page, disons certains avec une image d’arrière-plan, d’autres avec une vidéo ou des widgets, etc. Tout dépend de votre choix et de votre créativité.

Comment créer un en-tête personnalisé dans WordPress à partir de zéro avec TemplateToaster?

Vous devez avoir de bonnes connaissances en PHP, HTML, CSS pour travailler avec des fichiers de modèles. Si vous êtes un débutant et que vous ne savez pas comment écrire du code, vous pouvez compter sur TemplateToaster WordPress Theme Builder. Vous n’avez pas besoin de coder pour créer un modèle d’en-tête personnalisé WordPress. Juste quelques clics pour glisser & déposer l’interface et vous êtes prêt avec votre en-tête personnalisé. Voyons comment ajouter un en-tête personnalisé à WordPress avec TemplateToaster

D’abord, téléchargez et installez le constructeur de site web TemplateToaster. Après l’avoir installé avec succès, vous obtiendrez l’écran de sélection du CMS comme indiqué ci-dessous. Sélectionnez le WordPress ici

Puis, vous obtiendrez l’écran suivant pour créer un modèle à partir de zéro ou utiliser un modèle type. Vous sélectionnerez Start from Scratch et cliquerez sur Modify.

Puis, vous serez redirigé vers l’interface principale du logiciel d’où vous pourrez commencer à concevoir votre en-tête personnalisé.

1. En-tête personnalisé pleine largeur

Vous obtiendrez l’écran de l’interface principale du logiciel comme indiqué ci-dessous. À partir de là, vous pouvez définir un en-tête pleine largeur. Allez dans En-tête → Largeur → Pleine largeur.

2. Repositionner le logo

Dans l’onglet En-tête, cliquez sur l’option Logo. Cela ouvrira une galerie d’icônes de logo. Vous pouvez sélectionner une image de logo dans la bibliothèque d’échantillons ou vous pouvez parcourir votre propre image personnalisée. Il définira le logo.

Lorsque vous double-cliquez sur l’image du logo, il ouvrira un onglet Format comme indiqué ci-dessous. De là, vous pouvez donner un lien à l’image du logo ou définir sa position. Vous pouvez repositionner en donnant des positions personnalisées à gauche et en haut ou sélectionner un raccourci de position. Par exemple, ici une position verticale-centre est sélectionnée pour le logo.

3. Ajouter une image d’arrière-plan

Vous sélectionnerez l’option Arrière-plan dans l’onglet En-tête pour définir une image d’arrière-plan d’en-tête. Cela ouvrira une galerie d’images. Vous pouvez également parcourir votre propre image d’en-tête personnalisée à partir de l’option Plus d’images.

De même, vous pouvez ajouter une image d’en-tête d’avant-plan en cliquant sur l’option Image de l’onglet En-tête.

4. Ajouter une zone de texte à l’en-tête

Si vous voulez afficher le slogan et les informations pertinentes sur l’en-tête, vous pouvez utiliser une zone de texte. Dans la zone de texte, vous pouvez ajouter du texte brut, un bouton, une liste, etc. Cliquez sur l’option Zones de texte.

Ajouter du contenu et le styliser en double-cliquant. Comme un double-clic ouvrira un onglet Editeur pour modifier le contenu.

5. Ajouter un widget à l’en-tête

Vous pouvez ajouter une zone de widget à l’en-tête en un seul clic. Allez dans l’onglet Zones de widgets et cliquez sur l’option Zones de widgets → En-tête. Vous pouvez également définir la typographie de ce widget et le repositionner n’importe où dans l’en-tête simplement en le faisant glisser. Vous pouvez y ajouter du contenu après l’exportation.

6. Ajouter des icônes sociales à l’en-tête

Ajouter des icônes de médias sociaux à l’en-tête est vraiment simple. À partir de l’onglet En-tête, cliquez sur l’option Icônes sociales. Cela ouvrira une galerie d’icônes sociales pour sélectionner une image en fonction de vos besoins. Vous pouvez également parcourir votre icône personnalisée ici.

Toutes les icônes de médias sociaux sont disponibles ici. Vous pouvez garder les icônes en fonction de votre besoin. Vous mettez des icônes de médias sociaux sur Facebook, Twitter et Google + ici.

7. Ajouter une vidéo à l’en-tête

Pour ajouter une vidéo, cliquez sur l’option Ajouter une vidéo. De là, vous pouvez facilement télécharger une vidéo d’arrière-plan d’en-tête.

Mots finaux

À présent, vous avez appris comment créer un en-tête personnalisé dans WordPress. Cela va définitivement changer les perspectives de votre site web. La solution que vous optez est entièrement votre choix. Nous espérons que vous avez aimé cet article. Si vous avez des questions, vous pouvez poster dans la section des commentaires ci-dessous.

Lecture connexe : WordPress 101 tutoriel

Meilleurs fournisseurs d’hébergement WordPress

Comment vérifier la version de WordPress

Comment trouver l’url de connexion de WordPress

Comment installer WordPress

Quel est le thème de WordPress ? que

Comment changer la langue de WordPress

Comment créer une page de connexion personnalisée WordPress

Comment créer un thème WordPress à partir de zéro

Comment réparer la mise à jour de la page WordPress ne fonctionne pas

.